three.js(3)：点、线、面（颜色插值，几何体三种渲染方式）

最新推荐文章于 2025-03-17 20:42:37 发布

Spider_man_

最新推荐文章于 2025-03-17 20:42:37 发布

阅读量4.5k

点赞数 2

分类专栏： WebGL

本文链接：https://blog.youkuaiyun.com/chengmo123/article/details/108206267

版权

本文介绍了使用three.js创建直线、点和三角面模型对象，详细讲解了颜色插值和几何体的三种渲染方式。通过实例展示了如何设置顶点、法向量和颜色数据，以及如何使用不同的构造函数实现点、线和面的渲染效果。同时提到了点模型在特定情况下的显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：http://www.yanhuangxueyuan.com/Three.js_course/face.html

直线模型对象

两个顶点确定一条直线，构造函数THREE.Vector3()可以用来创建一个顶点位置，下面代码中Vector3(10,0,0)表示三维笛卡尔坐标系中顶点坐标(10,0,0), vertices是几何体对象的顶点坐标属性，从Javascript语言的角度看vertices是数组对象，push()是Javascript语言支持的方法，用于给数组增加元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建点线面</title>
	</head>
	<body>
	</body>
	<script src="js/three.js"></script>
	<script src="js/OrbitControls.js"></script>
	<script>
		var scene = new THREE.Scene();
		
		//创建相机
		var width=window.innerWidth;
		var height=window.innerHeight;
		var k=width/height;
		var s=200;
		
		var camera=new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000);
		camera.position.set(200,300,200);
		camera.lookAt(scene.position);
		
		//创建光源
		//点光源
		var pointlight=new THREE.PointLight(0xFFB400);
		pointlight.position.set(200,300,200);
		scene.add(pointlight);
		//环境光
		var ambient=new THREE.AmbientLight(0x0000FF);
		scene.add(ambient)
		
		/**
		 * 创建线条对象
		 */
		var geometry = new THREE.Geometry();//声明一个空几何体对象
		var p1 = new THREE.Vector3(10,0,0);//顶点1坐标
		var p2 = new THREE.Vector3(0,20,0);//顶点2坐标
		geometry.vertices.push(p1,p2); //顶点坐标添加到geometry对象
		var material=new THREE.LineBasicMaterial({
			color:0x0000ff //线条颜色
		});//材质对象
		var line=new THREE.Line(geometry,material);//线条模型对象
		scene.add(line);//线条对象添加到场景中
		 			
		
		//渲染
		var renderer=new THREE.WebGLRenderer();
		renderer.setSize(wid

最低0.47元/天解锁文章