坐標系
Threejs使用的是右手坐標系，這源于opengl默認情況下，也是右手坐標系。
WebGL中的點線面
線條的深入理解
在Threejs中，一條線由點，材質和顏色組成。
點由THREE.Vector3表示，Threejs中沒有提供單獨畫點的函數，它必須被放到一個THREE.Geometry形狀中，這個結構中包含一個數組vertices，這個vertices就是存放無數的點（THREE.Vector3）的數組。這個表示可以如下圖所示：three.js向量
為了繪制一條直線，首先我們需要定義兩個點，如下代碼所示：
var p1 = new THREE.Vector3( -100, 0, 100 );
var p2 = new THREE.Vector3( 100, 0, -100 );
請大家思考一下，這兩個點在坐標系的什么位置，然后我們聲明一個THREE.Geometry，并把點加進入，代碼如下所示：
var geometry = new THREE.Geometry();
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.vertices的能夠使用push方法，是因為geometry.vertices是一個數組。這樣geometry 中就有了2個點了。
然后我們需要給線加一種材質，可以使用專為線準備的材質，THREE.LineBasicMaterial。
最終我們通過THREE.Line繪制了一條線，如下代碼所示:
var line = new THREE.Line( geometry, material, THREE.LinePieces );
ok，line就是我們要的線條了。
6、畫高中時深愛的坐標平面
我還深愛著高中時的那個坐標平面，它勾起了我關于前排同學的細細長發的回憶…
這個平面的效果如下所示：three.js畫坐標系
它橫豎分別繪制了20條線段，在攝像機的照射下，就形成了這般模樣。
完整代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網格線</title>
<script src="../three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 1000px;
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);
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() {
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
for ( var i = 0; i <= 20; i ++ ) {
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.z = ( i * 50 ) - 500;
scene.add( line );
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;//沿y軸旋轉90du
scene.add( line );
}
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
}
</script>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>
學習的資料和源碼我都共享到我的gitHub倉庫中去了,大家有興趣的可以去下載,歡迎foke,clone,加星星,也算是對我的一個鼓勵吧
three學習資料的github地址
或者復制鏈接地址到瀏覽器
https://github.com/kingder-c/LearnThree.js
里面除了源碼和筆記之外再document中還有我推薦的兩本教材的電子書,希望能幫助到大家
如果大家有更好的學習資料一歡迎提交的上面去供大家一起交流和學習,對大家發出的PR我一定及時接受
