CODEWITHSUNDEEP
javascriptthree.jsfrontendmesh
Sikandar Malik
Sikandar Malik

Reputation: 25

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

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

Upvotes: 1

Views: 651

Answers (1)

M -
M -

Reputation: 28502

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

Upvotes: 1

Related Questions