The question is about connecting the Objects3D’s on the Canvas created by react-three-fiber / drei with constructs in canvas. To learn react-three-fiber I created a 3D Chess project for myself. I use chess.js for the chess backend (JS with types). I layout the initial pieces from chess.js internals…

Keeping a list of refs in the Store (that would be static after the creation)? Would that work? tbh that’s pulling the cart in front of the horse. state should drive the app, the app shouldn’t drive state. if you have a state model and all your players bind to it, they just react to changes. the …

Have you seen gltfjsx ? It seems like a lot of R3F developers use that to organize things.

I’ve been using it to load the models, but in the end, they become group mesh(geo,material)) - say a pawn. Then I create pawn instances and 3D position them from chess.js’s 2d array of the board. I want to handle these instances. For now, they live in a list on the Store, but the actual move is don…

I think you probably don’t want useEffect running at 60 FPS , but doing something like that in useFrame would be reasonable.

Thank you for the pointers @donmccurdy … I think I took care of those culprits, by connecting only related state variables as the second parameter of useEffect and/or having an if statement at the very start of useEffect, checking some flags(s). I think I’ll use react-spring for animation, not tri…

Thank you @drcmda , that was very helpful. I was thinking everything should go from zustand to view, but keeping interactive things with the objects, like you’ve implemented in your example (with useThree) helps a lot… I’m rather new to React, as my 30+ language and I have trouble thinking the Reac…

oh, i come from c++ as well, long time ago. :smiley: it helps to always hammer this in: the view is a reflection of state. (putting refs into state would make state a reflection of the view). the critical part of that code is event.ray.intersectPlane which tells you the plane-projected coordinates. …

[image] drcmda: the critical part of that code is event.ray.intersectPlane which tells you the plane-projected coordinates Yep, I saw that, but it won’t work on some cases like knights jumping over :slight_smile: I was thinking of a 3D move (conditionally), maybe I can take it to a higher pla…

hi @drcmda , Could you have a minute to check my code? I think the question is related to mine. Here’s the question I asked including code as well [image] Why I'm Getting unnecessary space while changing the Three Js Object Position? Questions While I changed the position…

Effective way to keep track of 3D objects in React

Questions

Sayedul_Karim December 31, 2022, 9:13pm 11

hi @drcmda ,
Could you have a minute to check my code? I think the question is related to mine. Here’s the question I asked including code as well

Topic		Replies	Views
Combine React-three-fiber and threeJS code Questions project-structure , threejs , react-three-fiber	13	9515	January 15, 2024
[Paid] Knowledge Transfer and Help me set up React Three Fiber project Jobs textures , materials , loaders , animation , react-three-fiber	3	416	May 18, 2024
access an array of 3D objects on the scene (react three) Questions react-three-fiber	2	731	August 3, 2021
Noob question about functional reactive programming, state (vuex), and threejs Questions javascript , vue	49	8084	August 23, 2020
Having a hard time implementing my plain threejs project into a react project without breaking it, specifically problematic with controls Questions webgl-renderer , orbit-controls , animation , react , react-three-fiber	1	1467	March 8, 2023

Effective way to keep track of 3D objects in React

Related topics