创建一个场景
这一节的目的是为three.js做简单的介绍。我们会创建一个旋转立方体场景。一个工作例子在页面的底部被提供防止你陷入困境和需要帮助。
在我们开始之前，你需要去展示。保存下面的HTML，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>创建场景
使用three.js我们需要: 场景(scene) 相机(camera)渲染器(renderer)，我们使用相机渲染场景。
在three.js有不同的相机，这里我们用的是透视相机。
第一个参数属性是视图域。FOV(field of view)是被看见的场景的范围。数值是度数。
第二个参数是长宽比。你总需要。
下面2个参数是 近裁剪面，远裁剪面。距离相机太近或者太远的不会被渲染。
你不必担心这个问题。
渲染器，这是魔法发生的地方。除了我们在这里使用的WebGLRenderer。
除了创建渲染实例，我也需要设置大小在app上渲染的大小。
使用可以填充我们app的高度和宽度是个好主意。这里是浏览器的高度和宽度。
对于性能密集型程序，我们也可以 setSize 更小的值，如 window.innerWidth/2 window.innerHeight/2 ,可以使渲染一半。
如果你要一个较低的分辨率，你可以设置 setSize为false updateStyle(第三个参数)。
例如：setSize(window.innerWidth/2,window.innerHeight/2,false)会渲染你的app在一半的resolution，当你的canvas有100%的高宽的时候。
最后我们把渲染标签添加到 HTML 文档。这是<canvas>标签 用来渲染展示给我们。
下面添加立方体。
创建一个立方体，我需要一个BoxGeometry。这是一个对象包含 所有的点(顶点)和面(面)对象。我们将会进一步探讨这个问题。
除了几何体，我们需要材质你懂的(玩过unity吗就那个东西)可以给cube的面涂色。
Three.js自带几种材质，但是我们会坚持MeshBasicMaterial。
所有的材质都有一个属性对象。
为了让所有的简单化，我们仅仅提供一个绿色颜色属性。
我们还需要一个网格，
网格是一个对象，它需要一个几何体，并将一个材料应用到它，然后我们可以插入到我们的场景中，并自由移动。
默认情况下，当我们调用scene.add()，这件事我们添加将添加到坐标（0,0,0)。这将导致相机和立方体彼此重合，因为相机和立方体是重合的，坐标一样。为了避免这种情况，我们只需稍微移动一下摄像机，改变摄像机(camera)的坐标。
渲染场景
上面还没有渲染我们看不到。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();你会说为什么我们不使用setInterval,但是 requestanimationframe具有很多优点，到你在浏览器另外一个浏览器选项卡，它会停止。不浪费处理能力和电池寿命。
让立方体动起来。
如果你把上面的代码放进去你会看到一个绿色框框。但是我们可以让它转起来。
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;ok了
1359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
