Data Example: Interpretation of the Mesh format(mw/1):
{
"ID": 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.854...
<p>A total of 24 points represent [x,y,z], creating a cube/box structure.</p>
<p>How can I render a shape using three.js with the given Mesh data?</p>
<p><strong>Note</strong>: I've tried integrating my data into the .BoxGeometry() instance, but it results in a 2D box instead of the desired 3D shape.</p>
<pre><code><!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, -...
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>