Three.JS学习 3：Threejs画网格

本文学习来源：
http://www.hewebgl.com/article/getarticle/57
http://www.cnblogs.com/mythou/p/3327046.html

右手直角坐标系

各轴之间的顺序要求符合右手法则,即以右手握住Z轴,让右手的四指从X轴的正向以90度的直角转向Y轴的正向,这时大拇指所指的方向就是Z轴的正向.这样的三个坐标轴构成的坐标系称为右手空间直角坐标系
Three.JS学习 3：Threejs画网格

右手坐标系

右手定则也决定三维空间中任一坐标轴的正旋转方向。要标注X、Y和Z轴的正轴方向，就将右手背对着屏幕放置，拇指即指向X轴的正方向。伸出食指和中指，如右图所示，食指指向Y轴的正方向，中指所指示的方向即是Z轴的正方向。要确定轴的正旋转方向，如下图所示，用右手的大拇指指向轴的正方向，弯曲手指。那么手指所指示的方向即是轴的正旋转方向。
Three.JS学习 3：Threejs画网格

Three.JS学习 3：Threejs画网格
左手坐标系与右手坐标系

Threejs使用的是右手坐标系，这是源于opengl默认情况下也是右手坐标系。

线条的深入理解

在Threejs中，一条线由点、材质、颜色组成。

点 THREE.Vector3

Threejs没有单独画点的函数，必须放到一个THREE.Geometry形状中，这个结构中包含一个数组vertices，这个vertices可以存放许多的点。
画线的过程：

画一个网络

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="js/three.min.js"></script>
<style type="text/css">
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);
 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() {
//1.在x轴上定义两个点p1 p2
var geometry = new THREE.Geometry();
 geometry.vertices.push(new THREE.Vector3(-500, 0, 0));
 geometry.vertices.push(new THREE.Vector3(500, 0, 0));
//2.主要在于这里的算法，从右、下角开始画
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; //转90度
 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>

运行效果：
Three.JS学习 3：Threejs画网格

秒客网