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 );
}
