threejs - 3 - 场景刷新

作者: 大批 | 来源:发表于2018-04-07 13:28 被阅读391次

threejs - 3 - 场景刷新
D3.js
场景
threejs场景雾化
02、添加材质、光源以及物体对象的阴影
ThreeJs 认识场景和雾
three.js
【ThreeJS】 02 - Scene 场景
Threejs 简介
Threejs之三大组件

:)

简介

刷新其实可以和动画联系起来，改变场景中的物体（改变位置），刷新界面。最后就可以形成动画。一般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);
    }

End