校对:soup
三.js meshes的多边形地貌:绘制显示的线框 以正角和正角代替三角对角。 。 。 .
3.j只知道三角形. material.wireframe = true 画出每个三角形的每一个边缘,所以一个四相网(重构字符,Tripo/Messy"quad"输出,Blender的任何出处)通过每个面相出现一对角. EdgesGeometry 无法修复它:在非平面四面体上,对角具有像真边缘一样的二面体角. 此软件包还原了多边形,只绘制了它们的周边.
两种方式:
| 来源 | 方法 | 准确性 |
|---|---|---|
| 二进制 FBX | 直接读取面额大小 PolygonVertexIndex,然后重新组合三角形 FBXLoader 发射. | 准确(文件有数据). |
glTF 为 FB_ngon_encoding | 解码扩展规定的风扇排序索引缓冲器(Nomad Scult and Assimpt write it). | 准确(顺序为数据). |
| GLB / OBJ / STL / 任何东西 | 重建带有 Blender 端口的四边形 三进制到四进制 (单位:千美元)bmo_join_triangles),四质量上最先合并. | 大约98%的原始边缘 在一个吵闹的回波网. |
输出为平面 PolygonMesh (组合位置+相相抵,布局相同Blender使用)和a BufferGeometry 准备 THREE.LineSegments。 。 。 .
安装
npm install @comfyorg/quad-wireframe-three three
使用量
GLB 或任何三角几何
import { LineBasicMaterial, LineSegments } from 'three'
import { createQuadWireframeGeometry } from '@comfyorg/quad-wireframe-three'
const wire = new LineSegments(
createQuadWireframeGeometry(mesh.geometry),
new LineBasicMaterial({ color: 0xffffff })
)
mesh.add(wire)
createQuadWireframeGeometry 焊接顶点,运行 Blender 三相向四相融合并返回多边形边缘。 调试或禁用合并 :
createQuadWireframeGeometry(geometry, { join: false }) // plain triangle edges
createQuadWireframeGeometry(geometry, {
join: {
faceAngleThreshold: (60 * Math.PI) / 180, // Blender "Max Face Angle", default 40°
shapeAngleThreshold: (60 * Math.PI) / 180, // Blender "Max Shape Angle", default 40°
topologyInfluence: 2 // Blender "Topology Influence" 0..2, default 1
}
})
FBX (精确的多边形)
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
import {
createQuadWireframeGeometry,
matchFbxPolygons,
readFbxPolygons
} from '@comfyorg/quad-wireframe-three'
const buffer = await (await fetch(url)).arrayBuffer()
const root = new FBXLoader().parse(buffer, '')
const polygons = readFbxPolygons(buffer)
root.traverse((child) => {
if (!(child as Mesh).isMesh) return
const mesh = child as Mesh
const faceSizes = matchFbxPolygons(polygons, mesh.geometry)
const wire = createQuadWireframeGeometry(mesh.geometry, { faceSizes })
mesh.add(new LineSegments(wire, material))
})
为什么一个单独的读者 而不是 FBXLoader: 加载器分析 PolygonVertexIndex不过 genFace 耳切每个多边形,只推出三角形顶点,所以平面顶点计数从不存储在输出的任何地方;以及它的顶点计数 BinaryParser 被解析的树是私有的单元(FBXLoader.js 仅出口 FBXLoader)),所以也没有钩子读取. readFbxPolygons 因此,它本身是一个小型的二进制FBX读取器(zlib数组通过 fflate,同一图书馆 FBXLoader 用于) Objects/Geometry/PolygonVertexIndex 并跳过纹理,动画和其他一切;它不解析ASCII FBX. matchFbxPolygons 以名称标注有 3.js 几何的相配记录 FBXLoader 复制到上面,返回到一个独特的三角点,然后返回 null 当它无法确定时——通过 faceSizes: null 和几何重建运行.
glTF 为 FB_ngon_encoding
glTF 本身没有多边形, 但草稿 FB_ngon_encoding 扩展按三角顺序编码它们:每个多边形都是以一个顶点为锚的扇形,相接的多边形从不共享锚地,所以多边形边界在任何地方都存在 triangle.vertex[0] 变化. GLTFLoader 保存索引顺序并记录国旗 mesh.userData.gltfExtensions数字 :
import { hasNgonEncoding, ngonEncodedFaceSizes } from '@comfyorg/quad-wireframe-three'
const faceSizes = hasNgonEncoding(mesh) ? ngonEncodedFaceSizes(mesh.geometry) : null
const wire = createQuadWireframeGeometry(mesh.geometry, { faceSizes })
只有在旗帜出现时才解码:在一个没有悬挂标记的网格上,偶然共享第一个索引的相邻三角会被错误地合并. 任何重新排序索引(德拉克语,meshopt语,多为optimisers语)都会破坏编码,并随之降下国旗.
下层棋子
import {
polygonMeshFromTriangles, // BufferGeometry (+ optional faceSizes) → PolygonMesh
joinTriangles, // Blender Tris to Quads on a PolygonMesh
polygonEdges, // unique [a, b, a, b, ...] vertex pairs
createPolygonEdgesGeometry, // PolygonMesh → LineSegments geometry
faceSizesOf, // per-face vertex counts (3 = tri, 4 = quad, ...)
weldPositions,
parseBinaryFbx
} from '@comfyorg/quad-wireframe-three'
faceSizesOf 这也是你如何变得诚实 脸 统计(Blender's "Faces" 而不是三角计数)用于加载模型.
业绩
焊接使用字符串密钥映射,合并为 O(E log E)两者都以普通JS的主线运行. 数十万个三角形的梅谢斯,跑 polygonMeshOf 在工人中,并传输所产生的打出数组.