欢迎来到Three.js的三维世界

图形的东西必须见着效果才能学会的，所见即所得，你自己好好去研究three.js下example案例是一个很好的方法。我这里就给你提供了捷径讲一些基础的案例。我们来画一个粉红色的四边形，如下图所示。你先按照上一节搭好环境，在examples目录下自己写一个html文件。也可以在examples同级目录下建一个文件夹写自己的html，但是要拷贝examples下的库文件。

因为这是第一个程序，会讲的比较仔细。我这个html一共三个函数init(),onWindowResize(), animate()
1.init()函数一般把所有初始化的工作都放在这里了，包括场景的加载，相机的设置等。具体如下：
PerspectiveCamera说的是我们的相机是个透视投影的相机，就是满足近大远小的规律，设置了相机照出来的照片的长宽比，远近裁剪面以及视域角度等。camera.position设置相机在三维世界中的位置。这个camera不懂的可以在以后的章节再细讲。

			camera = new THREE.PerspectiveCamera( 70,  window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 400;

生成场景节点就是你想描绘所有的东西，并且调用planeBufferGeometry生成一个平面，设置它的颜色，然后加入到场景节点中

  			scene = new THREE.Scene();                    
            let geometry = new  THREE.PlaneBufferGeometry(300,300,1,1);
            let material = new THREE.MeshBasicMaterial({ color: 0xff00ff ,side: THREE.DoubleSide});
            mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

设置显示模式抗锯齿（这个是给底层的一个显示要求），以及画布的尺寸，和添加监听窗口缩放的消息等

		renderer = new THREE.WebGLRenderer( {  antialias: true } );                
 	    renderer.setPixelRatio(  window.devicePixelRatio );
        renderer.setSize( window.innerWidth,  window.innerHeight);
        document.body.appendChild(  renderer.domElement )
		window.addEventListener( 'resize', onWindowResize, false );

2.animate（）函数做了动画的部分。三维图形的画面是一帧一帧的动画，每一帧画面的变化都需要更新，比如这里更新了四边形的旋转角度，可能以后还会更新物体的形状颜色等，或者相机的位置等都在其中更新。 requestAnimationFrame这个是浏览器每隔一定的时间就调用一次，这是形成动画画面的关键。mesh是四边形，rotation.xy是它的旋转角度，一直在旋转，render.render就是重新渲染这个浏览器的画面。

			requestAnimationFrame( animate );          
            mesh.rotation.x += 0.005;
            mesh.rotation.y += 0.01;          
            renderer.render( scene, camera );    

3.onWindowResize()一看就知道是当浏览器中的窗口大小变化时三维窗口内图形相应变化。并且相机等进行相应的变化。相机指的是三维图形中一直有个管摄像的或者说是个观察者。Aspect指的是渲染窗口的长宽比。

		   camera.aspect = window.innerWidth /  window.innerHeight;
           camera.updateProjectionMatrix();
           renderer.setSize( window.innerWidth,  window.innerHeight );       

源代码的链接为 https://gitee.com/irisxtt/threejs-example/blob/master/example1.html

运行结果：http://www.b2bdmp.com/examples/example1.html