本篇教程通过一个示例简单的介绍了threejs主要概念,以及在threejs中场景的呈现逻辑。最后有示例的代码,可以自己运行尝试,可以关注公众号【 砖人专语】分享更多threeJS、webGL有趣的事情
开始之前
在使用three.js之前,你需要有一个地方来呈现它。可以将下面代码保存,并且用浏览器打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
下面所有的代码都会在script标签里面
创建场景
要想使用three.js来展示任何物体,我们需要三样东西: scene, camera and 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,创建PerspectiveCamera的第一个参数是视野,field of view,FOV定义了在任何一刻我们能够看到的场景的范围,单位是度数。
第二个参数是纵横比,aspect ratio,基本上正常都会设置成宽度比高度,反之的话就会看到图像是被压扁的效果。
接下来的两个属性是近剪裁平面和远剪裁平面,near and far,这意味着比far更远或者比near更近的物体是不会被渲染出来的。相机只渲染介于两者之间的物体。现在你可以先不必考虑这一点,但是在你做自己的程序时,你可能会设置成合适的值来提升性能。
下一个值就是渲染器renderer,这里就是魔术开始的地方。除了我们这里使用的WebGLRenderer以外,three.js还有其他的一些渲染器,用于一些就浏览器的备用或者由于某些原因不支持webgl的情况。
除了创建渲染器实例之外,我们还需要设置我们希望它渲染我们的应用程序的大小。通常来讲,这个大小是浏览器窗口的宽度和高度。对于性能密集型应用程序,您还可以为setSize提供较小的值,例如window.innerWidth / 2和window.innerHeight / 2,这将使应用程序呈现为一半大小。
如果你希望保持应用程序的大小但是以较低的分辨率渲染它,可以通过调用setSize并将其作为updateStyle(第三个参数)来调用。例如**setSize(window.innerWidth/2, window.innerHeight/2, false)**将会以canvas100%的宽度和高度渲染,但是分辨率会减少到一半。
最后,我们把renderer元素添加进我们的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这个几何,它包含了正方体所有的点和面,除了几何以外,我们还需要有材质来为它赋色。three.js里有很多材质,但是目前我们暂时只关注于MeshBasicMaterial,这里为了简单,我们只给这个材质设置了一个颜色0x00ff00,这里的颜色和CSS里或者PS里颜色一致。
有了几何和材质,下一个我们需要的是mesh,mesh是一个对象,它有几何和材质组成,可以添加进场景并且在场景里自由移动。
我们默认使用**scene.add()**来将物体添加进场景里,默认位置是(0,0,0),这样的话我们的相机位置就和这个正方体位置重合了,因此我们将相机的位置往外移动一点。
渲染场景
如果你将上面的代码复制进HTML,你也看不到任何东西。这是因为我们还没有用渲染器渲染。因此我们需要用render去渲染,并且放到动画循环里。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
这里我们创建了一个循环,这样这个渲染器就会在每次屏幕刷新的时候渲染一次场景,这里你可能会问为什么不用setInterval方法,这是因为requestAnimationFrame有很多好处,其中最大的好处就是当你点击浏览器另外的tab页时,它就会暂停,因此就不会浪费电脑的性能和电池。
旋转正方体
如果你将上面的代码都复制到HTML页面,你应该可以看到一个绿色的正方体,下面我们再增加一点乐趣,让它自转。
将下面的代码加入上面的动画循环里,在render之前。
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
这行代码会在每一帧运行(通常是1秒60帧),并且给正方体一个旋转动画。基本上你所有想移动或者改变的事情都可以放在这个动画循环里,你可以在这里调用其它函数,这样你就不需要写数百行的动画函数了。
最终结果
恭喜你完成了第一个three.js的应用程序。完整的代码贴在下方,你可以自己尝试一下,做做实验,弄清楚上面提到的几个概念。
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
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 );
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;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>