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

Question

Example data: Mesh format(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]]
}

They are [x,y,z] each and form a cube/box shape with 24 points in total.

How do I go about rendering a shape with three.js with my Mesh data?

Edit: I have attempted to add my data into the .BoxGeometry() instance, however it creates a 2D box instead, which is incorrect.

<!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

M - · Accepted Answer · 2021-08-17 03:53:28Z

1

Instead of using BoxGeometry (which will make a box), you need to use BufferGeometry, which lets you declare your own custom vertex positions. There's a short code demo in that documentation page, all you'd have to do is swap out the data in the vertices array with your own groups of 3 numbers:

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 );

answered Aug 17, 2021 at 3:53

M -

28.7k12 gold badges56 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sikandar Malik Over a year ago

I followed your steps and still could not get me a 3D cube looking shape. Instead I have a incorrect shape as shown with the code running: jsfiddle.net/ya83edzv

Sikandar Malik Over a year ago

Each array contains 3 positional coordinates [x,y,z] and there are 24 arrays. Each side of a cube is 4 points connected with a straight line. The 3D Shape has 6 sides * 4 points = 24 points. Hence, 24 arrays, each containing positional coordinatios [x,y,z].

Sikandar Malik Over a year ago

Marquizzo Hello, you there bud?

M - Over a year ago

WebGL can only draw triangles, not squares with 4 points. You're going to have to modify your data so the face of each square is made up of 2 triangles, like a Plane. Keep in mind that the order of the vertices in the triangle also matters. If they wind in a counter-clockwise way, you'll see the triangle, but if they're clockwise, then they'll be "facing backward", and you won't see it. See here for winding order details

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related