在three.js中,3D幾何實體可以透過建立
Geometry
物件來實作。
Geometry
是由一系列的頂點、線、面和 UV 紋理座標組成的物件。透過組合這些基礎元素,可以建立出各種復雜的幾何實體。
以下是一個簡單的三角形的
Geometry
實作範例:
// 建立一個Geometry物件
var geometry = new THREE.Geometry();
// 添加三個頂點
geometry.vertices.push(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(10, 0, 0),
new THREE.Vector3(0, 10, 0)
);
// 添加三個面
geometry.faces.push(
new THREE.Face3(0, 1, 2)
);
// 建立一個Mesh物件,將Geometry作為參數傳入
var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0xff0000 }));
// 將Mesh物件添加到場景中
scene.add(mesh);
在這個範例中,首先建立了一個
Geometry
物件,並透過添加三個頂點和一個面,建立了一個三角形的幾何實體。然後,將
Geometry
物件作為參數,建立了一個
Mesh
物件,並將其添加到場景中。
使用這種方式,可以建立出各種復雜的幾何實體,從簡單的平面到復雜的曲面都可以實作。
此外,
Geometry
物件還提供了很多其他方法,可以用於進行變換、合並、剖分等操作,更加靈活地控制幾何實體的形狀和結構。
除了基本幾何體外,Three.js 中還提供了一些高級幾何物件,如復合幾何體(Compound),輪廓(Shape)、線段(Line)和曲線(Curve)等。這些物件可以更加靈活地控制場景中的幾何結構,讓三維場景更加豐富多彩。
例如,輪廓(Shape)物件可以用於建立二維圖形,然後透過ExtrudeGeometry或者LatheGeometry方法將其拉伸或旋轉成為三維幾何體。而線段(Line)和曲線(Curve)則可以用於建立各種不同形狀的線條,如二維或三維的直線、曲線、螺旋等。
下面是一個建立復合幾何體的範例,其中將多個基本幾何體透過Three.js提供的方法合並成一個復合幾何體:
// 建立幾何體
const geometry1 = new THREE.BoxGeometry(1, 1, 1);
const geometry2 = new THREE.SphereGeometry(0.5, 32, 32);
// 合並幾何體
const mergeGeometry = new THREE.Geometry();
mergeGeometry.merge(geometry1);
mergeGeometry.merge(geometry2);
// 建立材質
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
// 建立網格
const mesh = new THREE.Mesh(mergeGeometry, material);
scene.add(mesh);
在上面的範例中,我們首先建立了兩個基本幾何體:一個立方體和一個球體。然後透過THREE.Geometry.merge()方法將兩個幾何體合並成一個復合幾何體。最後將復合幾何體作為參數傳遞給THREE.Mesh物件,建立一個網格並添加到場景中。透過合並幾何體,我們可以方便地建立出更加復雜的幾何體。
總之,Three.js提供了豐富的幾何體類和方法,可以用於建立各種各樣的三維幾何體,為三維場景的構建提供了非常便利的工具。