如何使用 Three.js 和 Mesh 数据渲染 3D 形状答案

【问题标题】：How to render 3D Shape using Three.js with Mesh data如何使用 Three.js 和 Mesh 数据渲染 3D 形状
【发布时间】：2021-10-18 23:52:05
【问题描述】：

示例数据：网格格式（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] 并形成一个立方体/盒子形状，总共有 24 个点。

如何使用我的 Mesh 数据使用 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

【问题讨论】：

标签： javascript three.js frontend mesh

【解决方案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 );

【讨论】：

我按照您的步骤进行操作，但仍然无法获得 3D 立方体外观形状。相反，我的形状不正确，如代码运行所示：jsfiddle.net/ya83edzv
每个数组包含3个位置坐标[x,y,z]，共有24个数组。立方体的每一边是用直线连接的 4 个点。 3D 形状有 6 条边 * 4 点 = 24 点。因此，有 24 个数组，每个数组都包含位置坐标 [x,y,z]。
Marquizzo 你好，你在吗？
WebGL 只能绘制三角形，不能绘制 4 个点的正方形。您将不得不修改您的数据，使每个正方形的面由 2 个三角形组成，like a Plane。请记住，三角形中顶点的顺序也很重要。如果它们以逆时针方式缠绕，您会看到三角形，但如果它们是顺时针方向，那么它们将“面向后方”，您将看不到它。 See here for winding order details