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帶來些幫助
新聞熱點
疑難解答
