WebGL2 ---點，線，面的學習（1）

時間 2019-11-19

標籤 webgl2 webgl 面的學習简体版

原文原文鏈接

3D世界的組成javascript

在計算機世界中，3D世界是由點組成，兩個點可以組成一條直線，三個不在一條直線上的點就可以組成一個三角形面，無數三角形css

面就可以組成各類形狀的物體；咱們一般稱這種網絡模型爲Mesh模型；html

一、點java

在三維空間中的某一個點能夠用一個座標點來表示。一個座標點有X,Y,Z三個份量構成；在three.js中，點能夠在右手座標系中表示；canvas

空間幾何中，點能夠用一個向量來表示；網絡

THREE.Vecotor3 = function(x,y,z){app

this.x = x || 0;框架

this.y = y || 0;dom

this.z = z || 0; //當z=null或undefined時，this.z = 0;編輯器

}

在上述函數中THREE是Three.js引擎中的一個全局變量；而Vector3是定義在THREE下面的一個類；

結合上面的函數該如何定義一個點呢？

第一種方法： var point1 = new THREE.Vectors3(4,8,9);

第二種方法： var point2 = new THREE.Vectors(); point2.set(4,8,9);

二、如何繪製一條線？

1）首先，咱們先聲明一個幾何體geometry,以下：

var geometry = new THREE.Geometry();//幾何體裏有有一個vertices變量，能夠用來存放點；

2）定義一種線條的材質，使用THREE.LineBasicMaterial類型來定義，它接受一個集合做爲參數，其原型以下：

LineBasicMaterial(parameters)

parameters是一個定義材質外觀的對象，它包含多個屬性來定義材質，這些屬性是：

Color: 線條的顏色，用16進制來表示，默認的顏色是白色；

LineWidth: 線條的寬度，默認是1個單位寬度；

LineCap :線條兩端的外觀，，默認是圓角端點，當線條較粗的時候才能看得出效果；

LineJoin: 兩個線條的鏈接點處的外觀，默認是「round」,表示圓角；

VertexColors：定義線條材質是否使用頂點顏色，這是一個布爾值；（線條各部分的顏色會根據頂點的顏色來進行插值）；

Fog：定義材質的顏色是否受全局霧效的影響；

3）接下來，定義兩種顏色，分別表示線條兩個端點的顏色；

var color1 = new THREE.Color( 0x444444 );

var color2 = new THREE.Color( 0xFF0000 );

4）定義2個頂點的位置，並放到geometry中。代碼以下：

var p1 = new THREE.Vector3( -100, 0 ,100 );

var p2 = new THREE.Vector3( 100,0,-100);

geometry.vertices.push(p1);

geometry.vertices.push(p2);

5) 爲4中定義的2個頂點，設置不一樣的顏色，代碼以下：

geometry.colors.push(color1,color2); //geometry中colors表示頂點的顏色，必須材質中vertexColors等於THREE.VertexColors時，

顏色值纔有效；若是vertexColors等於THREE.NOColors時，顏色就沒有效果了，而後就會去材質中color的值；

6）定義一條線

定義線條，使用THREE.Line類，代碼以下：

var line = new THREE.Line( geometry,material,THREE.LinePieces);

最後，將這條線條加入場景中，scene.add(line);

若是你們想練習一下，可使用編輯器敲下面代碼；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Three框架</title>
		<script src="js/Three.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() {

                var geometry = new THREE.Geometry();
                var material = new THREE.LineBasicMaterial( { vertexColors: true } );
                var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );

                // 線的材質能夠由2點的顏色決定
                var p1 = new THREE.Vector3( -100, 0, 100 );
                var p2 = new THREE.Vector3(  100, 0, -100 );
                geometry.vertices.push(p1);
                geometry.vertices.push(p2);
                geometry.colors.push( color1, color2 );

                var line = new THREE.Line( geometry, material, THREE.LinePieces );
                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.LinePieces已經再也不使用，更改成THREE.LineSegments；

還有敲代碼的時候必定要細心，若是出現問題能夠查看谷歌控制檯看報錯；