Mesh網面
Mesh類別繼承自Object3D類別。
我們知道兩點能夠定義直線,而三個點能夠定義一個三角形平面,多個平面則可定義出不同種類的多邊形,以多個平面建構物件的方式就稱為多邊形建模,建立出的物件我們稱之為Mesh(網面)或是網格。
以下以三角形平面為例:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="build/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 500;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) ); // vertex 0
geometry.vertices.push( new THREE.Vector3( 0, 200, 0 ) ); // vertex 1
geometry.vertices.push( new THREE.Vector3( 300, 200, 0 ) ); // vertex 2
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) ); // make a triangle
var mesh = new THREE.Mesh( geometry, material ); // create an object
scene.add( mesh ); // add object to the scene to make it visible
renderer.render( scene, camera );
</script>
</body>
</html>
其中:
var material = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) ); // vertex 0
geometry.vertices.push( new THREE.Vector3( 0, 200, 0 ) ); // vertex 1
geometry.vertices.push( new THREE.Vector3( 300, 200, 0 ) ); // vertex 2
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) ); // make a triangle
var mesh = new THREE.Mesh( geometry, material ); // create an object
scene.add( mesh ); // add object to the scene to make it visible
在上式中我們個別建立好材質和幾合體,以Mesh的建構式就能輕鬆建立好物件,而最後只要利用scene.add()
就能將建立好的物件加入到場景之中。