threejs 1基础概念
Posted eret9616
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了threejs 1基础概念相关的知识，希望对你有一定的参考价值。
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文档翻译：二.画线
以上是关于threejs 1基础概念的主要内容，如果未能解决你的问题，请参考以下文章