threejs四大組件：場景、幾何體、相機、渲染器。下圖爲第一個程序，詳解見註釋。
<!DOCTYPE html>
<html>
<head>
<title>第一個threejs</title>
<script src="three.js"></script>
</head>
<body>
</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);
//將渲染器加入頁面
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({color:0x00ff00});
//創建一個立方體，以及創建一個材質
var cube = new THREE.Mesh(geometry,material);
//將材質和立方體組合，得到一個cube
scene.add(cube);
//將幾何體加入場景
camera.position.z = 10;//近大遠小
//設置相機距離原點的距離，相機距離原點越小，那麼見到的原點處的幾何體越大
//相機距離原點的距離越大，幾何體越小
function render(){
requestAnimationFrame(render);
cube.rotation.y += 0.01;
cube.rotation.x += 0.01;
renderer.render(scene,camera);
}
//重複渲染，使幾何體旋轉
render();
</script>
</html>
上圖是相機距離原點爲10時見到的幾何體，理論上應該比距離爲1時小，實際也如此。
