ThreeJs的学习：创建正方形平面

最新推荐文章于 2024-10-08 12:30:00 发布

太古时代

最新推荐文章于 2024-10-08 12:30:00 发布

阅读量4.5k

点赞数

分类专栏： Canvas与WebGL

本文链接：https://blog.csdn.net/jinold/article/details/92441348

版权

Canvas与WebGL 专栏收录该内容

20 篇文章 7 订阅

订阅专栏

本文详细介绍使用Three.js创建正方形平面的两种方法：通过Shape和BufferGeometry。首先，利用Shape定义正方形路径并生成几何体；其次，手动指定顶点坐标构建BufferGeometry。两种方式均配以具体代码示例，便于读者理解和实践。

摘要由CSDN通过智能技术生成

创建正方形平面：Shape

var squareShape = new THREE.Shape();
squareShape.moveTo( 0, 0 );
squareShape.lineTo( 0, sqLength );
squareShape.lineTo( sqLength, sqLength );
squareShape.lineTo( sqLength, 0 );
squareShape.lineTo( 0, 0 );

var geometry = new THREE.ShapeBufferGeometry( shape );
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial(  ) );

创建正方形平面：BufferGeometry 版本

var vertices = new Float32Array( [
		// 三角形1 - 三个顶点 
		-10 ,10, 0,
		-10 ,-10, 0,
		10 , -10, 0,
		// 三角形2 - 三个顶点 
		10 , -10, 0,
		10,  10, 0,
		-10 ,10, 0
] );
var geometry = new THREE.BufferGeometry();
//增加坐标点，坐标点是X,Y,Z的布局，可以自己任意设置
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
//材质
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var mesh = new THREE.Mesh( geometry, material );