three.js(使用总结一）

three.js使用总结

1、引入需要 的文件

<script src="./build/three.min.js"></script> <!-- 此处引入threejs基础类 -->
<script src="CSS3DRenderer.js"></script> <!-- 此处引入CSS3Drenderer.js类 -->
<!-- 以上两个文件，在下载threejs的时候就有的，引入就好 -->

2、要在前端页面中展示3d模型，我们需要的几个组成元素：
（1）场景
场景是所有物体的容器，我们要做的就是把模型装到这个容器里面。

this.scene = new THREE.Scene()

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

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

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

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

(4)物体(灯光、模型等）
1、使用three.js的几何模型

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

2、自定义模型的导入

var suidaoobj = new THREE.OBJLoader(); 
var 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、灯光
光源分为点光源、坏境光、平行光等等。这里使用的是平行光。

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

4、渲染

renderer.render( scene, camera );

环境渲染

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