5.让场景动起来

运动起来的两种方式

方式介绍

让物体运动
让摄像机运动

游戏循环:
如果不进行游戏循环进行重复的渲染即使物体运动了,我们看到的场景也不会发生改变

function animate(){
    render();
    requestAnimationFrame(animate);
}

stats.js可以用来监控three.js的运行状态

states.js

使用方法:

var stats = new Stats();
stats.setMode( 1 ); // 0: fps, 1: ms, 2: mb

stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';

document.body.appendChild( stats.domElement );

var update = function () {

    stats.begin();

    // monitored code goes here

    stats.end();

    requestAnimationFrame( update );

};
requestAnimationFrame( update );

Tween渐变动画包使用方法

//首先进行初始化
function initTween(){
    new TWEEN.Tween(camera.position).to({x:400,3000}).repeat(Infinity).start();
}

//在游戏循环中进行update
TWEEN.updata();

一个示例程序

绿色旋转小方块源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋转的正方体</title>
    <script src="three.js"></script>
</head>

<body>
    <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); //将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。


        var geometry = new THREE.CubeGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({
            color: 0x00ff00
        });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        camera.position.z = 5;

        function render() {
            requestAnimationFrame(render); //循环调用实现
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            cube.rotation.z+=0.1;
            cube.position.z+=0.01;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>

</html>

学习的资料和源码我都共享到我的gitHub仓库中去了,大家有兴趣的可以去下载,欢迎foke,clone,加星星,也算是对我的一个鼓励吧

three学习资料的github地址
或者复制链接地址到浏览器
https://github.com/kingder-c/LearnThree.js

里面除了源码和笔记之外再document中还有我推荐的两本教材的电子书,希望能帮助到大家
如果大家有更好的学习资料一欢迎提交的上面去供大家一起交流和学习,对大家发出的PR我一定及时接受