Three.js入门（一）

蔚落 2022-05-11 00:48 178阅读 0赞

# Creating the secne #

想要Three.js显示任何东西，我们都需要三个东西：

*  scene（场景）
 *  camera（摄像机）
 *  renderer（渲染器

我们来分析以下代码

var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

在Three.js中有多种摄像机，我们这里是用的是PerspectiveCamera。构造函数里的第一个参数是视野大小(fov-field of view),意思是指整个视图被显示出来的大小，单位为角度。

构造函数的第二个参数是宽高比。

接下来的两个参数分别是near和far，当物体远离摄像机超过far或靠近摄像机小于near时，物体都不会被渲染，用来节省资源。

接下来是渲染器(renderer),除了我们使用的WebGLRenderer，THree.js还提供了几种渲染器，主要是用在较老的浏览器中。

为了创建渲染器实例，我们还需要为其设置大小，也就是我们希望渲染的大小。

如果你想节省系统资源，你可以选择降低渲染视图的大小。或者降低渲染的分辨率（为setSize方法的第三个参数传入false，然后前两个参数设置较小的数值，若不传入false，则只是改变大小，传入false，改变分辨率不改变大小）。

最后，我们要将渲染器元素插入html文档中。渲染器通过使用canvas元素来呈现渲染结果。

接下来我们来创建一个方块。

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

为了创建一个方块，我们需要用到BoxGeometry对象。这个对象包含了一个方块的所有点和面。

除了要BoxGeometry，我们还需要一些材质来为方块着色。Three.js提供多种材质，但我们现在只是使用MeshBasicMaterial。所有的material（构造函数），都能接受一个对象作为参数来初始化材质。

最后我们需要Mesh，Mesh对象的构造函数需要传入一个geometry和material对象。然后我们便可以将其插入到场景中，并自由的移动。

默认状态下，当我们使用scene.add()方法时，物品会被添加到坐标原点上，这样会与摄像机位置冲突，所以我们要略微移动摄像机的位置。

到目前为止，我们还没有在网站上渲染出任何画面。为此我们需要进行渲染。

function animate() {
    	requestAnimationFrame( animate );
    	renderer.render( scene, camera );
    }
    animate();

这个函数会产生一个循环使得渲染器在屏幕每次被刷新时产生新的一帧。可能你会说“那么为什么我不用setInterval方法呢？”我们确实可以，但是requestAnimationFrame拥有许多优点，其中最重要的一点是当用户切换到其他页面时渲染就会暂停，因此我们可以节省大量资源。