3D世界是由点组成的,两个点组成一条直线,而三个点就可以组成一个三角形,通过三角形就可以组成任意形状的物体,而这种组成的物体我们称为Mesh模型,接着Mesh模型加上纹理就组成了真实的3D世界。下面我们就逐一介绍。

零、坐标系

  在Three.js中,默认使用的就是右手坐标系,即将手掌伸开平行于X轴,然后屈掌使得四指平行于y轴,这时大拇指朝向与z轴相同就是右手坐标系,否则,就是左手坐标系。下面两张图的描述方法都是正确的。如下:

webgl之绘图要点-LMLPHP                       webgl之绘图要点-LMLPHP

  如上,Three.js中使用的就是右边的这个坐标系 - 右手坐标系。

一、点

  在3D世界中,在建立了坐标系之后,就会通过x、y、z三个分量确定空间中的一个点。Three.js中提供了THREE.Vector3()构造函数来创建一个点,我们在源码中搜索Vector3就可以找到此构造函数的定义,如下所示:

function Vector3( x, y, z ) {

        this.x = x || ;
this.y = y || ;
this.z = z || ; } Object.assign( Vector3.prototype, { isVector3: true, set: function ( x, y, z ) { this.x = x;
this.y = y;
this.z = z; return this; }, setScalar: function ( scalar ) { this.x = scalar;
this.y = scalar;
this.z = scalar; return this; }, setX: function ( x ) { this.x = x; return this; }, // ... 还有很多额外的方法

  即首先定义了一个构造函数,然后给这个构造函数添加原型,最后,在原型上定义了一系列的方法,于是,如果我们希望获取一个点,就可以通过下面的方式:

var point = new THREE.Vector3(, , );

  或者,利用实例的set方法,如下所示:

var point1 = new THREE.Vector3(, , );

  

二、线

  两点连接即可得到一条线。而如果要在WebGL中创建一条线,需要大致如下步骤:

        var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({VertexColors: true});
var p1 = new THREE.Vector3(, , -);
var p2 = new THREE.Vector3(, , );
geometry.vertices.push(p1);
geometry.vertices.push(p2);
var color1 = new THREE.Color(0x444444),
color2 = new THREE.Color(0xff00ff);
geometry.colors.push(color1, color2);
var line = new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(line);

  其中,我们首先创建一个Geometry(几何形状),点、线、面都是几何形状,所以画线,就要先定义一个几何形状,然后在通过THREE.LineBasicMaterial构造函数创建直线的材料,实际上,它接受一个配置对象,属性有Color(颜色)、LineWidth(宽度)、Linecap(线条两端外观)、Linejoin(两个线条连接点的外观)等等。接着,我们创建了两个点p1和p2,又push进入geometry中,vertices就是顶点的意思;然后又创建了两个颜色即两端点的颜色;再通过THREE.Line将geometry、material结合;最后添加到场景中即可。

  完整代码如下:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>three.js</title>
<style>
* {
margin: ;
padding: ;
}
</style>
<script src="./three.js"></script>
</head> <body>
<script>
var scene = new THREE.Scene(); var axes = new THREE.AxesHelper();
scene.add(axes); var camera = new THREE.PerspectiveCamera(, window.innerWidth / window.innerHeight, , );
camera.position.x = ;
camera.position.y = ;
camera.position.z = ;
camera.lookAt(scene.position); var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x111111);
renderer.setSize(window.innerWidth, window.innerHeight); var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({vertexColors: true});
var p1 = new THREE.Vector3(, , -);
var p2 = new THREE.Vector3(, , );
geometry.vertices.push(p1);
geometry.vertices.push(p2);
var color1 = new THREE.Color(0x444444),
color2 = new THREE.Color(0xff00ff);
geometry.colors.push(color1, color2);
var line = new THREE.Line(geometry, material, THREE.LineSegments);
scene.add(line); document.body.append(renderer.domElement);
renderer.render(scene, camera);
</script>
</body> </html>

  效果如下:

webgl之绘图要点-LMLPHP

 即其中的紫色的线就是我们创建的,而其他三个是坐标轴。

三、面

   这里,我们可以绘制一个坐标平面,其中横竖都是二十条线,在照相机的拍摄下,如下所示:

webgl之绘图要点-LMLPHP

  完整代码如下所示:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>three.js</title>
<style>
* {
margin: ;
padding: ;
}
</style>
<script src="./three.js"></script>
</head> <body>
<script>
var scene = new THREE.Scene(); var axes = new THREE.AxesHelper();
scene.add(axes); var camera = new THREE.PerspectiveCamera(, window.innerWidth / window.innerHeight, , );
camera.position.x = ;
camera.position.y = ;
camera.position.z = ;
camera.up.x = ; camera.lookAt(scene.position); var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);
renderer.setSize(window.innerWidth, window.innerHeight); var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({color:0x000000, opacity: 0.2});
var p1 = new THREE.Vector3(-, , );
var p2 = new THREE.Vector3(, , );
geometry.vertices.push(p1);
geometry.vertices.push(p2); for (var i = ; i <= ; i++) {
var line = new THREE.Line(geometry, material);
line.position.z = (i * ) - ;
scene.add(line); var line = new THREE.Line(geometry, material);
line.position.x = (i * ) - ;
line.rotation.y = * Math.PI / ;
scene.add(line); } document.body.append(renderer.domElement);
renderer.render(scene, camera);
</script>
</body> </html>

  这里就是通过循环来创建线条,保证封闭即可,通过旋转方向保证形成一个正方形。

  

  至此,我们就完成了点、线、面的绘制了。

05-16 23:08