Geometry是其他很多XXXGeometry（如BoxGeometry、SphereGeometry）的基類，與之相對應的還有BufferGeometry，BufferGeometry是其他帶BufferGeomerty的基類， BufferGeomerty效率比Geometry高，但是Geometry使用相對簡單點，本文就說下Geometry的基本用法。
Geometry中有頂點位置和麪以及面UV等屬性，可以靈活控制物體的幾何形狀，但是使用也更復雜（相對於它的子類），下面使用Geometry畫一個最基本的形狀三角形。
1、繪製一個自定義頂點座標的三角形，顏色爲純紅色，繪製自定義形狀必須要有頂點數據vertices和麪數據faces。
<html>
<head>
<title>three.js geometry</title>
</head>
<body>
<script src="three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 90, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.z = 5;
drawmesh();
animate();
function drawmesh()
{
var vertices = [
new THREE.Vector3(-1.0, -1.0, 0.0),
new THREE.Vector3(1.0, -1.0, 0.0),
new THREE.Vector3(1.0, 1.0, 0.0)
];
var faces=[
new THREE.Face3( 0, 1, 2 )
];
var geometry = new THREE.Geometry();
geometry.vertices = vertices;
geometry.faces=faces;
var material = new THREE.MeshBasicMaterial( { color: 0xff0000} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
</script>
</body>
</html>
運行後的效果如下圖：
2、接下來將三角形的每個頂點顏色設置爲不同的值
這些顏色值屬性存在THREE.Face3（代碼中的face.vertexColors）中，類型爲包含3個顏色值的數組。要使用頂點顏色還得將material的vertexColors設置爲THREE.VertexColors，而且最終的顏色是頂點顏色和材質顏色color相乘的值，所以爲了看到頂點顏色將材質顏色改爲白色0xffffff（或者不設置也可以）
function drawmesh()
{
var vertices = [
new THREE.Vector3(-1.0, -1.0, 0.0),
new THREE.Vector3(1.0, -1.0, 0.0),
new THREE.Vector3(1.0, 1.0, 0.0)
];
var colors=[
new THREE.Color( 0xff0000 ),
new THREE.Color( 0x00ff00 ),
new THREE.Color( 0x0000ff )
];
var face = new THREE.Face3( 0, 1, 2);
face.vertexColors=colors;
var faces=[
face
];
var geometry = new THREE.Geometry();
geometry.vertices = vertices;
geometry.faces=faces;
var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
material.vertexColors=THREE.VertexColors;
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
3、在實際使用中更多的情況是在物體表面貼上紋理貼圖，接下來爲這個三角形貼上紋理
要正確使用貼圖必須要添加面的uv值，每個面有三個頂點，因此每個面也有三個uv值(參考代碼中的uvs)，下列的代碼將圖片的右下角貼到三角形上 。
function drawmesh()
{
var vertices = [
new THREE.Vector3(-1.0, -1.0, 0.0),
new THREE.Vector3(1.0, -1.0, 0.0),
new THREE.Vector3(1.0, 1.0, 0.0)
];
var face = new THREE.Face3( 0, 1, 2);
var faces=[
face
];
var uvs=[
[new THREE.Vector2(0.0, 0.0),new THREE.Vector2(1.0, 0.0),new THREE.Vector2(1.0, 1.0)]
];
var geometry = new THREE.Geometry();
geometry.vertices = vertices;
geometry.faces=faces;
geometry.faceVertexUvs[0] = uvs;
var texture = new THREE.TextureLoader().load( 'test.jpg' );
var material = new THREE.MeshBasicMaterial( {map:texture } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
如下圖所示，只能看到圖片的右下角（當然也可以通過修改面UV值顯示出圖片的不同部分）
如果設置的頂點顏色或者材質顏色，最終的顏色值也是這幾種顏色混合的結果，例如將上面的頂點顏色加上就得到了下面的結果
4、最後繪製兩個三角形面組成一個完整的四邊形，並且將圖片完整貼上。
function drawmesh()
{
var vertices = [
new THREE.Vector3(-1.0, -1.0, 0.0),
new THREE.Vector3(1.0, -1.0, 0.0),
new THREE.Vector3(1.0, 1.0, 0.0),
new THREE.Vector3(-1.0, 1.0, 0.0)
];
var faces=[
new THREE.Face3( 0, 1, 2),
new THREE.Face3( 0, 2, 3)
];
var uvs=[
[new THREE.Vector2(0.0, 0.0),new THREE.Vector2(1.0, 0.0),new THREE.Vector2(1.0, 1.0)],
[new THREE.Vector2(0.0, 0.0),new THREE.Vector2(1.0, 1.0),new THREE.Vector2(0.0, 1.0)],
];
var geometry = new THREE.Geometry();
geometry.vertices = vertices;
geometry.faces=faces;
geometry.faceVertexUvs[0] = uvs;
var texture = new THREE.TextureLoader().load( 'test.jpg' );
var material = new THREE.MeshBasicMaterial( {map:texture } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
