首頁 > 開發者 > JavaScript
使用three.js 畫漸層的直線，three.js漸層
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帶來些協助
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
