three.js - Three.js - 细分几何时生成新的 faceVertexUvs
问题描述
概括
我目前正在研究不同类型的细分算法。
当我细分几何体时,无法正确生成 UV,导致面没有材料,即网格中的孔。
这是我的练习的链接。
(我需要更多的声誉来发布图片..)
https://raw.githubusercontent.com/larryzodiac/Generative-Jewellery/master/images/shape.png
https://raw.githubusercontent.com/larryzodiac/Generative-Jewellery/master/images/shape-gaps.png
Three.js 使用Loop 细分。我一直在根据此处找到的 Three.js 示例进行编码。
作为我研究的一部分,我编写了一个Catmull-Clark细分的工作(几乎)示例
问题
在一个面上使用 Catmull-Clark 会产生三个新的面(四边形)来代替源面。
由于不推荐使用 THREE.Face4,我选择简单地创建两个三角形(Face3)来代替每个四边形。我知道这很奇怪而且不是最优的,但尽量忽略它。
因此,将创建六个新面来代替源面。
一些面具有 UV。我不知道将 UV 映射到所有新创建的面时哪里出错了。
代码摘录
这是 Github 上练习代码的链接。
Catmull-Clark.js:
...
/*
Step 4
Redraw geometry
*/
// Throwing together all new/old vertices for the new geometry
const newVertices = vertexPoints.concat(edgePoints,facePoints);
const newFaces = [];
const newUVs = [];
let uv, x0, x1, x2; // Source triangle face points
let xe0 = new THREE.Vector2(); // Edge points (mid-points)
let xe1 = new THREE.Vector2();
let xe2 = new THREE.Vector2();
let xf = new THREE.Vector2(); // Face point of face (centre-ish)
// Loop through each face, create sudivided faces from found algorithm points
for (let i = 0; i < sourceFaces.length; i++) {
const face = sourceFaces[i];
const edgePoint1 = getEdgePoint(face.a, face.b, sourceEdges, edgePoints) + sourceVertices.length;
const edgePoint2 = getEdgePoint(face.b, face.c, sourceEdges, edgePoints) + sourceVertices.length;
const edgePoint3 = getEdgePoint(face.c, face.a, sourceEdges, edgePoints) + sourceVertices.length;
const facePoint = getFacePoint(face.a, face.b, face.c, sourceEdges, facePoints) + sourceVertices.length + edgePoints.length;
/*
Catmull for ARBITRARY shapes, all faces after the first iteration become quads.
THREE.Face4 has been depreciated in the new Three.js build
Solution will be to draw a quad using two triangles.
*/
createNewFace(newFaces, face.a, edgePoint1, edgePoint3, facePoint);
createNewFace(newFaces, face.b, edgePoint2, edgePoint1, facePoint);
createNewFace(newFaces, face.c, edgePoint3, edgePoint2, facePoint);
// create 4 new uv's
uv = sourceUvs[i];
x0 = uv[0];
x1 = uv[1];
x2 = uv[2];
// xe0.set(midpoint(x0.x, x1.x), midpoint(x0.y, x1.y));
// xe1.set(midpoint(x1.x, x2.x), midpoint(x1.y, x2.y));
// xe2.set(midpoint(x0.x, x2.x), midpoint(x0.y, x2.y));
// xf.set( ((x0.x + x1.x + x2.x)/3) , ((x0.y + x1.y + x2.y)/3) );
xe0.set(newVertices[edgePoint1].x, newVertices[edgePoint1].y);
xe1.set(newVertices[edgePoint2].x, newVertices[edgePoint2].y);
xe2.set(newVertices[edgePoint3].x, newVertices[edgePoint3].y);
xf.set(newVertices[facePoint].x, newVertices[facePoint].y);
createNewUv(newUVs, x0, xe0, xf);
createNewUv(newUVs, x0, xe2, xf);
createNewUv(newUVs, x1, xe0, xf);
createNewUv(newUVs, x1, xe1, xf);
createNewUv(newUVs, x2, xe1, xf);
createNewUv(newUVs, x2, xe2, xf);
}
geometry.vertices = newVertices;
geometry.faces = newFaces;
geometry.faceVertexUvs[0] = newUVs;
这是我的工作方式,请原谅糟糕的图表:
// ------------------------------------------------- //
// x0
// / \
// / \
// / \
// / \
// xe0 \ / xe2 // Creates three quads
// / \ xf / \
// / | \
// / | \
// / | \
// x1 - - - - - - xe1 - - - - - - x2
// ------------------------------------------------- //
// ------------------------------------------------- //
// x0
// / \
// / | \
// / | \
// / | \
// xe0 \ | / xe2 // Need to divide quads into two triangles
// / \ xf / \
// / / | \ \
// / / | \ \
// / / | \ \
// x1 - - - - - - xe1 - - - - - - x2
// ------------------------------------------------- //
结构查询函数.js:
// THREE.Face4 depreciated
// Need to draw two triangles to emulate quad
const createNewFace = (newFaces, a, b, c, d, materialIndex) => {
newFaces.push(new THREE.Face3(
a, b, d, undefined, undefined, materialIndex
));
newFaces.push(new THREE.Face3(
a, c, d, undefined, undefined, materialIndex
));
}
const createNewUv = (newUvs, a, b, c) => {
newUvs.push( [ a.clone(), b.clone(), c.clone() ] );
}
const midpoint = (a, b) => (Math.abs(b - a) / 2) + Math.min(a, b);
我是否错过或忽略了什么?我一直在 Stack 和 Three 网站上研究不同的问题,但无济于事。无论如何,为花时间阅读、提供反馈和帮助而欢呼。
我希望我说得通。
声音,爸爸保佑。
解决方案
在您的演示中,我可以从另一侧看到缺失的面孔。似乎你遇到了背面剔除。
添加新面时,请检查其方向是否符合预期。在您的示例中,您拥有正确排序顶点所需的所有信息。
在更一般的情况下,您可以检查dotProduct(crossProduct(B-A, C-A), supposedFaceNormal) > 0
. 如果面的方向不正确,只需通过重新排列顶点(ABC -> ACB)来翻转它。
要绘制两个三角形边,请将material.side属性设置为THREE.DoubleSide
。
看不到单一红色的 uv 生成问题。如果有 - 请在示例中以某种方式绘制的 uvs 进行演示。
推荐阅读
- java - 使用java流从另一个对象列表更新对象列表
- weblogic12c - WebLogic 12c 中的 org.springframework.aop.framework.AopConfigException 错误
- azure - 使用 WithExtraScopesToConsent 和 AcquireTokenSilent 对多个受众进行 Azure 身份验证
- c# - 将 dotnet-clear 工具与框架 dotnet core 3.1 一起使用时出现问题
- java - Java 正则表达式与多行字符串不匹配
- ruby-on-rails - 如何从 ruby on rails 上的现有远程 oracle 数据库中获取数据
- javascript - 触发按钮的动态反应钩子
- excel - 如何获得一个excel公式将一个范围解析为单个单元格
- ios - UITableView 中的 UIView 正在自动更改框架
- android - 获取数据存储路径