创建一个场景
本节的目的是简要介绍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>