Three.JS學習 2：Threejs定義點和麵
阿新 • • 發佈：2019-01-29
執行Three.js開發指南demo
通常執行three.js需要有web伺服器，可以使用node或python的簡單http server。
git clone https://github.com/josdirksen/learning-threejs
ce learning-threejs
npm install -g http-server
http-server其中npm需要預告安裝node，並在專案資料夾下啟動http-server
在沒有WEB伺服器的情況下，使用Chrome瀏覽器檢視three.js專案：
chrome --disable-web-security搭建HTML框架
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../libs/three.js"></script>
<style>
body{margin:0;overflow:hidden;}
</style>
</head>
<body>
<div id="WebGL-output"> 3D 組成
2點組成直接
不在一條線上三點組成一個三角形面
許多三角形面組成各種形狀的物體。
這種網格模型叫做Mesh模型。
物體需要貼上紋理，組合展示成3D世界。
在Three.js定義一個點
先看點的定義：
THREE.Vector3 = function 定義一個點：
var point1=new THREE.Vector3(10,20,30);或者：
var point2=new THREE.Vector3();
point2.set(10,20,30);直線
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="js/three.min.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
<script>
var renderer,width,height;
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); //vertices屬性裡可以存放點物件
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>LineBasicMaterial(parameters)定義材質外觀，包含的屬性
- Color：線條的顏色，用16進位制來表示，預設的顏色是白色。
- Linewidth：線條的寬度，預設時候1個單位寬度。
- Linecap：線條兩端的外觀，預設是圓角端點，當線條較粗的時候才看得出效果，如果線條很細，那麼你幾乎看不出效果了。
- Linejoin：兩個線條的連線點處的外觀，預設是“round”，表示圓角。
- VertexColors：定義線條材質是否使用頂點顏色，這是一個boolean值。意思是，線條各部分的顏色會根據頂點的顏色來進行插值。
- Fog：定義材質的顏色是否受全域性霧效的影響。
顯示結果：
本系列文章部分內容來自於《Three.js開發指南 WebGL的JavaScript 3D庫第2版》