一、创建一个场景

要有三个重要对象：场景（scene）、相机(camera)、渲染器(renderer)
这样就可以用相机渲染一个场景。

  1. const scene = new THREE.Scene();
  2. const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  4. const renderer = new THREE.WebGLRenderer();
  5. renderer.setSize( window.innerWidth, window.innerHeight );
  6. document.body.appendChild( renderer.domElement );
  • THREE.PerspectiveCamera(fov视野角度, aspect ratio长宽比, near近截面, far远截面)

perspectivecamera.jpg
FOV取值在60-90度之间较好的默认值为60

  • 创建渲染器，还需要指定渲染尺寸。

除此之外，如果你希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用setSize时，将updateStyle（第三个参数）设为false。例如，假设你的 标签现在已经具有了100%的宽和高，调用setSize(window.innerWidth/2, window.innerHeight/2, false)将使得你的应用程序以一半的分辨率来进行渲染。

  • 最后一步很重要，我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的元素。


二、创建一个立方体

  1. const geometry = new THREE.BoxGeometry();
  2. const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  3. const cube = new THREE.Mesh( geometry, material );
  4. scene.add( cube );
  6. camera.position.z = 5;

上面第三步时，我们需要一个Mesh（网格）。 网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。
默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。

三、渲染场景

此为真正渲染，我们需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”（animate loop）的东西。

  1. function animate() {
  2.     requestAnimationFrame( animate );
  3.     renderer.render( scene, camera );
  4. }
  5. animate();

在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）。如果你是一个浏览器游戏开发的新手，你或许会说“为什么我们不直接用setInterval来实现刷新的功能呢？”当然啦，我们的确可以用setInterval，但是，requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。

四、使立方体旋转起来

将下列代码添加到animate()函数中renderer.render调用的上方：

  1. cube.rotation.x += 0.01;
  2. cube.rotation.y += 0.01;

这段代码每帧都会执行（正常情况下是60次/秒），这就让立方体有了一个看起来很不错的旋转动画。

基本demo即可完成，其中three.js源码查看此链接，代码如下：

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>My first three.js app</title>
  5.         <style>
  6.             body { margin: 0; }
  7.         </style>
  8.     </head>
  9.     <body>
  10.         <script src="js/three.js"></script>
  11.         <script>
  12.             const scene = new THREE.Scene();
  13.             const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  15.             const renderer = new THREE.WebGLRenderer();
  16.             renderer.setSize( window.innerWidth, window.innerHeight );
  17.             document.body.appendChild( renderer.domElement );
  19.             const geometry = new THREE.BoxGeometry();
  20.             const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  21.             const cube = new THREE.Mesh( geometry, material );
  22.             scene.add( cube );
  24.             camera.position.z = 5;
  26.             const animate = function () {
  27.                 requestAnimationFrame( animate );
  29.                 cube.rotation.x += 0.01;
  30.                 cube.rotation.y += 0.01;
  32.                 renderer.render( scene, camera );
  33.             };
  35.             animate();
  36.         </script>
  37.     </body>
  38. </html>