使用three.js创建3D曲面

最新推荐文章于 2025-11-15 09:00:00 发布

原创最新推荐文章于 2025-11-15 09:00:00 发布 · 5.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#曲面 #three.js #3D

three.js 专栏收录该内容

1 篇文章

订阅专栏

1、使用PlaneGeometry创建平面几何体

	var width = 10, height = 6；
	var width_segments = 1, height_segments = 39; // 平面几何体长宽面分段数
	var plane = new THREE.PlaneGeometry(width, height, width_segments, height_segments); // 创建平面几何体

实际效果图

使用高度分段增加平面顶点，C4D绘制
2、修改平面几何体顶点队列的Z轴坐标值
未修改前Z轴坐标值为0

		/*
		* 用vertices属性获取顶点队列，然后遍历
		*  Z轴坐标值可根据需要自行修改计算函数
		*/
		var m, n;
		for(var i=0; i<plane1.vertices.length/2; i++) {
		    //plane1.vertices[2*i].z = Math.pow(2, i/10);
		    //plane1.vertices[2*i+1].z = Math.pow(2, i/10);
		    m = Math.abs(plane1.vertices[2*i].x) + Math.abs(plane1.vertices[2*i].y);
		    n = Math.abs(plane1.vertices[2*i+1].x) + Math.abs(plane1.vertices[2*i+1].y);
		    plane1.vertices[2*i].z = m/(i+1.5) ;
		    plane1.vertices[2*i+1].z = n/(i+1.5);
		}

在这里插入图片描述
3、创建mesh网格、添加材质

	var texture_plan = new THREE.TextureLoader().load('img/rect_3.png'); // 创建材质
	var mesh_plan = new THREE.Mesh(plane, new THREE.MeshLambertMaterial({ map:texture_plan, side: THREE.DoubleSide, transparent: true })); 
	scene.add(mesh_plan);

曲面效果图
注：为了展示效果，展示曲面进行坐标角度旋转