Threejs中Geometry的用法示例

最新推荐文章于 2025-03-06 15:35:05 发布

蓬蒿人

最新推荐文章于 2025-03-06 15:35:05 发布

阅读量1.1w

点赞数

分类专栏： Threejs

本文链接：https://blog.csdn.net/yb0022/article/details/103329939

版权

本文介绍了Threejs中Geometry的基本用法，包括如何绘制自定义顶点坐标的三角形，设置不同顶点颜色，以及为几何形状贴图。通过实例展示了如何添加顶点数据vertices、面数据faces以及面UV值，实现纹理贴图的效果。

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

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;