Three.js 是一款運行在瀏覽器中的3D 引擎，你可以用它創建各種三維場景，包括了攝影機、光影、材質等各種對象。你可以在它的主頁上看到許多精彩的演示。不過，這款引擎目前還處在比較不成熟的開發階段，其不夠豐富的API 以及匱乏的文檔增加了初學者的學習難度（尤其是文檔的匱乏）three.js的代碼託管在github上面。
http://github.com/mrdoob/three.js/
我們來看實例吧
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <script type="text/javascript" src="js/three.js" ></script> <style> div#canvas-frame{ border: none; cursor: pointer; width: 100%; height: 600px; background-color: #eeeeee; } </style> <script> var renderer; function initThree(){ width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeight; //渲染器決定渲染的結果和應該畫在頁面的元素什麼元素上面並且怎樣繪製。 renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(width,height); //domElement表示渲染器中的畫布，所有的渲染都畫在上邊document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF,1.0); } //相機透視相機var camera; function initCamera(){ camera = new THREE.PerspectiveCamera(45,width/height,1,10000); camera.position.x = 0; camera.position.y = 1000; camera.position.z = 0; camera.up.x = 0; camera.up.y = 0; camera.up.z = 1; camera.lookAt({ x : 0, y : 0, z : 0 }); } //場景var scene; function initScene(){ scene = new THREE.Scene(); } //燈光var light; function initLight(){ light = new THREE.DirectionalLight(0xFF0000, 1.0 , 0); light.position.set(100, 100, 200); scene.add(light); } //幾何體var cube; function initObject(){ //聲明的幾何體， 裡邊有個vertices參數可以用來存放點var geometry = new THREE.Geometry(); //LineBasicMaterial(parameters)//basic翻譯：基礎//Material翻譯：原料//Parameters:是一個定義材質外觀的對象，它包含多個屬性來定義材質，這些屬性是//翻譯：參數//Color:線條的顏色，用16進制來表示，默認的顏色是白色。 //Linewidth //Linecap:線條兩端的外觀，默認是圓角端點，當線條較粗的時候才看得出效果//cap翻譯：帽子//Linejoin:兩個線條的連接點處的外觀，默認是round 圓角//join翻譯：加入//VertexColors:定義線條材質是否使用頂點元素，這是一個boolean值。意思是線條各部分的顏色根據頂點的顏色來進行插值。 //vertex翻譯：頂點//Fog:定義材質的顏色是否受全局霧效的影響。 //翻譯：霧var material = new THREE.LineBasicMaterial({ vertexColors: true }); //定義兩種顏色分別是兩個端點的顏色var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 ); //線的材質可以由兩點的顏色決定var p1 = new THREE.Vector3(); var p2 = new THREE.Vector3(); p1.set(-100,0,100); p2.set(100,0,-100); geometry.vertices.push(p1); geometry.vertices.push(p2); geometry.colors.push(color1, color2); //定義線條這裡會傳進去三個參數//第一個是幾何體geometry，裡麵包含兩個頂點和頂點顏色//第二個是線條的材質//第三個是一組點的連接方式var line = new THREE.Line(geometry,material, THREE.LinePieces); //將線條添加到場景中scene.add(line); } function threeStart(){ initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene,camera); } </script> <body onload="threeStart()"> <div id="canvas-frame"></div> </body></html>希望本實例能給大家學習three.js帶來些幫助