共计 2619 个字符，预计需要花费 7 分钟才能阅读完成。
原文地址：https://threejs.org/docs/inde…。
我也是初学，记录一下本人的学习过程，有不对的中央请多多指教，谢谢！
这一节是对 threejs 一个简短的介绍，咱们从搭建一个旋转立方体的场景开始。如果被卡住或者有疑难的话，页面底部有可运行的例子供参考。
在开始之前
在应用 threejs 之前，要生成应用它的环境，保留上面的代码为 html 文件，而后引入 threejs 脚本，最初在浏览器中关上该 html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style> body {margin: 0;} </style>
</head>
<body>
<script src="js/three.js"></script>
<script> // Our Javascript will go here. </script>
</body>
</html>这样就能够了，之后咱们的代码就放在空的 script 标签中。
创立一个场景
要通过 threejs 真正的创立货色来展现，咱们须要三个元素：场景，相机和渲染器。这样咱们就能够用相机来渲染场景。
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);先解释一下咱们在做什么。咱们创立了场景 (scene)，渲染器(renderer) 和相机(camera)。
threejs 有几种不同的相机，这里咱们应用的是透视相机(PerspectiveCamera)。
第一个属性是视线(field of view)。FOV 在任意时刻都是场景的延长，单位为度。
第二个就是纵横比(aspect ratio)。要长于应用到宽度 / 高度数据，不然会失去在宽屏电视上播放老电影一样被压扁的成果。
接下来两个属性是远近剪切面(near, far)。即一个物体超过远剪切面或者近于近剪切面是无奈展现的。当初不必放心，然而之后会有一些场景须要配置值来使展现变得更好。
接下来是渲染器。这是魔法开始的中央，除了 WebGLRenderder 之外，threejs 还提供了一些参数和回调来兼容不反对 WebGL 的一些老浏览器。
为了创立一个渲染的实例，在渲染利用的时候咱们也须要设置尺寸。用一个设置好宽高的区域来填充利用是个很好的主见，在本例中是浏览器的宽高。对于性能密集型利用来说，也能够给 setSize 函数传小一点的的参数值，比方 window.innerWidth/2,window.innerHeight/2，这样就能够让利用只有一半的大小。
最初但同样重要的是，咱们在 html 中增加了渲染元素，最初由 <canvas> 来展现咱们的场景。
“很不错，然而立方体呢”，咱们马上加上。
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00} );
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;为了增加这个立方体，咱们须要盒子模型 (BoxGeometry)。这是 一个蕴含着立方体所由点(顶点) 和填充 (面) 的对象。咱们当前再扩大更多。
除了模型，咱们也须要填充物料的色彩。threejs 自带了一些物料，咱们这次就用 MeshBasicMaterial，所有的物料都自带一个能够作用其本身的对象配置参数，为了放弃例子简略，咱们这里就只传了色彩的参数，这里的色彩和 css 或者 ps 中的工作原理雷同。
第三样用上的货色是网格(Mesh)。网格是一个对象，取一个几何体，而后把物料利用在下面，能够在场景里自在的增加和移除。
默认状况下，咱们应用 scene.add()，参数会被增加到坐标中，这会导致立方体和场景相互嵌套，为了防止这种状况，咱们将相机位移了一点。
渲染一个场景
如果你复制了下面的代码并运行，会发现什么都没有。这是因为其实咱们什么都没有渲染，所以咱们须要渲染 / 动画循环。
function animate() {requestAnimationFrame( animate);
renderer.render(scene, camera);
}
animate();这会循环刷新并渲染场景(典型的场景中是 1s60 次)，如果你是第一次在浏览器中写动画，你可能会问为什么不必 setinterval，尽管能够，然而 requestAnimationFrame 有很多长处，最重要的一点是它会在用户导航到其余页面的时候进行，从而不节约贵重的解决能力和电池寿命。
使立方体动起来
如果你插入了立方体的代码，你就能看到一个绿色的盒子，让咱们把它旋转起来。
在 animate 函数中，renderer.render 的正上方增加以下代码：
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;这会在每一帧中被执行(一般来说是 1s60 次)，给立方体一个不错的旋转动画。基本上，在利用运行期间，你想挪动或扭转任何货色都得通过动画来实现，当然能够用这里调用其余函数，这样就用在一个 animation 函数中写几百行代码了。
后果
恭喜你，当初曾经实现了第一个 threejs 利用，简略，然而得从这个开始学习。
残缺代码如下所示，运行一下以便更好的了解。
demo 地址：https://github.com/wanzizi/three_test/blob/master/demo/index.html
下一篇：threejs 文档翻译：二. 画线