Creating a scene_scene.add-CSDN博客

Creating a scene

这一部分的这一部分的目的是对three.js进行详细介绍介绍。我们将从在scene中显示一个旋转几何体开始。页面底部提供了一个例子，以防你困惑时需要帮助。

Before we start

在用three.js之前，你需要一个地方来展示它。将下面的HTML保存为文件，并且保存three.js 到 js/ 目录下面。在浏览器中打开 html 文件。

<!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>

这就是html文件的全部内容了。而以下的全部代码将会被放在<script>标签中。

Creating the scene

想要用three.js显示一个物体，需要三个东西：scene，camera，renderer，即用camera来观察render在scene中的物体。

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 );

接下来花点时间来了解发生了什么。我们已经创建好了scene，camera，renderer。three.js中几种不同的camera，在这里使用的是PerspectiveCamera 。

PerspectiveCamera(fov, ar, near, far)

第一个参数：field of view，视野。
第二个参数：aspect ratio，长宽比。我们总是希望使用元素的宽度除以高度，否则获得的结果是图像看起来很干燥，跟在宽屏电视机上播放旧电影时一样。
第三个参数：near，近的剪裁平面。
第四个参数：far，远的剪裁平面。near和far代表的意思是在这两者范围之外的地方，物体将不会被渲染。我们现在不用考虑这件事情，但是以后也许你需要选取不同的值，以便提高应用的性能。

接下来是renderer，它就是魔法发生的地方。除了这儿上面代码中使用到的WebGLRenderer，three.js还有其他的renderer。其他版本是由于浏览器不支持webGL而导致的回退版本。

此外，我们还需要给renderer实例设置大小。比较好的做法是，把放置区域的大小赋值给render。在这个例子中，我们给其设置的是浏览器窗口的宽和高。对于性能要求比较高的应用，我们设置可以设置为window.innerWidth/2 和 window.innerHeight/2，使app render的大小只有一半。

如果你希望保持应用的大小，但是以较低的分辨率呈现，那么你可以通过将setSize的第三个参数设置为false来实现。例如，setSize(window.innerWidth/2, window.innerHeight/2, false) 将以半分辨率来渲染应用，而canvas将具有100%的宽度和高度。

最后一步，将renderer 元素加入到 HTML document中。renderer使用canvas来展示scene。

“一切都已准备好，但是你承诺的立方体在哪儿？”好吧，我们现在就来加上。

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;

为了创建一个cube，我们需要一个BoxGeometry。这是一个包含了几何体所有点、面的对象。在未来我们会仔细探讨他。

除了需要一个geometry，我们需要material来给cube上色。Three.js中有很多的material，但是我们现在仍坚持用MeshBasicMaterial。所有的material接受一个属性对象并使用它。为了使事情变得简单，我们只提供了颜色0x00ff00（16进制），也就是绿色。颜色产生的效果跟在css或者是photoshop中一样。

我们需要做的第三件事使Mesh。Mesh是一个对象，它接受geometry和material并将material作用于geometry。然后就可以将它放在scene中，并且可以自由移动。

当我们调用scene.add()时，默认情况，物体将被放在坐标(0,0,0)处。这会导致立方体和相机重叠在一起，为了避免这种情况，我们将相机的挪动了一个位置。

Rendering the scene

如果你已经拷贝了我们之前写的代码，你会发现并没有什么效果。这是因为我们事实上并没有渲染任何东西在页面上。所以，我们需要调用render或者animate loop。

function animate () {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

这会创建一个循环，这个循环使renderer每秒绘画60次。如果你是第一次在浏览器中写游戏，你可能会说“为什么我们不创建一个setInterval？”是的，可以使用setInterval。但是requestAnimationFrame具有很多的优势。其中最重要的优势应该是当用户切换到另外的浏览器选项卡时，它会暂停，因此不会浪费宝贵的处理能力和电池寿命。

Animating the cube

如果你已经准备好了上面所说的一切，你就可以看到一个绿色的盒子了。我们来把它旋转起来。

将下面的代码添加到animat方法中。

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

上面的代码每一帧都会执行（每秒60次），会给cube一个漂亮的旋转动画。基本上，应用运行时要旋转或者是改变任何东西，都必须通过animate loop来实现。你当然可以调用其他功能，但是你将会用几百行的代码来实现动画功能。

The result

恭喜！你已经完成了你的第一个three.js应用。这很简单，但也是我们必须开始的地方。

完整代码如下，试着运行一下它，以便更好的理解它的工作原理。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My first three.js app</title>
  <script src="./js/three.js"></script>
  <style>
    body { margin: 0;}
    canvas { width: 100%;height: 100%; }
  </style>
</head>
<body>
  <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>