three.js几何体之车削缓冲几何体

马黑黑

车削缓冲几何体 LatheGeometry 用来创建具有轴对称性的网格，比如花瓶，车削绕着Y轴进行旋转。构造器：

LatheGeometry(points : Array, segments : Integer, phiStart : Float, phiLength : Float)

其中：

points — 一个Vector2对象数组。每个点的X坐标必须大于0。缺省时默认使用数组 [ [0,-0.5], [0.5,0], [0,0.5] ] 创建 Vector2 对象数组 构成一个简单的钻石形状
segments — 要生成的车削几何体圆周分段的数量，默认值是 12
phiStart — 以弧度表示的起始角度，默认值为 0
phiLength — 车削部分的弧度（0-2PI）范围，2PI 将是一个完全闭合的、完整的车削几何体，小于2PI是部分的车削。默认值是2PI

以下代码使用默认的点数组结构但扩大一倍的方式创建 Vector2 对象数组，最终效果是一个线框化的钻石图案：

<div style="position: absolute; color: #eee; margin: 10px;">点击页面可暂停/继续动画</div>
<script type="module">
	import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';

	var scene = new THREE.Scene;
	var clock = new THREE.Clock();
	var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 0, 5);
	var renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	// 定义 Vector2 对象数组 ：默认数组结构，加大一倍
	var points = [[0,-1], [1,0], [0,1]].map(item => new THREE.Vector2(item[0], item[1]));
	// 创建车削图形
	var mesh = new THREE.Mesh(
		new THREE.LatheGeometry(points), // 参数空则使用 [[0,-0.5], [0.5,0], [0,0.5]] 构建的顶点数组
		new THREE.MeshBasicMaterial({ color: 0xde7070, wireframe: true })
	);
	mesh.rotateX(-0.1); // 图像在X轴上略微倾斜
	scene.add(mesh);

	var animate = () => {
		requestAnimationFrame(animate);
		var delta = clock.getDelta();
		mesh.rotation.y -= delta / 5;
		renderer.render(scene, camera);
	};

	document.onclick = () => clock.running ? clock.stop() : clock.start();

	window.onresize = () => {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
	}

	animate();
</script>

运行代码

红影

这个很神奇，只要给这么三个数字就可以了。这三个数字是平面的么

红影

钻石的高度方向是怎么定的，三个数字取大了，会不会让钻石更矮胖了

红影

钻石形状的看到了，还想象不出花瓶的样子是什么样的

花飞飞

原来这就是车削缓冲几何体，上午看到介绍想说跟车床削木头似的。。
大不相同大不相同。。

红影

这个图形的最大特点是对称性。嗯，记下了

花飞飞

其实也可以绘出3D曲线的，这个还是直线，制出来的跟个勾线钻石差不多。。
就是不知道能不能削出曲线来，应该也会好看。。

马黑黑

花飞飞 发表于 2025-5-20 21:57
其实也可以绘出3D曲线的，这个还是直线，制出来的跟个勾线钻石差不多。。
就是不知道能不能削出曲线来，应 ...

这个看点数组的设计，记住，是二维数组：

[ [x,y], [x,y], [x,y], ... ]

其中，x 不能小于 0

有了点数组，还要实例化为 Vector2 对象数组，就是 map 那句（也可以是其它方式，map 方法简单）

最后，构建 LatheGeometry 时，使用实例化的数组对象变量做参数

花飞飞

马黑黑 发表于 2025-5-20 22:26
这个看点数组的设计，记住，是二维数组：

[ [x,y], [x,y], [x,y], ... ]

这个点数组很重要的么，
你说的这些我云里雾里，等我有时间边试边理解才可以

梦江南

看到了很漂亮的菱角形的金色线条旋转体。

马黑黑

梦江南 发表于 2025-5-21 12:09
看到了很漂亮的菱角形的金色线条旋转体。

这是效果，代码实现的原理才是重要的。当然，如果基础跟不上，看看也行

马黑黑

花飞飞 发表于 2025-5-20 22:41
这个点数组很重要的么，
你说的这些我云里雾里，等我有时间边试边理解才可以

这个，本质上和ps的啥啥啥其实完全是一样的

马黑黑

红影 发表于 2025-5-20 21:56
这个图形的最大特点是对称性。嗯，记下了

对称是一种美，不对称也美

马黑黑

红影 发表于 2025-5-20 21:55
钻石形状的看到了，还想象不出花瓶的样子是什么样的

你得构建顶点

马黑黑

花飞飞 发表于 2025-5-20 21:57
其实也可以绘出3D曲线的，这个还是直线，制出来的跟个勾线钻石差不多。。
就是不知道能不能削出曲线来，应 ...

一系列的都可以做到，前提是，你的幼儿园大班的数学、几何基础要跟上，最好还配备高小的高等数学知识

马黑黑

红影 发表于 2025-5-20 21:53
钻石的高度方向是怎么定的，三个数字取大了，会不会让钻石更矮胖了

这个，一看参数说明，二自己尝试

马黑黑

红影 发表于 2025-5-20 21:51
这个很神奇，只要给这么三个数字就可以了。这三个数字是平面的么

这是点、线、面、体原理。屏幕总是2d的，通过技术手段让你看到3d效果，而所有技术，都离不开点线面体基本原理

花飞飞

马黑黑 发表于 2025-5-21 19:30
这个，本质上和ps的啥啥啥其实完全是一样的

又是路径？想不到还有啥啥跟它相似

花飞飞

马黑黑 发表于 2025-5-21 19:33
一系列的都可以做到，前提是，你的幼儿园大班的数学、几何基础要跟上，最好还配备高小的高等数学知识

我知道能做到就行了。。怎么做就算了

马黑黑

花飞飞 发表于 2025-5-21 21:21
又是路径？想不到还有啥啥跟它相似

路径是描述图形的方式之一，尤其针对轮廓