- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在研究不同类型的分割算法。
当我分割几何体时,未正确生成 UV,导致面没有 Material ,即我的网格中有孔。
这是一个link到我的练习。
(我需要更多声望才能发布图片..)
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 subdivision .我一直在根据找到的 Three.js 示例进行编码 here .
作为我研究的一部分,我编写了一个工作(几乎)的例子 Catmull-Clark分割
在面部上使用 Catmull-Clark 会产生三个新面孔(四边形)来代替源面孔。
由于 THREE.Face4 已被弃用,我选择简单地创建两个三角形 (Face3) 来代替每个四边形。我知道这很奇怪而且不是最优的,但尽量忽略它。
因此,将创建六个新面孔来代替源面孔。
一些面有 UV。在将 UV 映射到所有新创建的面时,我无法弄清楚哪里出了问题。
Here是 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 网站上研究不同的问题,但无济于事。无论如何,为花时间阅读、提供反馈和帮助而欢呼。
我希望我说得有道理。
声音,爸爸保佑。
最佳答案
在您的演示中,我可以从另一侧看到缺失的面孔。好像遇到了backface culling .
添加新面孔时,检查它的方向是否符合预期。在您的示例中,您拥有正确排序顶点所需的所有信息。
在更一般的情况下,您可以检查 dotProduct(crossProduct(B-A, C-A), suppedFaceNormal) > 0
。如果面的方向不正确,只需通过重新排列顶点 (ABC -> ACB) 来翻转它。
绘制三角形的两个边集material.side属性为 THREE.DoubleSide
。
看不到单一红色的 uv 生成问题。如果有 - 请在示例中以某种方式绘制 uvs 进行演示。
关于Three.js - 分割几何体时生成新的 faceVertexUvs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54426226/
我想计算一条线之间的交点: l := direction * x + origin for x e R or x e [0,R+) 和默认的 Boost 多边形。在文档中我只发现了与线段(固定起点和终
我有一个 blender 文件,我将其导出为 DAE/collada,然后使用 Xcode 将其转换为 Scenekit 的场景文件。我在使用场景文件中的几何体时遇到问题。 场景文件(“model.s
我正在开发一些用于生成 3D 模型的 webgl 软件,并且依赖于动态几何。我观察到了一些非常奇怪的行为,我已经能够在 this jsfiddle 中隔离这些行为。 . 似乎在将几何体实例添加到场景后
我们正在尝试构建“编辑 handle ”,允许用户通过在 8 个位置(4 个 Angular + 4 个边)之一拖动来调整(投影)平面的大小。这种调整大小应该只在拖动的方向上缩放/拉伸(stretch
我创建了一个渲染四边形的简单程序 初始化: Math::float3 vertices[4]; vertices[0] = Math::float3(-0.5f, 0.5f, -1.0f); vert
这里是定义我的简单 3D 几何体的点。 datN = {{{-0.47150460764747554`, 0.29559274991660417`, 0.010131794240974218`},
有没有办法在 3d 中定义形状 var x = 0, y = 0, z=0 ; var heartShape = 新三。 形状 (); heartShape.moveTo( x + 25, y + 2
我正在使用网络 worker 加载动画 3D 模型的 .json 文件。对于每个大数组(顶点、法线等),我将一个 Float32Array 缓冲区传输回 UI 线程。由于此类缓冲区是 transfer
我是一名优秀的程序员,十分优秀!