THREE.JS的右手座標系
右手大拇指指向X軸，食指指向Y軸，中指指向Z軸。
酷！
兩個知識點補充
知識點1：渲染器函數
renderer.render(scene, camera);
render( scene, camera, renderTarget, forceClear )；
| 參數變量 | 類型解釋 |
|---|---|
| scene | 渲染的場景對象 |
| camera | 需要相機視角 |
| renderTarget | 渲染目標 |
| forceClear | 清除畫布canvas對象 |
知識點2：循環渲染
function render()
{
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
重點：
requestAnimationFrame函數讓瀏覽器執行一次參數中的函數，回調render形成遊戲循環
繪製點、線、面
case1：繪製點
var point1=new THREE.Vector3(0,20,0);
var point2=new THREE.Vector3(20,0,0);
var point3=new THREE.Vector3(30,0,0);//三維向量
case2：繪製線
var geometry = new THREE.Geometry();
//材質
var materail = new THREE.LineBasicMaterial({vertexColors:true});//加上漸變色
var materail1 = new THREE.LineBasicMaterial({color:0x0000FF});//加上純色
var color1 = new THREE.Color(0x00FF00);//顏色裏面大小寫不敏感
var color2 = new THREE.Color(0xFF0000);
//定義的三個能構成三角形的點
var p1 = new THREE.Vector3(0,20,0);
var p2 = new THREE.Vector3(20,0,0);
var p3=new THREE.Vector3(30,0,0);
//連接點
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.vertices.push(p3);
geometry.vertices.push(p1);//回到起始點
geometry.colors.push(color1);
geometry.colors.push(color2);
geometry.colors.push(color1);
var line = new THREE.Line(geometry,materail,THREE.LineSegments);
scene.add(line);//添加到場景
case3：繪製面
var geometry = new THREE.Geometry();
var materail = new THREE.LineBasicMaterial({vertexColors:true});//加上漸變色
var materail1 = new THREE.LineBasicMaterial({color:0x0000FF});//加上純色
var color1 = new THREE.Color(0x00FF00);//顏色裏面大小寫不敏感，綠色
var color2 = new THREE.Color(0xFF0000);//紅色
var p1 = new THREE.Vector3(0,20,0);
var p2 = new THREE.Vector3(20,0,0);
var p3=new THREE.Vector3(30,0,0);
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.vertices.push(p3);
geometry.vertices.push(p1);//回到起始點
geometry.colors.push(color1);
geometry.colors.push(color2);
geometry.colors.push(color1);
//線
var line = new THREE.Line(geometry,materail,THREE.LineSegments);
scene.add(line);
//繪製面
mesh=new THREE.Mesh(geometry,materail);//點圍成的面
mesh.postion=new THREE.Vector3(0,0,0);//
scene.add(mesh);
監聽運行函數
html中body的onload 屬性在對象已加載時觸發。
- js
//開始入口
function threeStart() {
initThree(); // 初始化渲染器
initCamera(); // 照像機設置
initScene(); // 場景設置
initLight(); // 燈光設置
initObject(); // 幾何體（物體）設置
// render(); // 開始渲染
// animation_camera();//ok!
animation_model();
}
function start(){
if (WEBGL.isWebGLAvailable()) {
// Initiate function or other initializations here
threeStart();
} else {
var warning = WEBGL.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
}
}
- html
<body onload="start();">
<div id="container"></div>
<div id="canvas-frame"></div>
渲染重點：函數不斷遞歸，我理解爲回溯。
最後我還是喜歡藍色的深沉神祕，嘻嘻！
