threejs - 3 - 场景刷新

:)

简介

刷新其实可以和动画联系起来，改变场景中的物体（改变位置），刷新界面。最后就可以形成动画。一般1秒钟需要刷新60次

定时器实现动画

可以用js的定时器来做1秒60次的刷新

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);

    var box = new THREE.Mesh(
        new THREE.BoxGeometry(2,2,2),
        new THREE.MeshBasicMaterial({
            color: 0xffff00,wireframe:true
        })
    );
    box.position.set(0,0,0); // 将立方体放到原点位置
    scene.add(box);

    camera.position.set(5,5,5);
    camera.lookAt(box.position);

    document.getElementById("content").appendChild(renderer.domElement);
    function run() {
        box.position.x += 0.005; //改变立方体的位置
        renderer.render(scene,camera);
    }
    setInterval(run,1.0/60);

可以看到立方体沿着 x 轴移动。但是这个也有些问题，就是不太准确。html5有一个更好的办法来刷新requestAnimationFrame

requestAnimationFrame实现刷新

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);

    var box = new THREE.Mesh(
        new THREE.BoxGeometry(2,2,2),
        new THREE.MeshBasicMaterial({
            color: 0xffff00,wireframe:true
        })
    );
    box.position.set(0,0,0); // 将立方体放到原点位置
    scene.add(box);

    camera.position.set(5,5,5);
    camera.lookAt(box.position);

    document.getElementById("content").appendChild(renderer.domElement);
    function run() {
        box.position.x += 0.005; //改变立方体的位置
        renderer.render(scene,camera);
        requestAnimationFrame(run);
    }
    // setInterval(run,1.0/60);
    run();

场景中物体的其他属性

除了可以改变位置，还可以改变旋转角度，和缩放比例

• 位置是 position
• 旋转角度是 rotation
• 缩放是 scale

    var step = 0.01;
    function run() {
        if(box.scale.x > 1.5){
            box.scale.x -= step;
        }else{
            box.scale.x += step;
        }
        box.rotation.set(
            box.rotation.x + step,
            box.rotation.y + step,
            box.rotation.z
        );
        box.rotation.z += step;
        renderer.render(scene,camera);
        requestAnimationFrame(run);
    }

threejs - 1 - 介绍&入门
threejs - 2 - 相机
threejs - 3 - 场景刷新
threejs - 4 - 物体
[threejs - 5 - 材质]
[threejs - 6 - 灯光]
[threejs - 7 - 相机进阶]
[threejs - 8 - 物体进阶]
[threejs - 9 - 粒子系统]
[threejs - 10 - 模型加载]
[threejs - 11 - GLSL]
[threejs - 12 - 着色器]

End