threejs快速入门

场景

一个电影和动画由若干个片段组成，比如游戏中的一个地图副本，电影里面的一个连贯的动作，进入场景后动画开始播放，播放完成后循环播放或者进入下一个场景。与电影中的下一个场景原理一样

// 创建一个场景
var scene = new THREE.Scene();

相机

比如桌子上有一个橘子，使用你的手机摄像头实时预览拍照画面，相机的角度，远近可以影响拍照的内容。

// 相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建一个正交相机，一般用于2D
var camera  = new THREE.OrthographicCamera(-aspect * 5, aspect * 5, 5, -5, 0.1, 1000);

关于相机的三个重要参数： 角度，比如我们大部分游戏是45°角查看，长宽比比例，近景，远景

渲染器

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// 增加到页面
document.getElementById("canva").appendChild(renderer.domElement);

精灵

场景中的一切小部件，人，NPC，建筑等。

        // 骨架
        var box = new THREE.BoxGeometry(1, 1, 1);
        // 材质
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        // 网格蒙皮
        var cube = new THREE.Mesh(box, material);
        // 将立方体添加到场景
        scene.add(cube);

重申：所有的三维都遵循三要素,由网格，材质，贴图格，然后再渲染出来。因为我们这边是完全程序建模，所以多了一个几何体。

动画

动画实际上是改变元素的一系列属性是使只运动,requestAnimationFrame可以在窗口不活动的时候停止运行，setTimeout会一执行，比较耗电

       function animate() {

            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();

销毁对象

// 清空场景
    scene.traverse((obj) => {
      // console.log("dispose", obj);
      if (obj.geometry) {
        obj.geometry.dispose();
      }
      if (obj.material) {
        obj.material.dispose();
      }
      if (obj.texture) {
        obj.texture.dispose();
      }
      scene.remove(obj);
      obj.geometry = null;
      obj.material = null;
      obj.texture = null;
      obj = null;
    });