vue项目中使用ThreeJs加载外部的obj模型文件
3、html部分<template><div><div id="container"></div></div></template>2、js部分import * as Three from 'three'import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader'
·
1、安装three以及依赖
npm install three
npm install three-orbitcontrols
npm install three-obj-mtl-loader
2、实现代码
<template>
<div>
</div>
</template>
<script>
import * as Three from 'three'
import OrbitControls from 'three-orbitcontrols'
import {OBJLoader} from 'three-obj-mtl-loader'
export default {
data () {
return {
// 相机
camera: null,
// 场景
scene: null,
// 渲染器对象
renderer: null,
// 材质对象
mesh: null,
controls:null,
}
},
methods: {
// 初始化
init () {
// 相机位置
let width=window.innerWidth;
let height=window.innerHeight;
// 创建场景
this.scene = new Three.Scene();
let k = width/height;
let s = 150;
this.camera = new Three.OrthographicCamera(-s*k,s*k,s,-s,1,1000);
this.camera.position.set(80, 100, 60);
this.camera.lookAt(new Three.Vector3(1, 80, 0));
this.scene.add(this.camera);
// 创建点光源
let light=new Three.DirectionalLight(0xffaaff);
light.position.set(80,100,50);
this.scene.add(light);
// 创建渲染器
this.renderer = new Three.WebGLRenderer({antialias: true})
this.renderer.setSize(width, height)
document.body.appendChild(this.renderer.domElement);
// 创建控件对象
this.controls=new OrbitControls(this.camera,this.renderer.domElement);
this.controls.addEventListener('change',this.animate);
},
// 创建obj模型
loadObj () {
let that=this;
let objloader=new OBJLoader();
objloader.load('static/obj/male02/male02.obj',function(obj){
that.mesh=obj;
that.scene.add(that.mesh);
that.animate();
})
},
// 创建动画
animate () {
this.renderer.render(this.scene, this.camera)
},
},
mounted () {
this.init();
this.loadObj();
}
}
</script>
<style scoped>
#container {
height: 800px;
}
#three{
height:800px;
}
</style>
3、模型文件路径
4、实现效果
5、模型文件
文件存在于 three.js\examples\models\obj
,大家可以自行下载threejs并使用里面的模型进行练习
threejs下载地址https://github.com/mrdoob/three.js
更多推荐
已为社区贡献2条内容
所有评论(0)