ใช้ตัวแก้ไขการแบ่งย่อย three.js โดยไม่เปลี่ยนรูปทรงภายนอกหรือไม่

ฉันกำลังพยายามใช้เรขาคณิตของ 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 ที่มีส่วนที่เพิ่มขึ้นจะใช้งานได้ แต่ฉันต้องการให้นำไปใช้กับรูปทรงเรขาคณิตต่างๆ


javascript three.js geometry
person jackrugile    schedule 05.06.2017    source แหล่งที่มา
comment
ในโค้ด SubdivisionModifier จะใช้จุดยอดและน้ำหนักขอบเพื่อวางตำแหน่งจุดยอดของส่วนย่อยใหม่ ฉันไม่มีเวลามาคำนวนว่าเกิดอะไรขึ้น แต่ถ้าคุณสามารถแก้ไข/แทนที่ตรรกะการวางตำแหน่งเพื่อวางจุดยอดใหม่ตามขอบเดิมได้ รูปทรงของคุณควรคงรูปร่างไว้ในขณะที่ยังคงถูกแบ่งย่อยออกเป็นใบหน้าต่างๆ มากขึ้น .   -  person TheJim01    schedule 05.06.2017
comment
@ TheJim01 ขอบคุณ ฉันแก้ไขค่าเหล่านั้นมาบ้างแล้วและฉันคิดว่าฉันใกล้จะแก้ปัญหาได้แล้ว จะโพสต์คำตอบหากฉันพบวิธีแก้ปัญหาที่มั่นคง   -  person jackrugile    schedule 05.06.2017

คำตอบ (2)


arrow_upward
8
arrow_downward

ตามคำแนะนำในความคิดเห็นของ TheJim01 ฉันสามารถขุดผ่านแหล่งที่มาดั้งเดิมและแก้ไขน้ำหนักจุดยอด น้ำหนักขอบ และค่าเบต้าเพื่อรักษารูปร่างดั้งเดิมได้ การแก้ไขของฉันควรลบค่าเฉลี่ยใดๆ ออก และใส่น้ำหนักทั้งหมดไปที่รูปร่างของแหล่งที่มา

มีสามส่วนที่ต้องแก้ไข ดังนั้นฉันจึงดำเนินการต่อและทำให้มันเป็นตัวเลือกที่สามารถส่งผ่านไปยังตัวสร้างที่เรียกว่า retainShape ซึ่งมีค่าเริ่มต้นเป็นเท็จ

ฉันสร้างส่วนสำคัญด้วยโค้ดที่แก้ไขแล้วสำหรับ SubdivisionGeometry.js

ดู SubdivisionGeometry.js Gist ที่แก้ไขแล้ว

ด้านล่างนี้เป็นตัวอย่างของคิวบ์ที่ถูกแบ่งย่อยโดยปิดและเปิดตัวเลือก

ซ้าย: new THREE.SubdivisionModifier(2, false);

ขวา: new THREE.SubdivisionModifier(2, true);

ป้อนคำอธิบายรูปภาพที่นี่

หากใครพบปัญหาใดๆ เกี่ยวกับเรื่องนี้หรือมีคำถามใดๆ โปรดแจ้งให้เราทราบ!

person jackrugile    schedule 05.06.2017
comment
นี่มันเจ๋งจริงๆ คุณควรส่งการเปลี่ยนแปลงของคุณเพื่อเพิ่มประสิทธิภาพให้กับ THREE.SubdivisionModifier! :) github.com/mrdoob/three.js - person TheJim01; 06.06.2017
comment
สุดยอด! จะพยายามส่งสิ่งนั้นเร็วๆ นี้ สำหรับ THREE.BufferSubdivisionModifier เช่นกัน - person jackrugile; 06.06.2017
comment
หากมีการใช้ความหมายอย่างชาญฉลาด ใน Blender จะมีตัวเลือกให้ใช้ตัวแก้ไขการแบ่งย่อยในโหมดง่าย ๆ ซึ่งหลีกเลี่ยงการปรับเปลี่ยนรูปร่าง บางทีคุณอาจตั้งชื่อคุณสมบัติของคุณแบบง่าย ๆ ได้ เนื่องจากอาจมีเหตุผลที่เรียกอย่างนั้น - person Neil; 08.06.2017

arrow_upward
0
arrow_downward

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< /ก>

person Don Smith    schedule 15.03.2020
comment
นี่เป็นเรื่องจริง แต่ดูหมายเหตุท้ายคำถามของฉัน - person jackrugile; 17.03.2020