Up until now, I've only utilized useBox statement to create 3D rectangles. Is there a method available to generate something like a wooden piece in dimensions of "two by four" with cut ends at specific angles, akin to the image shown below?
https://i.sstatic.net/XfHu3.png
You can find the code/demo here: https://codesandbox.io/s/ragdoll-physics-forked-bntr9?file=/src/index.js
The issue seems to be that I'm combining different samples from Three.js and React-Three-Fiber.
After watching this video https://youtu.be/3eGeh_aJxMI?t=509, it got me thinking whether I could develop a 2D polygon shape and then extrude it into 3D space. If there's a more effective approach, please share your insights. The video uses 'scene.add', but as I'm working with react-three-fiber, I assume I need to modify that part to suit my existing canvas setup.
The following example doesn't depict the exact shape I desire; it's just an initial demo showcasing a triangle extruded into 3D (the video showcased a heart shape).
I'm unsure about which element should be used in the return statement. Using "", or "" resulted in errors (I can provide a list of errors if needed, but considering they might not be the correct elements, I'll omit them for now). When using lowercase "", the code runs without errors, yet the 3D extruded triangle object isn't visible on the display.
const Truss1 = () => {
var trussPosition = [5, 5, 5];
const trussBoard1FlatShap = new Shape();
const x = 0;
const y = 0;
const moveSize = 40;
trussBoard1FlatShap.moveTo(x - moveSize, y - moveSize);
trussBoard1FlatShap.lineTo(x + moveSize, y - moveSize);
trussBoard1FlatShap.lineTo(x, y + moveSize);
var extrudeSettings = { amount: 30, bevelEnabled: false };
var extrudeSettings2 = {steps: 2,
depth: 16,
bevelEnabled: true,
bevelThickness: 1,
bevelSize: 1,
bevelOffset: 0,
bevelSegments: 1}
var material = new MeshLambertMaterial({ color: 'red'});
var trussBoard1Extruded = new ExtrudeGeometry(trussBoard1FlatShap, extrudeSettings);
// I also tried extrudeSettings2 from above.
var trussBoard1Mesh = new Mesh(trussBoard1Extruded, material);
trussBoard1Mesh.position.z = 55;
const [cube] = useBox(() => ({ type: 'Static', position: [0, -3, -9.8], args: [0.25, 2, 0.25] }))
return (
<>
<mesh scale={[8, 8, 8]} ref={trussBoard1Mesh} >
</mesh>
<Box scale={[1, 1, 1]} ref={cube} >
</Box>
</>
)
}
...
ReactDOM.render(
<Canvas style={{ cursor: 'none' }} shadows orthographic camera={{ position: [-25, 20, 25], zoom: 25, near: 1, far: 100 }}>
<CameraControls />
<color attach="background" args={['#171720']} />
<fog attach="fog" args={['#171720', 20, 70]} />
<ambientLight intensity={0.2} />
<pointLight position={[-10, -10, -10]} color="red" intensity={1.5} />
<Physics iterations={15} gravity={[0, -200, 0]} allowSleep={false}>
<Plane position={[0, -5, 0]} rotation={[-Math.PI / 2, 0, 0]} />
<Lamp />
<Table />
<DynTable>{/* <texture attach="map" image={'/images/wood_andrey-haimin-q2Fyzn-KJOQ-unsplash.jpg'} /> */}</DynTable>
<DynShed />
<Truss1 />
</Physics>
</Canvas>,
document.getElementById('root')
)