应用three.js细分修改器而不更改外部几何体? [英] Apply three.js subdivision modifier without changing outer geometry?

查看:463
本文介绍了应用three.js细分修改器而不更改外部几何体?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用任何three.js几何体并将其现有面细分为更小的面。这基本上会使几何形状具有更高的分辨率。在three.js的例子中有一个细分修改器工具,它非常适合我正在尝试做的事情,但它最终会改变并变形几何体的原始形状。我想保留原始形状。





我喜欢它的表现的粗略例子:








细分修饰符的应用方式如下:

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

我试图挖掘



如果有人遇到任何问题或有任何疑问,请告诉我们!


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.

解决方案

Based on the suggestions in the comments 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!

这篇关于应用three.js细分修改器而不更改外部几何体?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆