Skip to content

Latest commit

 

History

History
146 lines (116 loc) · 3.8 KB

1.md

File metadata and controls

146 lines (116 loc) · 3.8 KB

创建一个场景

这一章的目标是给大家一个关于 three.js 的初步印象 我们通过创建一个带有正方体的场景开始 在最后有完整的代码可以参考

在开始之前

在你可以使用 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>

等下还要再 <script> 里面加代码。

创建一个场景

为了显示我们需要三个东西：

  • 场景 scene
  • 摄像机 camera
  • 渲染器 renderer
// 创建场景
var scene = new THREE.Scene();

// 创建摄像机 这里使用的是 PerspectiveCamera
// 第一个参数是 FOV(field of view) 视角
// 第二个参数是 aspect ratio 纵横比
// 后面两个参数是近面和远面 clipping plane
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 );

渲染场景

把上面的代码加入之后依旧是什么都看不到。 因为我们实际上还没有渲染任何东西，所以我们要使用一个渲染函数或者动画循环：

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

上面的函数会创建一个循环，每次屏幕刷新（一般一秒刷新 60 次）的时候就会重新渲染场景。

你可能会疑问为啥不用 setInterval，实际上我们可以这样做，但是 requestAnimationFrame 有更多优势，也许最重要的一点是，当用户导航到另一个浏览器选项卡时，它会暂停，因此不会浪费宝贵的处理能力和电池寿命。

让立方体动起来

加入上面的代码后你会看到一个立方体，现在我们来加一点动画：

cube.rotation.x+=0.01
cube.rotation.y+=0.01

上面的代码会使立方体旋转起来，基本上如果还要加入其他的动画效果都是在动画循环中添加。当然，可以从把具体操作封装成函数调用，这样就不会得到数百行的动画函数。

结果

这是你的第一个 three.js 应用，完整的代码如下，html 文件：

<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.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      };

      animate();
    </script>
  </body>
</html>