學習three.js的第一個程序---源碼解析
目標：創建一個正方體
實例代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>canvas { width: 100%; height: 100% }</style>
<script src="js/three.js"></script>
</head>
<body>
<script>
//創建一個場景
var scene = new THREE.Scene();
//創建一個相機
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);//(視眼角,縱橫比，相機允許物體的最近距離，相機允許物體的最遠距離）默認情況之下,相機的上方向爲Y軸,右方向爲X軸,向裏爲Z軸.
//實例化一個渲染器
var renderer = new THREE.WebGLRenderer();
//渲染範圍
renderer.setSize(window.innerWidth, window.innerHeight);
//把renderer加入到body中，render會創建一個canvas加入body中
document.body.appendChild(renderer.domElement);
//創建立方體
var geometry = new THREE.CubeGeometry(1,1,1);//寬、高、深度
//設置材質
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
//將幾何形狀插入網格，並應用材料
var cube = new THREE.Mesh(geometry, material);
//將立方體添加到場景中，默認座標爲(0,0,0)
scene.add(cube);
//移動相機的位置（避免相機和多維數據集重疊）
camera.position.z = 5;
//定義渲染
function render() {
//循環動畫
requestAnimationFrame(render);
//讓立方體旋轉
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
}
//開始渲染
render();
</script>
</body>
</html>
總結：在網頁中渲染物體的三個必要組件---場景（scene）、相機（camera）和渲染器（renderer）
