three3D地圖設置兩點之間的連線

時間 2019-12-14

標籤 three3d 地圖設置兩點 2點之間連線简体版

原文原文鏈接

點：能夠用THREE.Vector3D來表示css

如今來看看怎麼定義個點，假設有一個點x=4，y=8，z=9。你能夠這樣定義它：

var point1 = new THREE.Vecotr3(4,8,9);

另外你也可使用set方法，代碼以下：

var point1 = new THREE.Vector3();

point1.set(4,8,9);
一、首先，咱們聲明瞭一個幾何體geometry，以下：
var geometry = new THREE.Geometry();html

幾何體裏面有一個vertices變量，能夠用來存放點。canvas

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

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

Color：線條的顏色，用16進制來表示，默認的顏色是白色。dom

Linewidth：線條的寬度，默認時候1個單位寬度。htm

Linecap：線條兩端的外觀，默認是圓角端點，當線條較粗的時候纔看得出效果，若是線條很細，那麼你幾乎看不出效果了。對象

Linejoin：兩個線條的鏈接點處的外觀，默認是「round」，表示圓角。three

VertexColors：定義線條材質是否使用頂點顏色，這是一個boolean值。意思是，線條各部分的顏色會根據頂點的顏色來進行插值。ip

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

咱們這裏使用了頂點顏色vertexColors: THREE.VertexColors，就是線條的顏色會根據頂點來計算。

var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );

三、接下來，定義兩種顏色，分別表示線條兩個端點的顏色，以下所示：
var color1 = new THREE.Color( 0x444444 ),

color2 = new THREE.Color( 0xFF0000 );

四、定義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);

五、爲4中定義的2個頂點，設置不一樣的顏色，代碼以下所示：
geometry.colors.push( color1, color2 );

geometry中colors表示頂點的顏色，必須材質中vertexColors等於THREE.VertexColors 時，顏色纔有效，若是vertexColors等於THREE.NoColors時，顏色就沒有效果了。那麼就會去取材質中color的值，這個很重要，你們必定記住。

六、定義一條線
定義線條，使用THREE.Line類，代碼以下所示：

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

第一個參數是幾何體geometry，裏面包含了2個頂點和頂點的顏色。第二個參數是線條的材質，或者是線條的屬性，表示線條以哪一種方式取色。第三個參數是一組點的鏈接方式，咱們會在後面詳細講解。

而後，將這條線加入到場景中，代碼以下：

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。