threejs教程学习效果1.0

最新推荐文章于 2023-11-28 18:17:48 发布

无恃而安

最新推荐文章于 2023-11-28 18:17:48 发布

阅读量133

点赞数

分类专栏： threejs 文章标签： webgl canvas three.js

Lcc

本文链接：https://blog.csdn.net/weixin_50601484/article/details/118963617

版权

threejs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

three.js第二课

先看效果
在这里插入图片描述
相机使用的是正交摄像机OrthographicCamera
模型使用的是几何体Geometry，就那个看不懂的那个
再记录以下几何体Geometry 又学习了一些新的东东

var geometry = new THREE.Geometry(); //创建几何体模型
var list = [
	new THREE.Vector3(5, 0, 0),
	new THREE.Vector3(0, 5, 0),
	new THREE.Vector3(0, 0, 5),
	new THREE.Vector3(0, 0, 0),
	new THREE.Vector3(5, 5, 4),
	new THREE.Vector3(5, 4, 5),
	(new THREE.Vector3(4, 5, 5)
]
geometry .vertices = list//上一节说到 数组内几个元素就是几个顶点 顶点三个值分别为xyz坐标
var color1 = new THREE.Color(0xffff00);//颜色对象 下面有详解 
var color2 = new THREE.Color(0xff00ff);
var color3 = new THREE.Color(0x00ffff);//定义三种颜色
var face1 = new THREE.Face3(0, 1, 2);//三角面 三个角连起来 根据上面list点连起来才能是面
geometry.faces.push(face1);// 0，1，2是点的索引 也就是list数组的下标进行三个点连接起来才能是面 
var face2 = new THREE.Face3(1, 0, 4);
face2.vertexColors = [color2,color3,color1]//每个顶点设置颜色
geometry.faces.push(face2);
var face3 = new THREE.Face3(0, 2, 5);
face3.vertexColors = [color3,color1,color2]
geometry.faces.push(face3);
var face4 = new THREE.Face3(1, 2, 6);
face4.vertexColors = [color2,color1,color3]
geometry.faces.push(face4);
var face5 = new THREE.Face3(4, 5, 6);
face5.vertexColors = [color1,color2,color3]
geometry.faces.push(face5);
var face6 = new THREE.Face3(0, 4, 5);
face6.vertexColors = [color3,color1,color2]
geometry.faces.push(face6);
var face7 = new THREE.Face3(1, 4, 6);
face7.vertexColors = [color2,color1,color3]
geometry.faces.push(face7);
var face8 = new THREE.Face3(2, 5, 6);
face8.vertexColors = [color1,color2,color3]
geometry.faces.push(face8);
//一共设置了8个面 分别为底部一个 顶部一个 中间6个
//材质 使用的也是普通材质
var material = new THREE.MeshBasicMaterial({
	side: THREE.DoubleSide, //两面可见
	vertexColors: THREE.VertexColors, //以顶点颜色为准
//	color: 0xffff00,
	wireframe: true
});

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

	<head>
		<script type="text/javascript" src="../lib/three.js"></script>

		<script type="text/javascript">
			function init() {
				var renderer = new THREE.WebGLRenderer({
					canvas: document.getElementById('mainCanvas')
				});
				renderer.setClearColor(0x000000);
				var scene = new THREE.Scene();

				// camera
				var camera = new THREE.OrthographicCamera(-8, 8, 6, -6, 0.1, 100);
				camera.position.set(25, 25, 25);
				camera.lookAt(new THREE.Vector3(0, 0, 0));
				scene.add(camera);

				drawAxes(scene);
				var material = new THREE.MeshBasicMaterial({
					side: THREE.DoubleSide, //两面可见
					vertexColors: THREE.VertexColors, //以顶点颜色为准
					//					color: 0xffff00,
										wireframe: true
				});

				var geometry = new THREE.Geometry();
				geometry.vertices.push(new THREE.Vector3(5, 0, 0));
				geometry.vertices.push(new THREE.Vector3(0, 5, 0));
				geometry.vertices.push(new THREE.Vector3(0, 0, 5));
				geometry.vertices.push(new THREE.Vector3(0, 0, 0));
				geometry.vertices.push(new THREE.Vector3(5, 5, 4));
				geometry.vertices.push(new THREE.Vector3(5, 4, 5));
				geometry.vertices.push(new THREE.Vector3(4, 5, 5));
				var color1 = new THREE.Color(0xffff00);
				var color2 = new THREE.Color(0xff00ff);
				var color3 = new THREE.Color(0x00ffff);
				var face1 = new THREE.Face3(0, 1, 2);
				geometry.faces.push(face1);
				var face2 = new THREE.Face3(1, 0, 4);
				face2.vertexColors = [color2,color3,color1]
				geometry.faces.push(face2);
				var face3 = new THREE.Face3(0, 2, 5);
				face3.vertexColors = [color3,color1,color2]
				geometry.faces.push(face3);
				var face4 = new THREE.Face3(1, 2, 6);
				face4.vertexColors = [color2,color1,color3]
				geometry.faces.push(face4);
				var face5 = new THREE.Face3(4, 5, 6);
				face5.vertexColors = [color1,color2,color3]
				geometry.faces.push(face5);
				var face6 = new THREE.Face3(0, 4, 5);
				face6.vertexColors = [color3,color1,color2]
				geometry.faces.push(face6);
				var face7 = new THREE.Face3(1, 4, 6);
				face7.vertexColors = [color2,color1,color3]
				geometry.faces.push(face7);
				var face8 = new THREE.Face3(2, 5, 6);
				face8.vertexColors = [color1,color2,color3]
				geometry.faces.push(face8);
				var mesh = new THREE.Mesh(geometry, material);
				scene.add(mesh);
				// render
				renderer.render(scene, camera);
			}

			function drawAxes(scene) {
				// x-axis
				var xGeo = new THREE.Geometry();
				xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
				xGeo.vertices.push(new THREE.Vector3(10, 0, 0));
				var xMat = new THREE.LineBasicMaterial({
					color: 0xff0000
				});
				var xAxis = new THREE.Line(xGeo, xMat);
				scene.add(xAxis);

				// y-axis
				var yGeo = new THREE.Geometry();
				yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
				yGeo.vertices.push(new THREE.Vector3(0, 10, 0));
				var yMat = new THREE.LineBasicMaterial({
					color: 0x00ff00
				});
				var yAxis = new THREE.Line(yGeo, yMat);
				scene.add(yAxis);

				// z-axis
				var zGeo = new THREE.Geometry();
				zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
				zGeo.vertices.push(new THREE.Vector3(0, 0, 10));
				var zMat = new THREE.LineBasicMaterial({
					color: 0x00ccff
				});
				var zAxis = new THREE.Line(zGeo, zMat);
				scene.add(zAxis);
			}
		</script>
	</head>

	<body onload="init()">
		<canvas id="mainCanvas" width="800px" height="600px"></canvas>
	</body>

</html>

无恃而安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
threejs教程学习效果1.0

three.js第二课先看效果相机使用的是正交摄像机OrthographicCamera模型使用的是几何体Geometry，就那个看不懂的那个再记录以下几何体Geometry 又学习了一些新的东东var geometry = new THREE.Geometry(); //创建几何体模型var list = [ new THREE.Vector3(5, 0, 0), new THREE.Vector3(0, 5, 0), new THREE.Vector3(0, 0, 5), new
复制链接

扫一扫