这里有一个demo，仅仅支持obj格式的几何布线，至于其他格式的3D文件，你可以在blender软件里面导出obj格式，然后使用我这个demo渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NGonMesh 调色版 + 法线修正</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
        #fileInput {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1;
            background: rgba(255,255,255,0.8);
            padding: 4px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<input type="file" id="fileInput" accept=".obj" />

<script type="importmap">
    {
      "imports": {
        "three":                         "https://unpkg.com/three@0.165.0/build/three.module.js",
        "three/examples/jsm/":           "https://unpkg.com/three@0.165.0/examples/jsm/"
      }
    }
</script>

<script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

    class NGonMesh extends THREE.Group {
        constructor(positions, faces, options = {}) {
            super();
            // ——— 扇形三角化 ———
            const triIdx = [];
            faces.forEach(face => {
                for (let i = 1; i < face.length - 1; i++) {
                    triIdx.push(face[0], face[i], face[i+1]);
                }
            });
            const geoFill = new THREE.BufferGeometry();
            geoFill.setAttribute('position', new THREE.BufferAttribute(positions, 3));
            geoFill.setIndex(triIdx);

            // **关键：计算法线，否则标准材质全黑**
            geoFill.computeVertexNormals();

            // ——— 原始边环索引 ———
            const lineIdx = [];
            faces.forEach(face => {
                for (let i = 0; i < face.length; i++) {
                    lineIdx.push(face[i], face[(i+1)%face.length]);
                }
            });
            const geoWire = new THREE.BufferGeometry();
            geoWire.setAttribute('position', new THREE.BufferAttribute(positions, 3));
            geoWire.setIndex(lineIdx);


            // ——— 新配色材质 ———
            const fillMat = options.fillMaterial
                || new THREE.MeshBasicMaterial({
                    color: 0xe5e6e6,
                    transparent: false,
                    depthTest: true,
                    depthWrite: true,
                    side: THREE.DoubleSide,
                    polygonOffset: true,
                    polygonOffsetFactor: 1,  // 增加实体材质的偏移量
                    polygonOffsetUnits: 1,     // 添加单位偏移
                });
            const wireMat = options.wireMaterial
                || new THREE.LineBasicMaterial({
                    color: 0x333333,       // 深灰边框
                    linewidth: 1.5,
                    polygonOffset: true,
                    polygonOffsetFactor: -1,
                    polygonOffsetUnits: -1
                });

            // console.log(fillMat);

            // ——— Mesh + Wire ———
            const mesh = new THREE.Mesh(geoFill, fillMat);
            const wire = new THREE.LineSegments(geoWire, wireMat);
            wire.renderOrder = 1;
            this.add(mesh, wire);
        }
    }

    function parseOBJ(objText) {
        const positions = [];
        const faces = [];
        objText.split('\n').forEach(line => {
            line = line.trim();
            if (line.startsWith('v ')) {
                const [, x,y,z] = line.split(/\s+/);
                positions.push(+x, +y, +z);
            } else if (line.startsWith('f ')) {
                const parts = line.slice(2).trim().split(/\s+/);
                const idx = parts.map(p => parseInt(p.split('/')[0], 10) - 1);
                if (idx.length >= 3) faces.push(idx);
            }
        });
        return {
            positions: new Float32Array(positions),
            faces
        };
    }

    // —— 场景初始化 ——
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xf5f5f5);

    const camera = new THREE.PerspectiveCamera(45, innerWidth/innerHeight, 0.1, 1000);
    camera.position.set(3, 4, 6);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;

    // 环境光 + 方向光
    scene.add(new THREE.AmbientLight(0xffffff, 0.6));
    const dir = new THREE.DirectionalLight(0xffffff, 0.8);
    dir.position.set(5,10,7);
    scene.add(dir);

    // 调整视窗
    window.addEventListener('resize', () => {
        camera.aspect = innerWidth/innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(innerWidth, innerHeight);
    });

    let currentNGon = null;

    // —— 本地 OBJ 加载 ——
    document.getElementById('fileInput').addEventListener('change', async e => {
        const file = e.target.files[0];
        if (!file) return;
        const text = await file.text();
        const { positions, faces } = parseOBJ(text);

        console.log(positions, faces);

        if (currentNGon) {
            scene.remove(currentNGon);
            currentNGon.traverse(node => {
                if (node.geometry) node.geometry.dispose();
                if (node.material) {
                    if (Array.isArray(node.material))
                        node.material.forEach(m => m.dispose());
                    else
                        node.material.dispose();
                }
            });
        }
        currentNGon = new NGonMesh(positions, faces);
        scene.add(currentNGon);
    });

    // —— 渲染循环 ——
    (function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    })();
</script>
</body>
</html>

Missing lines on edges #22

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions