5.讓場景動起來

時間 2019-11-26

標籤場景起來简体版

原文原文鏈接

運動起來的兩種方式

方式介紹

讓物體運動
讓攝像機運動

遊戲循環:
若是不進行遊戲循環進行重複的渲染即便物體運動了,咱們看到的場景也不會發生改變html

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

stats.js能夠用來監控three.js的運行狀態

使用方法:git

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漸變更畫包使用方法github

//首先進行初始化
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,加星星,也算是對個人一個鼓勵吧app

three學習資料的github地址
或者複製連接地址到瀏覽器
https://github.com/kingder-c/LearnThree.jsdom

裏面除了源碼和筆記以外再document中還有我推薦的兩本教材的電子書,但願能幫助到你們
若是你們有更好的學習資料一歡迎提交的上面去供你們一塊兒交流和學習,對你們發出的PR我必定及時接受學習

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。