# three.js 点、线、坐标轴（02）

## 一、3D世界的组成

`网格模型`：也叫mesh模型，给物体贴上皮肤也叫纹理，那这个物体就活起来了。

## 二、在Threejs中定义一个点

### 2.1定义一个点

three.js中的内部定义：

``````THREE.Vector3 = function(x,y,z){
this.x = x || 0; //当x为Null或undefined时，this.x的值被赋值为0
this.y = y || 0;
this.z = z || 0;
};
``````

``````var point1 = new THREE.Vector3(2,3,4);
//第二种方法
var point1 = new THREE.Vector3();
point1.set(1,2,3);
``````

### 2.2 一个栗子—-画一条直线

``````<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画一条彩色的线</title>
<script src="three.js"></script>
<style> div #canvas{  border:none; cursor: pointer; width:100%; height:100%; background-color: grey; } </style>
<script> //封装渲染器 var renderer; function initThree(){  width = document.getElementById('canvas').clientWidth; height = document.getElementById('canvas').clientHeight; renderer = new THREE.WebGLRenderer({  antialias:true //使线条更圆润 }); renderer.setSize(width,height); document.getElementById('canvas').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.BufferGeometry(); //声明一个几何体 var material = new THREE.LineBasicMaterial({ vertexColors:true}); //定义线条的材质 //定义两种颜色，分别表示线条两个端点的颜色 var color1 = new THREE.Color(0x444444),color2 = new THREE.Color(0xFF0000); //线的材质可以由两点的颜色决定 //定义两个顶点的位置，并放在几何体重 var p1 = new THREE.Vector3(-100,0,100); var p2 = new THREE.Vector3(100,0,-100); geometry.vertices.push(p1,p2); //geometry.vertices.push(p2); geometry.colors.push(color1,color2); //为物体添加颜色 //定义一条线 var line = new THREE.Line(geometry,material,THREE.LineSegments); scene.add(line); } //调用所有的函数 function threestart(){  initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene,camera); } </script>
<div id="canvas"></div>
</body>
</html>
``````

## 三、几何体THREE.Geometry()

• `this.vertices = [];`
• 颜色`this.colors = [];`
• `this.faces = []`

``````var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-100,100,0),
new THREE.Vector3(100,-100,0),
new THREE.Vector3(100.-100,0)
);
``````

## 四、线条的材质THREE.LineBasicMaterial

``````LineBasicMaterial(parameters)

THREE.LineBasicMaterial = function(parameters)
``````

parameters是一个定义材质外观的对象，它包含多个属性来定义材质：

• `Color`：线条的颜色，用16进制来表示，默认的颜色是白色。
• `Linewidth`：线条的宽度，默认是1个单位宽度。（注：普通的renderer渲染器是不支持改变宽度的，只有CanvasRenderer才支持改变宽度）
• `Linecap`：线条两端的外观，默认是圆角端点，当线条较粗的时候才看的初效果，如果线条很细，那么几乎看不出效果了。
• `Linejoin`：两条线条的连接点处的外观，默认是“round”，表示圆角。
• `VertexColors`：定义线条材质是否使用顶点颜色，这是一个Boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值
• `Fog`：定义材质的颜色是否受全局雾效的影响。

## 五、关于坐标系

• `关于围绕某个轴旋转`：拇指指向旋转轴的正方向，四指弯曲的方向为旋转的正方向。
``````cube.rotation.y -= 0.01;  //弧度
``````

### 5.1 世界坐标和本地坐标

`世界坐标`：一个应用程序可能包含成百上千个单独的对象，我们必须把他们放到一个公共的场景里，这个公共的场景就叫做世界坐标。

• 相机默认在世界坐标的原点
• 3D屏幕中的所有物体都可以在该坐标系系统下移动和旋转
• 对于屏幕上所有的物体来说，这个坐标系是相同的，并且它不会改变
• 用户默认的观察视角是沿着Z轴的负半轴方向

`本地坐标`：物体的本身的坐标，即物体中心点。

### 5.2 AxesHelper三维坐标系

• 可以在场景中添加辅助坐标系帮助开发
• 可以使物体绕着本地坐标系旋转，而不绕世界坐标系旋转
• 用于简单模拟3个坐标轴的对象（红色代表x轴，绿色代表y轴，蓝色代表z轴）
``````var axeshelper = new THREE.AxesHelper(5);
axesHelper.rotation.y -=0.01; //围绕坐标轴旋转