Three.js 创建场景
Three.js 创建场景
本节的目标是简要介绍three.js。我们将从设置场景开始，并使用旋转立方体。页面底部提供了一个工作示例，以防您陷入困境并需要帮助。
我们开始之前
在使用 three.js之前，需要在某个地方显示它。将以下HTML与js /目录中的 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实际显示任何内容，我们需要三个东西:场景、相机和渲染器，这样我们就可以使用相机渲染场景。
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有几种不同的类型。现在，让我们使用透视相机。
第一个属性是视图。FOV是在指定时刻在显示器上看到的场景的范围，数值以度为单位。
第二个是长宽比,您几乎总是希望使用元素的宽度除以高度，否则您将获得与在宽屏电视上播放旧电影时的结果:图像看起来有点变形。
接下来的两个属性是近裁剪平面和远裁剪平面。这意味着，距离摄像机较远或较近的对象不会被渲染。您现在不必为此担心，但您可能希望在应用程序中使用其他值来获得更好的性能。
下一步是渲染器。这就是神奇的地方。除了我们这里使用的WebGLRenderer之外，three. js还附带了其他几个，通常用于使用较旧浏览器的用户或由于某种原因而不支持WebGL的用户。
除了创建渲染器实例之外，我们还需要设置渲染应用程序所需的大小。使用应用程序填充区域的宽度和高度是一个好主意，在本例中是浏览器窗口的宽度和高度。对于性能密集型应用程序，还可以为setSize提供较小的值，如window.innerWidth/2 and window.innerHeight/2,，这将使应用程序渲染为一半大小。
如果您希望保持应用程序的大小，但以较低的分辨率呈现它，则可以在调用setSize的时候通过设置updateStyle为false (第三个参数)来实现。例如，setSize ( windows.innerwidth/2,windows.innerheight/2,false )将以半分辨率渲染应用程序，前提是<canvas>具有100 %的宽度和高度。
最后，我们将渲染器元素添加到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;要创建立方体，我们需要一个长方体几何。这是一个包含立方体的所有顶点和填充(面)的对象。我们将在今后进一步探讨这一点。
除了几何图形，我们还需要材质来给它上色。three.js有几种材质，但我们暂时使用MeshBasicMaterial 。所有材质都具有将应用于它们的属性对象。为了简单起见，我们只提供0x00ff00的颜色属性，它是绿色的。这与CSS或Photoshop (十六进制颜色)中的颜色工作方式相同。
我们需要的第三件事是Mesh（网格）。网格是一个对象，它采用一个几何图形，并向其应用一种材质，然后我们可以将该材质插入到场景中，并自由移动。
默认情况下，当我们调用scene.add()时，我们添加的对象将添加到坐标(0,0,0)中。这将导致照相机和立方体都在彼此内部。为了避免这种情况，我们将相机移出一点点。
渲染场景
如果您将上面的代码复制到我们之前创建的HTML文件中，您将看不到任何内容。这是因为我们实际上还没有渲染任何内容。为此，我们需要所谓的渲染或动画循环。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();这个方法将创建一个循环，使渲染器在每次刷新屏幕时绘制场景(一般每秒刷新60次)。如果你还不熟悉在浏览器中编写游戏，你可能会问“为什么我们不使用setInterval ？”，如果你愿意当然可以，但是requestAnimationFrame有很多优点，最重要的一点是，当用户导航到另一个浏览器选项卡时，它会暂停，因此不会浪费他们宝贵的处理能力和电池寿命。
让立方体动起来
如果您将上述所有代码插入到我们开始之前创建的文件中，您将看到一个绿色的盒子。让我们旋转它，让它变得有趣一点。
在renderer.render正上方添加以下内容，在animate方法中进行渲染调用:
cube.rotation.x += 0.1; cube.rotation.y += 0.1;
这将逐帧执行，并给立方体一个的旋转动画。基本上，当应用程序运行时，您想要移动或更改的任何内容都必须经过animation的循环。当然，您可以从那里调用其他函数，这样您就不会得到一个数百p的动画函数
结果
恭喜！您现在已经完成了第一个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.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>