关于javascript:threejs文档翻译一创建场景

原文地址：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 文档翻译：二. 画线

关于javascript:threejs文档翻译一创建场景

在开始之前

创立一个场景

渲染一个场景

使立方体动起来

后果