three.js 中文文檔 5.繪製直線

5.繪製直線

標籤： three.js

好比你想繪製一條直線或者一個圓，而不是網格狀體。首先須要設置渲染器，場景和攝像機（參考第一節）

咱們須要以下代碼：

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));

var scene = new THREE.Scene();

下一步就是肯定材質。對於線條咱們必須用 LineBasicMaterail 或者 LineDashedMaterial（虛線）。

//建立一個藍色的線條基本材質
var material = new THREE.LineBasicMaterial({color:0x0000ff});

事後咱們須要有數個頂點的 Geometry（幾何體） 或BufferGeometry（緩衝幾何體），推薦BufferGeometry，它顯示更出色，爲了簡便，咱們在這裏用Geometry。

var geometry = new THREE.Geometry();
//Vector3 是三維矢量，參數理解爲爲x,y,z座標
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
geometry.vertices.push(new THREE.Vector3(10, 0, 0));

注意到線條是按照頂點座標連續鏈接起來的，而不包含起始點和結束點的那條線（線條不會閉合）

既然咱們有了兩條線段和一種材質，咱們能把他們
合在一塊兒造成一條軌跡線。

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

剩下的就是調用渲染器將它加入場景中

scene.add(line);
renderer.render(scene, camera);

你能看到由兩條藍色線條組成的向上箭頭。