应用three.js细分修饰符而不改变外部几何？

Question

我正在尝试采用任何three.js几何并将其现有面细分为较小的面。 这基本上会给几何图形一个更高的“分辨率”。 Three.js 的示例中有一个细分修改器工具，它非常适合我想要做的事情，但它最终会改变和变形几何的原始形状。 我想保留原来的形状。

查看细分修改器示例

---

当前细分修饰符的行为示例：

我希望它如何表现的粗略示例：

---

细分修饰符的应用如下：

let originalGeometry = new THREE.BoxGeometry(1, 1, 1);
let subdivisionModifier = new THREE.SubdivisionModifier(3);
let subdividedGeometry = originalGeometry.clone();
subdivisionModifier.modify(subdividedGeometry);

我试图挖掘细分修饰符的来源，但我不确定如何修改它以获得所需的结果。

注意：细分应该能够应用于任何几何体。 我的预期结果示例可能会使具有增加段的three.js PlaneGeometry 看起来可行，但我需要将其应用于各种几何图形。

Answer 1

根据 TheJim01 评论中的建议，我能够挖掘原始来源并修改顶点权重、边权重和 beta 值以保留原始形状。 我的修改应该删除任何平均，并将所有权重放在源形状上。

有三个部分必须修改，所以我继续将其设置为一个选项，可以将其传递到名为retainShape的构造retainShape ，该构造函数默认为 false。

我用修改后的 SubdivisionGeometry.js 代码做了一个要点。

查看修改后的 SubdivisionGeometry.js Gist

---

下面是在关闭和打开该选项的情况下细分立方体的示例。

左： new THREE.SubdivisionModifier(2, false);

右： new THREE.SubdivisionModifier(2, true);

如果有人遇到任何问题或有任何疑问，请告诉我！

Answer 2

目前的three.js 版本有PlaneGeometry 的可选参数，用于指定宽度和高度的段数； 两者都默认为 1。在下面的示例中，我将 widthSegments 和 heightSegments 都设置为 128。这与使用 SubdivisionModifier 的效果类似。 事实上，SubdivisionModifier 会扭曲形状，但指定线段不会扭曲形状，对我来说效果更好。

var widthSegments = 128;
var heightSegments = 128;
var geometry = new THREE.PlaneGeometry(10, 10, widthSegments, heightSegments);
//    var geometry = new THREE.PlaneGeoemtry(10,10); // segments default to 1
//    var modifier = new THREE.SubdivisionModifier( 7 );
//    geometry = modifier.modify(geometry);

https://threejs.org/docs/#api/en/geometries/PlaneGeometry