threejs快速入门

场景

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

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

相机

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

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

关于相机的三个重要参数： 角度，比如我们大部分游戏是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();