I dont know if this is the right place to ask for help but i am trying to create a pallet stacked with boxes based on json data. This data contains the coordinates, height, width and length. Now I can build the pallet, but the boxes do not stack well on top of each other and the boxes on position.z that start at 0 do not fall evenly either. I’ve already tried different things with offset but then the boxes collapse and don’t stack neatly on top of each other. Hopefully someone can help and explain what i’m missing because i tried everything to my knowledge. I’m new to threejs and love it allready. Any help is appreciated. Thank you
I tried to calculate the position of the boxes with offset and then take the result into account and subtract it from my current position
This i my code in react:
import React, { Suspense } from 'react';
import { Canvas, extend, useThree } from '@react-three/fiber';
import { OrbitControls, Edges, } from "@react-three/drei";
import { Physics } from "@react-three/cannon";
import * as THREE from 'three';
import { MeshLine, MeshLineMaterial } from 'three.meshline';
import data from './data.json';
const json = data;
const obj = (json);
extend({ MeshLine, MeshLineMaterial })
let orientations = [];
for (let i = 0; i < obj.value.boxes.length; i++) {
let orientation = obj.value.boxes[i].box.orientation;
orientations.push(orientation);
}
console.log(orientations);
function Orientations() {
//F00S90T00 = Front == Front && Side == Top && Top == Side
if (orientations.includes("F00S90T00")) {
return [0, Math.PI / 2, 0];
}
//F90S00T00 = Front == Side && Side == Front && Top == Top
if (orientations.includes("F90S00T00")) {
return [Math.PI / 2, 0, 0];
}
//F00S00T90 = Front == Top && Side == Side && Top == Front
if (orientations.includes("F00S00T90")) {
return [0, 0, Math.PI / 2];
}
//F90S90T00 = Front == Top && Side == Front && Top == Side
if (orientations.includes("F90S90T00")) {
return [Math.PI / 2, Math.PI / 2, 0];
}
//F90S00T90 = Front == Side && Side == Top && Top == Front
if (orientations.includes("F90S00T90")) {
return [Math.PI / 2, 0, Math.PI / 2];
}
//Default
if (orientations.includes("F00S00T00")) {
return [0, 0, 0];
}
}
const value = Orientations();
console.log(value);
const offsets = obj.value.boxes.map(boxData => {
let offset = new THREE.Vector3(boxData.position.x / 10, boxData.position.y / 10, 0);
for (let i = boxData.stackingIndex + 1; i < obj.value.boxes.length; i++) {
const otherBoxData = obj.value.boxes[i];
if (otherBoxData.stackingIndex === boxData.stackingIndex + 1) {
offset.z += otherBoxData.box.height / 10;
}
}
return offset;
});
function Boxes() {
return (
<mesh>
{obj.value.boxes.map((box, index) => (
<mesh key={index} rotation={value} position={[
box.position.x / 100,
box.position.z / 100,
box.position.y / 100,
]}>
<boxGeometry attach="geometry"
args={[box.box.width / 100,
box.box.length / 100,
box.box.height / 100,
]} />
<Edges />
<meshPhysicalMaterial
color="#c19a6c"
attach="material"
clearcoat={1}
reflectivity={1}
side={useThree.DoubleSide}
/>
</mesh>
))}
</mesh>
)}
function App() {
return (
<Canvas style={{ width: '100vw', height: '79vh', display: 'block' }}
shadows
camera={{ position: [10, 10, 10] }}>
<OrbitControls />
<ambientLight />
<Suspense>
<pointLight position={[0, 0, 0]} />
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[2, -2.2, 4.8]}>
<boxGeometry args={[8, 12]} />
<meshStandardMaterial attach="material" color="brown" />
<Edges />
</mesh>
<Boxes />
</Suspense>
<Physics>
</Physics>
</Canvas>
);
}
export default App;
JSON.data:
data.json (58.3 KB)
Picture to show what is wrong:
