實(shí)現(xiàn)一個(gè)簡單的3d場景需要包含下面幾個(gè)模塊：
- 容器
- 場景
- 攝像機(jī)
- 模型
- 渲染器
- 材質(zhì)
接下來就可以在這個(gè)模型的基礎(chǔ)上添加細(xì)節(jié)：材質(zhì)沟使、動畫等
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();//場景
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );//攝像機(jī)
var renderer = new THREE.WebGLRenderer();//渲染器
renderer.setSize( window.innerWidth, window.innerHeight );//渲染器高寬
document.body.appendChild( renderer.domElement );//添加渲染器到容器
var geometry = new THREE.BoxGeometry( 1, 1, 1 );//加載立方體模型
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );//創(chuàng)建材質(zhì)
var cube = new THREE.Mesh( geometry, material );//創(chuàng)建網(wǎng)格挥萌，用來包含模型和材質(zhì)
scene.add( cube );//場景中放入網(wǎng)格對象
camera.position.z = 5;//相機(jī)位置
var animate = function () {
requestAnimationFrame( animate );//相當(dāng)于setInterval，比后者更節(jié)省瀏覽器性能炕横，離開頁面時(shí)，動畫暫停，再次進(jìn)入頁面菌瘪，動畫繼續(xù)
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );//最后將相機(jī)和場景通過渲染器渲染出來
};
animate();
</script>
</body>
</html>
