Original Discord Post by 3poabraqit | 2024-09-16 09:46:16
I am trying to create scene in ReactJS with ConvAI base code, is there any way that we can make Map in blender and use it for ConvAI ReactJS. Trying to create map by putting each mesh is not feasible at all. Please Help
Reply by k3kalinix | 2024-09-16 09:52:02
<@368669084952428554>
Reply by 3poabraqit | 2024-09-16 09:55:05
I tried to put all mesh in same glb file. But all the object goes to Origin point
Reply by saurav0037 | 2024-09-16 18:06:15
You mean baking? <@547745240899911684>
Reply by 3poabraqit | 2024-09-16 20:22:23
No, I created scene in blender, I want to export to ReactJS compatible with ConvAI reactjs
Reply by kyu.168 | 2024-09-17 03:10:45
Hi <@368669084952428554> We’re working together on the project. We’re adapting the ThreeJS build to incorporate unique backgrounds and different characters for various applications. The question <@547745240899911684> is asking is how do we export a scene from blender to make it works with this build: GitHub - Conv-AI/Reallusion-web
Embedded Content:
GitHub - Conv-AI/Reallusion-web
Contribute to Conv-AI/Reallusion-web development by creating an account on GitHub.
Link: GitHub - Conv-AI/Reallusion-web
Reply by kyu.168 | 2024-09-17 03:16:57
We adapted this tutorial for our own use cases: https://youtu.be/5tYyeXPo5vg?si=QCnTYG-ti18uUkFM. We’re working on getting it compatible with mobile. We were able to change the character meshes but are working on an efficient way to change scenes. For the scenes we’re encountering some incompatibility issues with Blender/ReactJS on this project. Would it be possible to find out what versions were used?
Embedded Content:
AI Characters in Web Browser using ThreeJS and Reallusion Character…
Convai powers the minds of 3D avatars in virtual worlds. In this video, we’ll be guiding you on integrating Convai’s AI functionalities with a @reallusion Avatar, all on your web browser using Three.js and React. Using Convai, you can effortlessly add complex AI functionalities to your Reallusion character, enabling dynamic natural conversations…
Link: https://www.youtube.com/watch?v=5tYyeXPo5vg
Reply by kyu.168 | 2024-09-17 03:18:13
And how we can introduce new objects/items to the scene without having everything spawn on origin point?
Reply by saurav0037 | 2024-09-17 08:25:08
<@961499420199890944> are you exporting it as glb?
Reply by saurav0037 | 2024-09-17 08:28:03
if yes you can import everything using useGLB or useFBX from r3f. You just need to provide the glb link in the code. Also for position the (generated code takes in attribute) in tag. So it’ll be something like this:
<group ref={modelRef} {...props} dispose={null} postion={[1,1,1]} rotation={[Math.PI/2,0,0]} >
…model nodes generated code
Reply by 3poabraqit | 2024-09-17 10:26:24
I would like to use position of each mesh defined in blender scene
Reply by 3poabraqit | 2024-09-17 10:38:19
so basically i would like to create blender scene like this
Images:
Reply by 3poabraqit | 2024-09-17 10:38:31
then import in ReactJS
Reply by 3poabraqit | 2024-09-17 10:39:07
Right now I have to put position and rotation metadata for every object which isnt exactly practical
Reply by kyu.168 | 2024-09-17 13:15:58
<@368669084952428554> is there a shortcut around this that can help us or do we have to do it manually for each object?
Reply by saurav0037 | 2024-09-18 12:54:18
No you can export the entire scene as a single glb file
Reply by saurav0037 | 2024-09-18 12:56:46
we used this for interactive convai website
Embedded Content:
Interdimensional Art Gallery - floating platform - Download Free 3D…
My entry for the #HubsArtGallery challenge.
You can find the Hub here:
https://hub.link/v6x7AY3
Here is a immage from the navigation mesh:
Imgur: The magic of the Internet - Interdimensional Art Gallery - floating platform - Download Free 3D model by Elin (@ElinHohler)
Link: Interdimensional Art Gallery - floating platform - Download Free 3D model by Elin (@ElinHohler) [c2660ab] - Sketchfab
Reply by saurav0037 | 2024-09-18 12:57:06
you can export the entire scene as model
Reply by saurav0037 | 2024-09-18 12:57:49
Upload your glb file here
Embedded Content:
GLTF → React Three Fiber
Easily convert GLTF models into React Three Fiber components to use in your projects
Link: https://gltf.pmnd.rs/
Reply by saurav0037 | 2024-09-18 12:57:52
this will give you the code
