運動起來的兩種方式
方式介紹
- 讓物體運動
- 讓錄影機運動
遊戲循環:
如果不進行遊戲循環進行重複的渲染即使物體運動了,我們看到的場景也不會發生改變
function animate(){
render();
requestAnimationFrame(animate);
}
stats.js可以用來監控three.js的運作狀态
使用方法:
var stats = new Stats();
stats.setMode( ); // 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:,}).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(, window.innerWidth / window.innerHeight, , ); // 透視相機
var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); //将這個domElement挂接在body下面，這樣渲染的結果就能夠在頁面中顯示了。
var geometry = new THREE.CubeGeometry(, , );
var material = new THREE.MeshBasicMaterial({
color:
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = ;
function render() {
requestAnimationFrame(render); //循環調用實作
cube.rotation.x += ;
cube.rotation.y += ;
cube.rotation.z+=;
cube.position.z+=;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
學習的資料和源碼我都共享到我的gitHub倉庫中去了,大家有興趣的可以去下載下傳,歡迎foke,clone,加星星,也算是對我的一個鼓勵吧
three學習資料的github位址
或者複制連結位址到浏覽器
https://github.com/kingder-c/LearnThree.js
裡面除了源碼和筆記之外再document中還有我推薦的兩本教材的電子書,希望能幫助到大家
如果大家有更好的學習資料一歡迎送出的上面去供大家一起交流和學習,對大家發出的PR我一定及時接受
![56 WebGL處理響應上下文丢失[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)