three.js几何体之车削缓冲几何体
<p>车削缓冲几何体 LatheGeometry 用来创建具有轴对称性的网格，比如花瓶，车削绕着Y轴进行旋转。构造器：</p><blockquote>LatheGeometry(points : Array, segments : Integer, phiStart : Float, phiLength : Float)</blockquote>
<p> 其中：</p>
<blockquote>
points — 一个Vector2对象数组。每个点的X坐标必须大于0。缺省时默认使用数组 [ , , ] 创建 Vector2 对象数组 构成一个简单的钻石形状<br>
segments — 要生成的车削几何体圆周分段的数量，默认值是 12<br>
phiStart — 以弧度表示的起始角度，默认值为 0<br>
phiLength — 车削部分的弧度（0-2PI）范围，2PI 将是一个完全闭合的、完整的车削几何体，小于2PI是部分的车削。默认值是2PI
</blockquote>
<p>以下代码使用默认的点数组结构但扩大一倍的方式创建 Vector2 对象数组，最终效果是一个线框化的钻石图案：</p>
<div id="hEdiv"><pre id="hEpre">
<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 = [, , ].map(item => new THREE.Vector2(item, item));
// 创建车削图形
var mesh = new THREE.Mesh(
new THREE.LatheGeometry(points), // 参数空则使用 [, , ] 构建的顶点数组
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>
</pre></div>
<blockquote><button id="btnPrev" name="btnPrev" type="button" value="prev">运行代码</button></blockquote>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
btnPrev.onclick = () => {
const value = hEpre.textContent + '<style>body {margin: 0; }</style>';
const previewWindow = window.open('', 'preview1', 'width=1200,height=768,top=100,left=100');
previewWindow.document.open();
previewWindow.document.write(value);
setTimeout(function() { previewWindow.document.title = "预览" }, 100);
previewWindow.document.close();
};
</script> 这个很神奇，只要给这么三个数字就可以了。这三个数字是平面的么{:4_204:} 钻石的高度方向是怎么定的，三个数字取大了，会不会让钻石更矮胖了{:4_173:} 钻石形状的看到了，还想象不出花瓶的样子是什么样的{:4_173:} 原来这就是车削缓冲几何体，上午看到介绍想说跟车床削木头似的。。
大不相同大不相同。。{:4_170:} 这个图形的最大特点是对称性。嗯，记下了{:4_204:} 其实也可以绘出3D曲线的，这个还是直线，制出来的跟个勾线钻石差不多。。
就是不知道能不能削出曲线来，应该也会好看。。{:4_173:} 花飞飞 发表于 2025-5-20 21:57
其实也可以绘出3D曲线的，这个还是直线，制出来的跟个勾线钻石差不多。。
就是不知道能不能削出曲线来，应 ...
这个看点数组的设计，记住，是二维数组：
[ , , , ... ]
其中，x 不能小于 0
有了点数组，还要实例化为 Vector2 对象数组，就是 map 那句（也可以是其它方式，map 方法简单）
最后，构建 LatheGeometry 时，使用实例化的数组对象变量做参数 马黑黑 发表于 2025-5-20 22:26
这个看点数组的设计，记住，是二维数组：
[ , , , ... ]
这个点数组很重要的么，
你说的这些我云里雾里，等我有时间边试边理解才可以{:4_170:} 看到了很漂亮的菱角形的金色线条旋转体。{:4_187:} 梦江南 发表于 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的啥啥啥其实完全是一样的
又是路径？想不到还有啥啥跟它相似{:4_173:} 马黑黑 发表于 2025-5-21 19:33
一系列的都可以做到，前提是，你的幼儿园大班的数学、几何基础要跟上，最好还配备高小的高等数学知识
{:4_173:}我知道能做到就行了。。怎么做就算了 花飞飞 发表于 2025-5-21 21:21
又是路径？想不到还有啥啥跟它相似
路径是描述图形的方式之一，尤其针对轮廓