Ok so I have this react threejs fiber app going on and it’s got a bunch of items in it that are strewn about. A then have a panel on the side which should add components when I click the buttons. There are arrays that are filled with the json information and they pull from a database. I have successfully gotten the array to be filled with new objects when I click the button but I am having a hard time making them appear on the screen. Below I have included my entire code, then the specific button functionality, and the appearance of the app. How do I make the canvas recognize that the array has been updated? Alternatively, how do I add something to the canvas post render? I’m not finding any useful resources on the topic as of right now and it seems to be outside of chatgpt capabilities.
import React, { useRef, useState, useEffect } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
// import * as THREE from 'three';
import axios from 'axios';
import Worker from '../objects/worker.js';
import Furniture from '../objects/furniture.js';
import Room from '../objects/room.js';
import table from '../images/Table.png'
function SimVis() {
const groupRef = useRef();
const [rooms, setRooms] = useState([]);
const [furniture, setFurniture] = useState([]);
const [furnitureIds, setFurnitureIds] = useState([]);
const id = parseInt(window.location.pathname.substring(8));
const [workerPosition, ] = useState([0,0.5,1]);
const [workerSpeed, ] = useState([.5,.5]);
const [simulationSpeed, setSimulationSpeed] = useState(10);
const [storedsimulationSpeed, setStoredSimulationSpeed] = useState(10);
var minX = 1000;
var minZ = 1000;
var maxX = -1000;
var maxZ = -1000;
// console.log(simulationSpeed)
useEffect(() => {
axios
.get('https://jsv2r3kn.directus.app/items/Room')
.then((result) => {
setRooms(result.data.data);
})
.catch((err) => {
console.log(err);
});
}, []);
useEffect(() => {
axios
.get('https://jsv2r3kn.directus.app/items/Furniture')
.then((result) => {
setFurniture(result.data.data);
})
.catch((err) => {
console.log(err);
});
}, []);
useEffect(() => {
const newFurnitureIds = [];
rooms.filter((obj) => obj.sim_id === id).forEach((info) => {
info.room_furniture.forEach((furnitureId) => {
newFurnitureIds.push(furnitureId);
});
});
setFurnitureIds(newFurnitureIds);
}, [rooms, id]);
rooms.forEach(element => {
minX = Math.min(minX, element.Corner1_xcoord, element.Corner2_xcoord);
minZ = Math.min(minZ, element.Corner1_zcoord, element.Corner2_zcoord);
maxX = Math.max(maxX, element.Corner1_xcoord, element.Corner2_xcoord);
maxZ = Math.max(maxZ, element.Corner1_zcoord, element.Corner2_zcoord);
});
function findMin(key) {
const datas = rooms.map((node) => node[key]);
return Math.min(...datas)
}
const increaseSpeed = () => {
if (simulationSpeed > 1) {
setSimulationSpeed(simulationSpeed - 1)
}
}
const decreaseSpeed = () => {
setSimulationSpeed(simulationSpeed + 1)
}
const pause = () => {
if (simulationSpeed != 0){
setStoredSimulationSpeed(simulationSpeed)
}
setSimulationSpeed(0)
}
const play = () => {
setSimulationSpeed(storedsimulationSpeed)
}
const addTable = () => {
var newID = Math.max.apply(Math, furnitureIds) + 1
const newFurnitureIds = furnitureIds;
newFurnitureIds.push(newID)
setFurnitureIds(newFurnitureIds)
const newRooms = rooms
newRooms[0].room_furniture.push(newID)
setRooms(newRooms)
const newRoomID = rooms[0].id
const newFurniture = furniture;
newFurniture.push({
id: newID,
type: "Table",
Name: "Table",
room_id: newRoomID,
x_coord: 0,
z_coord: 0,
x_length: 2,
z_length: 2,
face_direction: "North",
})
setFurniture(newFurniture)
}
return (
<div style={{ width: '100%', height: '100vh', position: 'relative' }}>
<Canvas style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
<Worker maxX = {maxX} maxZ = {maxZ} minX = {minX} minZ = {minZ} initialPos = {workerPosition} speed = {workerSpeed} simulationSpeed = {simulationSpeed} rooms = {rooms}/>
<OrbitControls enableDamping maxPolarAngle={Math.PI/2} />
<ambientLight intensity={0.1} />
<ambientLight color={ 0xffffff } position={[0, 10, 5]} />
{rooms
.filter((room) => room.sim_id === id)
.map((room) => {
return <Room key={room.id} room = {room}/>
})
}
{furniture
.filter((f) => furnitureIds.includes(f.id))
.map((f) => {
return <Furniture key={f.id} f = {f}/>
})
}
<PerspectiveCamera near={0.1} far={1000} position={[0, 0, 0]} lookAt={groupRef.current ? groupRef.current.position : [0, 0, 0]} />
</Canvas>
<div style={{ display: 'flex', flexDirection: 'column', position: 'absolute', top: 10, left: 10, zIndex: 1 }}>
<button onClick={increaseSpeed} style={{marginBottom: '10px'}}> Inc. Speed </button>
<button onClick={decreaseSpeed}> Dec. Speed </button>
</div>
<div style={{ display: 'flex', flexDirection: 'column', position: 'absolute', top: 10, left: 120, zIndex: 1 }}>
<button onClick={play} style={{marginBottom: '10px', width: '60px'}}> Play </button>
<button onClick={pause} style={{width: '60px'}}> Pause </button>
</div>
<div class="flex-container" style={{ position: 'absolute', top: 90, left: 10, zIndex: 1 }}>
<button style={{ width: '120px', height: '20%'}}> <img style={{height: '100%', maxHeight: '110px', alignContent: 'center'}} src={table} alt="my image" onClick={addTable}/> </button>
<button style={{ width: '120px', height: '20%'}}> <img style={{height: '100%', maxHeight: '110px', alignContent: 'center'}} src={table} alt="my image" onClick={pause}/> </button>
<button style={{ width: '120px', height: '20%'}}> <img style={{height: '100%', maxHeight: '110px', alignContent: 'center'}} src={table} alt="my image" onClick={pause}/> </button>
<button style={{ width: '120px', height: '20%'}}> <img style={{height: '100%', maxHeight: '110px', alignContent: 'center'}} src={table} alt="my image" onClick={pause}/> </button>
</div>
</div>
);
};
export default SimVis;
What I’m working on:
const addTable = () => {
var newID = Math.max.apply(Math, furnitureIds) + 1
const newFurnitureIds = furnitureIds;
newFurnitureIds.push(newID)
setFurnitureIds(newFurnitureIds)
const newRooms = rooms
newRooms[0].room_furniture.push(newID)
setRooms(newRooms)
const newRoomID = rooms[0].id
const newFurniture = furniture;
newFurniture.push({
id: newID,
type: "Table",
Name: "Table",
room_id: newRoomID,
x_coord: 0,
z_coord: 0,
x_length: 2,
z_length: 2,
face_direction: "North",
})
setFurniture(newFurniture)
}
How it looks:
