three.js之geometry

这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」

几何体

在3D世界里，物体都是有网格构成的，而网格的组织规则是通过Geometry来定义。我们先了解一下webgl的几何体是如何绘制的，webgl的几何体是通过一些基础的图元去绘制的，那么我们首先要知道几何体它特有的顶点坐标话顶点信息，然后我们把这些顶点的信息传入顶点着色器当中，通过顶点着色器和片元着色器的处理，绘制到我们的页面上去，最后绘制出来一个立体的几何体。
three.js就是在webgl基础上进行封装的，它把我们常见的几何体给封装出来了，我们拿过来调用就好了，然后传入指定的参数就好了。接下来我们了解一下几何体的使用。

几何体的使用

立方几何体（BoxGeometry）

// 立方几何体
// 一般需传3个参数：宽度   高度  深度
var geometry = new THREE.BoxGeometry( 100, 100, 100);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00,wireframe: true } );
var cube = new THREE.Mesh( geometry, material );
group.add( cube );

圆形几何体（CircleGeometry）

// 圆形几何体
// 一般需传2个参数：圆形的半径   分段（三角面）的数量
var circleGeometry = new THREE.CircleGeometry( 50,32 );
var circle = new THREE.Mesh( circleGeometry, material );
circle.position.set(120,100,10);
group.add( circle );

圆锥几何体

// 圆锥几何体
//一般需传3个参数：圆锥底部的半径   圆锥的高度    圆锥侧面周围的分段数
var coneGeometry = new THREE.ConeGeometry( 50,50,32,1, );
var cone = new THREE.Mesh( coneGeometry, material );
cone.position.set(-150,-100,10);
group.add( cone );

圆柱几何体（CylinderGeometry）

// 圆柱几何体
//一般需传3个参数：圆柱的顶部半径  圆柱的底部半径    圆柱的高度   圆柱侧面周围的分段数
var cylinderGeometry = new THREE.CylinderGeometry( 50,50,50,32 );
var cylinder = new THREE.Mesh( cylinderGeometry, material );
cylinder.position.set(300,200,100);
group.add( cylinder );

十二面几何体（DodecahedronGeometry）

// 十二面几何体
//一般需传1个参数: 十二面体的半径
var dodecahedronGeometry = new THREE.DodecahedronGeometry( 50 );
var dodecahedron = new THREE.Mesh( dodecahedronGeometry, material );
dodecahedron.position.set(300,-100,-100);
group.add( dodecahedron );

全部代码

<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<canvas id="oCanvas"></canvas>
		<script src="three.js"></script>
		<script>
			var oCanvas = document.getElementById('oCanvas');
			//创建场景
			var scene = new THREE.Scene();
			// 创建相机
			var orgCamera = new THREE.OrthographicCamera( window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2,window.innerHeight / -2,100, 1000 );
			// 渲染器
			var renderer = new THREE.WebGLRenderer({
				canvas: oCanvas,
				antialias: true,// 是否执行抗锯齿
				alpha:true,// canvas是否透明
				premultipliedAlpha:false,// 是否有预乘透明度，默认开

			});
			renderer.setSize( window.innerWidth, window.innerHeight );
			// document.body.appendChild( renderer.domElement );
			// 创建组
			var group = new THREE.Group();
			// 创建几何体
			// 立方几何体
			var geometry = new THREE.BoxGeometry( 100, 100, 100);
			var material = new THREE.MeshBasicMaterial( { color: 0x00ff00,wireframe: true } );
			var cube = new THREE.Mesh( geometry, material );
			group.add( cube );
			// 圆形缓冲几何体
			var circleGeometry = new THREE.CircleGeometry( 50,32 );
			var circle = new THREE.Mesh( circleGeometry, material );
			circle.position.set(120,100,10);
			group.add( circle );
			// 圆锥几何体
			var coneGeometry = new THREE.ConeGeometry( 50,50,32, );
			var cone = new THREE.Mesh( coneGeometry, material );
			cone.position.set(-150,-100,10);
			group.add( cone );
			// 圆柱几何体
			var cylinderGeometry = new THREE.CylinderGeometry( 50,50,50,32 );
			var cylinder = new THREE.Mesh( cylinderGeometry, material );
			cylinder.position.set(300,200,100);
			group.add( cylinder );
			// 十二面几何体
			var dodecahedronGeometry = new THREE.DodecahedronGeometry( 50 );
			var dodecahedron = new THREE.Mesh( dodecahedronGeometry, material );
			dodecahedron.position.set(300,-100,-100);
			group.add( dodecahedron );

			scene.add( group );
			orgCamera.position.z = 700;

			var animate = function () {
				requestAnimationFrame( animate );
				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;
				circle.rotation.x += 0.01;
				circle.rotation.y += 0.01;
				cone.rotation.x += 0.01;
				cone.rotation.y += 0.01;
				cylinder.rotation.x += 0.01;
				cylinder.rotation.y += 0.01;
				dodecahedron.rotation.x += 0.01;
				dodecahedron.rotation.y += 0.01;
				renderer.render( scene, orgCamera );
			};

			animate();
		</script>
	</body>
</html>

three.js使用指南(4）