Three.js绘制三角形网格平面

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>customGeometry : THREE.js</title>
<style>
body{
	font-family:Arial, Helvetica, sans-serif;
	background:#9F9F5F;
}
canvas{
	position:absolute;
	top:0;
	left:0;
}
</style>
<script src="../lib/Three_r49.js"></script>
<script>
window.addEventListener( 'DOMContentLoaded', function(){
	var width = window.innerWidth;
	var height = window.innerHeight;
	
	var scene = new THREE.Scene();
	
	var camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
	camera.position.set(-30, 20, -30);
	camera.lookAt( new THREE.Vector3(50,0,50) );
	scene.add( camera );
	
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( width, height );
	document.body.appendChild( renderer.domElement );
	
	var geom = new THREE.Geometry();
	
	createGeometry(geom, {w : 10, h : 10, squareWidth : 3})
		
	function createGeometry(geom, data){
		var index = 0;
		for(var i = 0; i < data.w; i++){
			for(var j = 0; j < data.h; j ++){
				createSquare(geom, index, {x : i * data.squareWidth, z : j * data.squareWidth}, data.squareWidth);
				index++;
			}
		}
	}
	
	function createSquare(geom, index, center, width){
		var square = [
			[-1,  1],[1,  1],[1, -1],[-1, -1]
		];
		square.push(square[0]);
		for(var i = 0; i < 4; i++){
			var v1 = new THREE.Vector3(0 + center.x, 0, 0 + center.z);
			var v2 = new THREE.Vector3(square[i][0] * width / 2 + center.x, 0, square[i][1] * width / 2 + center.z);
			var v3 = new THREE.Vector3(square[i+1][0] * width / 2 + center.x, 0, square[i+1][1] * width / 2 + center.z);
			//console.log(center.x)
			geom.vertices.push(v1);
			geom.vertices.push(v2);
			geom.vertices.push(v3);
			
			var face = new THREE.Face3( (i * 3) + (index * 12), (i * 3 + 1) + (index * 12), (i * 3 + 2) + (index * 12) );
			face.normal = (function (){
				var vx = (v1.y - v3.y) * (v2.z - v3.z) - (v1.z - v3.z) * (v2.y - v3.y);
				var vy = (v1.z - v3.z) * (v2.x - v3.x) - (v1.x - v3.x) * (v2.z - v3.z);
				var vz = (v1.x - v3.x) * (v2.y - v3.y) - (v1.y - v3.y) * (v2.x - v3.x);
				var va = Math.sqrt( Math.pow(vx,2) +Math.pow(vy,2)+Math.pow(vz,2));
				return new THREE.Vector3( vx/va, vy/va, vz/va);
			})();
			geom.faces.push( face );
		}
	}
	
	
	var mesh= new THREE.Mesh(
		geom,
		new THREE.MeshBasicMaterial( { color: 0x00FF00, shading: THREE.FlatShading, wireframe: true } )
	);
	scene.add(mesh);
	
	renderer.render( scene, camera );
}, false);
</script>
</head>
<body>

</body>
</html>

这是网上看的代码；看一下代码，

首先包含Three.js；

window.addEventListener( 'DOMContentLoaded', function(){...}

这句看上去是当DOM元素加载的时候执行，window应该是浏览器窗口；

获取浏览器窗口的宽和高；

定义场景scene；

定义摄像机，设置摄像机属性，把camera加入scene；

renderer是一个渲染对象，加入到浏览器的body；

定义一个几何对象geom；

THREE.Face3对象定义Geometry的三角形面:

Face3( a, b, c, normal, color, materialIndex )

a --- 顶点索引A。

b --- 顶点索引B。

c --- 顶点索引C。

normal --- 面法向量或顶点法向量数组。

color --- 面颜色或顶点颜色的数组。

materialIndex --- 材料索引。

创建一些三角形面加入到gemo；使用了THREE.Vector3类；

三角形面的材质使用了MeshBasicMaterial；

MeshBasicMaterial是基础网格材质，一个以简单着色（平面或线框）方式来绘制几何体的材质；这种材质不受光照的影响；

wireframe: true，如果为false看不到网格；