<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="../static/three.js-master/build/three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
<script>
var renderer; // 渲染器
function initThree() {
renderer = new THREE.WebGLRenderer(); // 創建渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 設置長度和寬度
document.getElementById('canvas-frame').appendChild(renderer.domElement); // 添加到canvas-frame
renderer.setClearColor(0xFFFFFF, 1.0); // 設置背景色和透明度
}
var camera; // 攝像機
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000); // 創建攝像機
camera.position.x = 0; // 攝像機坐標
camera.position.y = 0;
camera.position.z = 1000;
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 0;
camera.lookAt(0, 0, 0);
}
var scene; // 場景
function initScene() {
scene = new THREE.Scene(); // 創建場景
}
var light; // 光
function initLight() {
light = new THREE.AmbientLight(0xFFFFFF); // 創建環境光源，不產生陰影
light.position.set(100, 100, 200);
scene.add(light);
light = new THREE.PointLight(0x00FF00); // 創建點光源，可以產生陰影
light.position.set(0, 0,300);
scene.add(light);
}
function initObject() {
var geometry = new THREE.CylinderGeometry( 100,150,400); // THREE.CylinderGeometry構造圓柱體
var material = new THREE.MeshLambertMaterial( { color:0xFFFF00} ); //THREE.MeshLambertMaterial高級材質，構造類似木頭、石頭等不光滑的表面
var mesh = new THREE.Mesh( geometry,material); // 網狀 Mesh的構造函數是這樣的：Mesh( geometry, material ) geometry是它的形狀，material是它的材質
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();
}
function animation()
{
//renderer.clear();
camera.position.x =camera.position.x +1; // 關鍵地方 沒調一次animation()方法，x就自加1，就會讓攝像機的位置改變，這樣看到的物體就動了
renderer.render(scene, camera); // 渲染
requestAnimationFrame(animation); // 循環調用animation()方法
}
</script>
</body>
</html>
物體運動還有一個關鍵點，就是要渲染物體運動的每一個過程，讓它顯示給觀眾。渲染的時候，我們調用的是渲染器的render() 函數。代碼如下：
renderer.render( scene, camera );
如果我們改變了物體的位置或者顏色之類的屬性，就必須重新調用render()函數，才能夠將新的場景繪制到瀏覽器中去。不然瀏覽器是不會自動刷新場景的。
如果不斷的改變物體的顏色，那么就需要不斷的繪制新的場景，所以我們最好的方式，是讓畫面執行一個循環，不斷的調用render來重繪，這個循環就是渲染循環，在游戲中，也叫游戲循環。
為了實現循環，我們需要javascript的一個特殊函數，這個函數是requestAnimationFrame。
調用requestAnimationFrame函數，傳遞一個callback參數，則在下一個動畫幀時，會調用callback這個函數。
function animation() { //renderer.clear(); camera.position.x =camera.position.x +1; // 關鍵地方 沒調一次animation()方法，x就自加1，就會讓攝像機的位置改變，這樣看到的物體就動了 renderer.render(scene, camera); // 渲染 requestAnimationFrame(animation); // 循環調用animation()方法 }
也就是不斷的執行render()函數。在render()函數中不斷的改變物體或者攝像機的位置，並渲染它們，就能夠實現動畫了。
附帶three.js代碼，點擊下載
攝像機不斷右移，所以物體相對不斷左移。