javascript - Apply three.js subdivision modifier without changing outer geometry? - Stack Overflow

admin管理员组

文章数量:1303412

I am trying to take any three.js geometry and subdivide its existing faces into smaller faces. This would essentially give the geometry a higher "resolution". There is a subdivision modifier tool in the examples of three.js that works great for what I'm trying to do, but it ends up changing and morphing the original shape of the geometry. I'd like to retain the original shape.

View the Subdivision Modifier Example

---

Example of how the current subdivision modifier behaves:

Rough example of how I'd like it to behave:

---

The subdivision modifier is applied like this:

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

I attempted to dig around the source of the subdivision modifier, but I wasn't sure how to modify it to get the desired result.

Note: The subdivision should be able to be applied to any geometry. My example of the desired result might make it seem that a three.js PlaneGeometry with increased segments would work, but I need this to be applied to a variety of geometries.

I am trying to take any three.js geometry and subdivide its existing faces into smaller faces. This would essentially give the geometry a higher "resolution". There is a subdivision modifier tool in the examples of three.js that works great for what I'm trying to do, but it ends up changing and morphing the original shape of the geometry. I'd like to retain the original shape.

View the Subdivision Modifier Example

---

Example of how the current subdivision modifier behaves:

Rough example of how I'd like it to behave:

---

The subdivision modifier is applied like this:

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

I attempted to dig around the source of the subdivision modifier, but I wasn't sure how to modify it to get the desired result.

Note: The subdivision should be able to be applied to any geometry. My example of the desired result might make it seem that a three.js PlaneGeometry with increased segments would work, but I need this to be applied to a variety of geometries.

• javascript
• three.js
• geometry

Share Improve this question Follow edited Jun 5, 2017 at 18:21 WestLangley 105k1111 gold badges287287 silver badges283283 bronze badges asked Jun 5, 2017 at 16:49 jackrugilejackrugile 1,6631616 silver badges2525 bronze badges 2

• 1 In the SubdivisionModifier code, it uses vertex and edge weights to position the new subdivision vertices. I don't have time to dig into the math of what's going on, but if you can modify/replace the positioning logic to place the new vertex along the original edge, then your geometries should retain their shape while still being subdivided into more faces. – TheJim01 Commented Jun 5, 2017 at 17:18
• @TheJim01 Thank you, I've been tinkering with those values a bit and I think I am close to a solution. Will post an answer if I find a solid solution. – jackrugile Commented Jun 5, 2017 at 19:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Based on the suggestions in the ments by TheJim01, I was able to dig through the original source and modify the vertex weight, edge weight, and beta values to retain the original shape. My modifications should remove any averaging, and put all the weight toward the source shape.

There were three sections that had to be modified, so I went ahead and made it an option that can be passed into the constructor called retainShape, which defaults to false.

I made a gist with the modified code for SubdivisionGeometry.js.

View the modified SubdivisionGeometry.js Gist

---

Below is an example of a cube being subdivided with the option turned off, and turned on.

Left: new THREE.SubdivisionModifier(2, false);

Right: new THREE.SubdivisionModifier(2, true);

If anyone runs into any issues with this or has any questions, let me know!

The current version of three.js has optional parameters for PlaneGeometry that specify the number of segments for the width and height; both default to 1. In the example below I set both widthSegments and heightSegments to 128. This has a similar effect as using SubdivisionModifier. In fact, SubdivisionModifier distorts the shape, but specifying the segments does not distort the shape and works better for me.

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/docs/#api/en/geometries/PlaneGeometry

本文标签： javascriptApply threejs subdivision modifier without changing outer geometryStack Overflow