H5+VR入门从three.js学起，下面小编带领大家完成第一个VR立方体的程序编辑
创建一个场景
目的是为了简单介绍three.js。我们将从设置一个场景开始，使用一个旋转的立方体。在页面底部提供一个工作示例，以防您遇到困难，需要帮助。在我们开始之前，你可以使用three.js。你需要一个地方来展示它。将下列HTML保存到您的计算机上的一个文件，以及3个副本。js在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显示任何东西。我们需要三样东西:场景、摄像机和渲染器，这样我们就可以用相机渲染场景。
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 );
让我们花点时间来解释一下这里发生了什么。
我们现在已经设置了场景，我们的相机和渲染器。
有几个不同的照相机。
现在，让我们使用一个透视卡。
第一个属性是视图的字段。
第二个是纵横比。
你几乎总是想要用元素的宽度除以高度，或者你会得到与在宽屏电视上*放播**老电影时一样的结果——图像看起来是压扁的。
接下来的两个属性是近处和远剪辑平面。
这意味着，距离摄像机远的物体远比近距离的距离更近。
现在您不必担心这个问题，但是您可能希望在应用程序中使用其他值来获得更好的性能。
接下来是渲染器。
这就是魔术发生的地方。
除了我们在这里使用的WebGLRenderer，还有three.js附带了一些其他的，通常用作老浏览器的用户的回调，或者是那些没有WebGL支持的用户。
除了创建渲染器实例之外,我们还需要设置的大小我们想要呈现应用程序。这是一个好主意使用区域的宽度和高度,我们要充满我们的应用程序——在这种情况下,浏览器窗口的宽度和高度。对于性能密集型应用程序，您还可以提供setSize较小的值，比如window.innerWidth / 2和窗口,innerHeight/ 2，)这将使应用程序呈现在一半大小。
如果希望保留应用程序的大小，但以较低的分辨率呈现，则可以通过使用false作为updateStyle(第三个参数)来实现。
例如,setSize(窗口.innerWidth / 2,窗口.)将你的应用程序显示在一半分辨率下
最后，我们将renderer元素添加到HTML文档中。
“这很好，但你承诺的那个立方体在哪儿?”“现在就把它加进去。”
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;
要创建一个立方体，我们需要一个box几何体。这个对象包含了立方体的所有点(顶点)和填充(面)。我们将在未来进一步探讨这一点。
除了几何，我们还需要一种材料来涂颜色。Three.js附带了一些材料，但我们现在要坚持使用网格材料。所有的材料都有一个属性的对象，它将被应用于它们。
为了简单起见，我们只提供了一个颜色属性0x00ff00，它是绿色的。
这与CSS或Photoshop(hex颜色)的颜色相同。
我们需要的第三件事是一个网格。网格是一种几何形状的对象，并将其应用于它，然后我们可以插入到我们的场景中，并自由地移动。在默认情况下，当我们调用scene.add()时，我们添加的东西将被添加到坐标(0,0,0)。这将使摄像机和立方体彼此内部。为了避免这种情况，我们只是把相机稍微移动一下。
渲染这个环境
如果您将代码从上面复制到我们前面创建的HTML文件中，您将看不到任何东西。这是因为我们还没有实际呈现任何东西。为此，我们需要所谓的渲染或动画循环。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
这将创建一个循环，使渲染器每秒绘制60次场景。如果你刚开始在浏览器中写游戏，你可能会说:“为什么我们不创建一个setInterval呢?”问题是，我们可以，但requestAnimationFrame有很多优点。也许最重要的一点是，当用户导航到另一个浏览器选项卡时，它会暂停，因此不会浪费宝贵的处理能力和电池寿命。
使这个立方体有生命
如果您将所有的代码都插入到我们开始之前创建的文件中，您应该看到一个绿色的方框。旋转一下，让它变得更有趣一点。在渲染器上方添加下面的内容。
在您的动画函数中调用
cube.rotation.x += 0.1;
cube.rotation.y += 0.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.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
重庆渝中区