應用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