创建一个场景
本节的目的是简要介绍three.js。我们将从建立一个具有旋转立方体的场景开始。
开始之前
在使用three.js之前,您需要在某个地方显示它。将以下HTML以及js /目录中的three.js副本保存到计算机上的文件中,然后在浏览器中将其打开。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个three.js程序</title> <style> body { margin: 0; } canvas { 100%; height: 100% } </style> </head> <body> <script src="js/three.js"></script> <script> //JS代码区域 </script> </body> </html>
就这样。下面的所有代码都放入空的<script>标记中。
创建场景
为了真正能够使用three.js显示任何内容,我们需要三件事:场景,相机和渲染器,以便我们可以使用相机渲染场景。
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是在任何给定时刻在显示屏上看到的场景范围。该值以度为单位。
第二个是:长宽比。您几乎总是想用元素的宽度除以高度,否则得到的效果与在宽屏电视上播放老电影时的效果相同-图像看起来很压缩。
接下来的两个属性是近和远裁剪平面。这是什么意思,是对象从相机比的值越远远或近于附近将不会被渲染。您现在不必为此担心,但是您可能希望在应用程序中使用其他值以获得更好的性能。
接下来是渲染器。这就是魔术发生的地方。除了我们在这里使用的WebGLRenderer之外,three.js还有其他一些,通常用作使用较旧浏览器的用户或由于某些原因不支持WebGL的用户的备用。
除了创建渲染器实例之外,我们还需要设置渲染应用程序实例的大小。最好使用我们要在应用程序中填充的区域的宽度和高度-在这种情况下,使用浏览器窗口的宽度和高度。对于性能密集型应用程序,您还可以给setSize较小的值,例如window.innerWidth / 2和window.innerHeight / 2,这将使应用程序以一半大小呈现。
如果您希望保留应用程序的大小但以较低的分辨率进行渲染,则可以通过将setSize设置为false作为updateStyle(第三个参数)来实现。例如,鉴于您的<canvas>具有100%的宽度和高度,setSize(window.innerWidth / 2,window.innerHeight / 2,false)将以半分辨率呈现您的应用程序。
最后但并非最不重要的一点是,我们将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的color属性,它是绿色。这与在CSS或Photoshop中使用颜色(十六进制颜色)的方式相同。
我们需要的第三件事是网格。网格是采用几何形状并对其应用材质的对象,然后我们可以将其插入场景并自由移动。
默认情况下,当我们调用scene.add()时,我们添加的内容将被添加到坐标(0,0,0)中。这将导致摄像机和立方体都位于彼此内部。为避免这种情况,我们只需要稍微移开相机即可。
渲染场景
如果将代码从上面复制到我们之前创建的HTML文件中,您将看不到任何内容。这是因为我们实际上还没有渲染任何东西。为此,我们需要所谓的render或animate loop。
function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate();
这将创建一个循环,使刷新器在每次刷新屏幕时绘制场景(在典型的屏幕上,这意味着每秒60次)。如果您不熟悉在浏览器中编写游戏的内容,则可以说“我们为什么不创建setInterval吗?” 问题是-我们可以,但是requestAnimationFrame有许多优点。也许最重要的一个是,当用户导航到另一个浏览器选项卡时它会暂停,因此不会浪费他们宝贵的处理能力和电池寿命。
动画立方体
如果将上面所有代码插入我们开始之前创建的文件中,您将看到一个绿色框。让我们通过旋转使它变得更加有趣。
在您的动画函数中的renderer.render调用上方添加以下内容:
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
这将每帧运行一次(通常每秒运行60次),并为立方体提供漂亮的旋转动画。基本上,您想要在应用运行时移动或更改的所有内容都必须经过动画循环。当然,您可以从那里调用其他函数,这样就不会以数百行的动画函数结束。
结果
恭喜你!现在,您已经完成了第一个three.js应用程序。很简单,您必须从某个地方开始。
完整的代码可在下面获得,并作为可编辑的实时示例。试一试,以更好地了解其工作原理。
<html> <head> <title>My first three.js app</title> <style> body { margin: 0; } canvas { 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>