本節從webgl中文網學習：http://www.hewebgl.com/article/getarticle/50
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>canvas {width: 100%;height: 100%}</style>
<script src="js/ThreeJS/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); //定義渲染器大小（窗口寬度，窗口高度）
/* renderer的domElement元素，表示畫布，所有的渲染都是畫在domElement上,appendChild表示
將這個domElement掛接在body下面，讓渲染的結果在頁面中顯示*/
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1, 1, 1); //定義幾何體（x,y,z）
var material = new THREE.MeshBasicMaterial({ color: 0xffff00f }); //定義基礎網格材質（{顏色}）
var cube = new THREE.Mesh(geometry, material); //定義mesh(幾何體，材質)
scene.add(cube); //加入場景
camera.position.z = 10; //設定位置，z軸距離
camera.position.x = 5;
//渲染，分爲離線渲染和實時渲染
function render() {
requestAnimationFrame(render); //執行一次，然後調用function render()，形成循環，實時渲染
//cube.rotation.x += 0.01; //rotation旋轉，沿着x軸，旋轉速度
cube.rotation.y += 0.01;
renderer.render(scene, camera); //執行渲染
}
render(); //執行渲染函數
</script>
</body>
</html>