Next + ThreeJS dynamic routes and CRUD operations
Answered
Tan posted this in #help-forum
TanOP
I am trying to build a simple 3D editor. The user will be able to upload assets and load them inside a ThreeJS scene to view them in 3D.
I would like the editor to be inside the layout.tsx and then have some other pages where I can upload assets and explore folders..
The thing that I don't understand is how to make layout.tsx, where the ThreeJS scene is mounted to render only once because as you can see in the video when I upload something (using DRIZZLE ORM) the page refreshes.
Now I understand why, it's this because I am using revalidatePath, is there a better way?
Somebody can point me to the right direction? It's my first time I do this stuff
I would like the editor to be inside the layout.tsx and then have some other pages where I can upload assets and explore folders..
The thing that I don't understand is how to make layout.tsx, where the ThreeJS scene is mounted to render only once because as you can see in the video when I upload something (using DRIZZLE ORM) the page refreshes.
Now I understand why, it's this because I am using revalidatePath, is there a better way?
Somebody can point me to the right direction? It's my first time I do this stuff
Answered by B33fb0n3
would you mind adding a
https://github.com/christianstamati/threedify/blob/main/src/app/dev/editor/editor-component.tsx#L14
Or even an
[] here?https://github.com/christianstamati/threedify/blob/main/src/app/dev/editor/editor-component.tsx#L14
Or even an
[containerRef]?23 Replies
@Tan I am trying to build a simple 3D editor. The user will be able to upload assets and load them inside a ThreeJS scene to view them in 3D.
I would like the editor to be inside the layout.tsx and then have some other pages where I can upload assets and explore folders..
The thing that I don't understand is how to make layout.tsx, where the ThreeJS scene is mounted to render only once because as you can see in the video when I upload something (using DRIZZLE ORM) the page refreshes.
Now I understand why, it's this because I am using revalidatePath, is there a better way?
Somebody can point me to the right direction? It's my first time I do this stuff
It's a little hard for me to look though your code... can you share your github repo, so I can help you ?
This is the editor dev folder
yea, that helps, thanks. I couldn't find the location where you load the three d file. I thought it would be [this](https://github.com/christianstamati/threedify/blob/main/src/app/dev/editor/page.tsx), but I couldn't find it
TanOP
I loaded the threejs scene in this file https://github.com/christianstamati/threedify/blob/main/src/app/dev/editor/editor-component.tsx#L6
In the layout.tsx
And in the page.tsx there is just a panel where i can upload and delete files using actions and revalidatePath
I don't really know how to keep the state of Editor component between re-renders of the page
@Tan I loaded the threejs scene in this file https://github.com/christianstamati/threedify/blob/main/src/app/dev/editor/editor-component.tsx#L6
would you mind adding a
https://github.com/christianstamati/threedify/blob/main/src/app/dev/editor/editor-component.tsx#L14
Or even an
[] here?https://github.com/christianstamati/threedify/blob/main/src/app/dev/editor/editor-component.tsx#L14
Or even an
[containerRef]?Answer
TanOP
Ops! forgot the dependencies! Thanks
My bad 🙂
I just saw, that you are not using any libraries like react-three-fiber or anything near that... https://github.com/christianstamati/threedify/blob/main/src/lib/editor.ts#L4
Have you thought about using specific libraries, that are made for react?
Have you thought about using specific libraries, that are made for react?
TanOP
Now it's working!
I didn't know about these libraries
@Tan Now it's working!
A perfect ^^
@Tan I didn't know about these libraries
Oh, check them out... they make your life with threejs waayyy easier
TanOP
Thanks a lot for the support! You are the best!
@Tan Thanks a lot for the support! You are the best!
Sure thing. Please mark solution
TanOP
I will take a look thanks!
Of course!