如何使用 Three.js 和网格数据渲染 3D 形状

Question

示例数据：网格格式(mw/1):

{
    "Tid": 6,
    "frameNumber": 580,
    "Mesh": [[0.52147865, 0.35447019, -1.05268724], [1.02147865, 0.35447019, -1.05268724], [0.52147865, 0.35447019, -1.05268724], [0.52147865, 0.85447019, -1.05268724], [0.52147865, 0.35447019, -1.05268724], [0.52147865, 0.35447019, -0.05268724], [1.02147865, 0.85447019, -1.05268724], [1.02147865, 0.35447019, -1.05268724], [1.02147865, 0.85447019, -1.05268724], [0.52147865, 0.85447019, -1.05268724], [1.02147865, 0.85447019, -1.05268724], [1.02147865, 0.85447019, -0.05268724], [1.02147865, 0.35447019, -0.05268724], [0.52147865, 0.35447019, -0.05268724], [1.02147865, 0.35447019, -0.05268724], [1.02147865, 0.85447019, -0.05268724], [1.02147865, 0.35447019, -0.05268724], [1.02147865, 0.35447019, -1.05268724], [0.52147865, 0.85447019, -0.05268724], [0.52147865, 0.85447019, -1.05268724], [0.52147865, 0.85447019, -0.05268724], [0.52147865, 0.35447019, -0.05268724], [0.52147865, 0.85447019, -0.05268724], [1.02147865, 0.85447019, -0.05268724]]
}

它们各自为 [x,y,z]，形成一个 cube/box 形状，总共有 24 个点。

如何使用我的网格数据渲染具有 three.js 的形状？

编辑：我试图将我的数据添加到 .BoxGeometry() 实例中，但是它创建了一个 2D 框，这是不正确的。

<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Three.js</title>
<style>
    body { margin: 0; }
</style>
</head>
<body>
    <script src="../SdCardFiles/js/three.min.js"></script>
    <script>
      const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( );

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        const geometry = new THREE.BoxGeometry([[0.52147865, 0.35447019, -1.05268724], [1.02147865, 0.35447019, -1.05268724], [0.52147865, 0.35447019, -1.05268724], [0.52147865, 0.85447019, -1.05268724], [0.52147865, 0.35447019, -1.05268724], [0.52147865, 0.35447019, -0.05268724], [1.02147865, 0.85447019, -1.05268724], [1.02147865, 0.35447019, -1.05268724], [1.02147865, 0.85447019, -1.05268724], [0.52147865, 0.85447019, -1.05268724], [1.02147865, 0.85447019, -1.05268724], [1.02147865, 0.85447019, -0.05268724], [1.02147865, 0.35447019, -0.05268724], [0.52147865, 0.35447019, -0.05268724], [1.02147865, 0.35447019, -0.05268724], [1.02147865, 0.85447019, -0.05268724], [1.02147865, 0.35447019, -0.05268724], [1.02147865, 0.35447019, -1.05268724], [0.52147865, 0.85447019, -0.05268724], [0.52147865, 0.85447019, -1.05268724], [0.52147865, 0.85447019, -0.05268724], [0.52147865, 0.35447019, -0.05268724], [0.52147865, 0.85447019, -0.05268724], [1.02147865, 0.85447019, -0.05268724]]);
        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        const cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 5;

        const animate = function () {
            requestAnimationFrame( animate );

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            cube.rotation.z += 0.01;

            renderer.render( scene, camera );
        };

        animate();
    </script>
</body>

Three.js Rendered Image Rotating

Answer 1

而不是使用 BoxGeometry（这将制作一个盒子），you need to use BufferGeometry，它允许您声明自己的自定义顶点位置。该文档页面中有一个简短的代码演示，您所要做的就是将 vertices 数组中的数据替换为您自己的 3 个数字组：

const geometry = new THREE.BufferGeometry();

// Here we put in your own custom vertex positions
const vertices = new Float32Array( [
0.52147865, 0.35447019, -1.05268724, 
1.02147865, 0.35447019, -1.05268724, 
0.52147865, 0.35447019, -1.05268724, 
0.52147865, 0.85447019, -1.05268724, 
0.52147865, 0.35447019, -1.05268724, 
0.52147865, 0.35447019, -0.05268724, 
1.02147865, 0.85447019, -1.05268724, 
1.02147865, 0.35447019, -1.05268724, 
1.02147865, 0.85447019, -1.05268724, 
0.52147865, 0.85447019, -1.05268724, 
1.02147865, 0.85447019, -1.05268724, 
1.02147865, 0.85447019, -0.05268724, 
1.02147865, 0.35447019, -0.05268724, 
0.52147865, 0.35447019, -0.05268724, 
1.02147865, 0.35447019, -0.05268724, 
1.02147865, 0.85447019, -0.05268724, 
1.02147865, 0.35447019, -0.05268724, 
1.02147865, 0.35447019, -1.05268724, 
0.52147865, 0.85447019, -0.05268724, 
0.52147865, 0.85447019, -1.05268724, 
0.52147865, 0.85447019, -0.05268724, 
0.52147865, 0.35447019, -0.05268724, 
0.52147865, 0.85447019, -0.05268724, 
1.02147865, 0.85447019, -0.05268724
] );

// itemSize = 3 because there are 3 values (components) per vertex
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );

如何使用 Three.js 和网格数据渲染 3D 形状

How to render 3D Shape using Three.js with Mesh data

javascript

frontend

mesh

three.js