three.js使用总结（一）

three.js使用总结

(这里项目使用的是vue.js)

1、引入需要的文件

  import './three.js-master/build/three.js'  
  import './three.js-master/examples/js/loaders/OBJLoader.js'  
  import './three.js-master/examples/js/loaders/MTLLoader.js'  
  import './three.js-master/examples/js/loaders/DDSLoader.js'  
  import './three.js-master/examples/js/controls/OrbitControls.js'

2、要在前端页面中展示3d模型，我们需要的几个组成元素：

（1）场景

场景是所有物体的容器。我们要做的就是把模型装入到这个容器里面。

this.scene = new THREE.Scene()

（2）相机

相机决定了场景中那个角度的景色会显示出来。
我们可以将相机理解为眼睛，眼睛的位置决定你看的角度。

this.camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000)

（3）渲染器

通过渲染器将我们要展示的东西渲染到domElement元素（以下是container ）的画布上面。

this.renderer = new THREE.WebGLRenderer()        
this.renderer.setClearColor(0x101d2c);//颜色
this.renderer.setSize(window.innerWidth, window.innerHeight);//范围，大小
let container = document.getElementById('container')        
container.append(this.renderer.domElement)

（4）物体（灯光、模型等）

1、使用three.js的几何模型

this.geometry = new THREE.CubeGeometry(1,1,1); //模型（three.js几何体）
this.material = new THREE.MeshBasicMaterial({color: 0x00ff00});//材质
this.cube = new THREE.Mesh(geometry, material); //Mesh模型对象
this.scene.add(cube);//将模型加入到场景中

2、自定义模型的导入(.obj模型文件 .mtl材质文件)

let suidaoobj = new THREE.OBJLoader(); 
let suidaomtl = new THREE.MTLLoader();          
suidaomtl.load(url, function (materials) {   //加载材质mtl文件
	materials.preload();
        suidaoobj.setMaterials(materials);            
        suidaoobj.load(url, function (obj) {   //加载模型obj文件
                obj.position.set(-40,0,30)          //坐标
		obj.scale.set(1, 1, 1)      //缩放
                this.scene.add(obj);
        })

3、灯光

光源分为点光源、环境光、平行光等等。这里使用的是平行光。

let DirectionalLight = new THREE.DirectionalLight(0xffffff,3);        //光源颜色及强度
DirectionalLight.position.set(-5000,5000,5000); //光源位置

3、渲染

this.render( this.scene, this.camera)

循环渲染

renderScene: function () {        
	requestAnimationFrame(this.renderScene)
        this.renderer.render(this.scene, this.camera)
},