-
|
I am trying to spawn a model when I click. I am currently spawning a cube on click but I am trying to load an OBJ and MTL files that I have. I have come across a lot of GLTF ways of doing it but cannot find any way to get it to work with just the OBJ and MTL. Thanks in advance. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 7 replies
-
|
its the same. useLoader(OBJLoader, url). or if you want use three loaders raw as they come, there is no difference in r3f. |
Beta Was this translation helpful? Give feedback.
-
|
OBJLoader expects materials to be loaded first and then supplied to the loader Do you think there's an r3f-idiomatic way to do this using useLoader? |
Beta Was this translation helpful? Give feedback.
-
|
this should work: const materials = useLoader(MTLLoader, mtlUrl)
const object = useLoader(OBJLoader, objUrl, loader => {
materials.preload()
loader.setMaterials(materials)
})
return <primitive object={object} /> |
Beta Was this translation helpful? Give feedback.
-
|
So I have tried a few things and cannot get it to work. I have tried: ` function OBJ({name, ...props}) { export default OBJ and also: function OBJ({name, ...props}) { export default OBJ` I get no errors except for the fact that it spits out warnings of unexpected line: From what I can see it spits out the entire index.html file per line. |
Beta Was this translation helpful? Give feedback.
-
|
that is a 404 _ your path is wrong, it's trying to parse the error message from the fetch request. the file has to be in your public folder, probably also needs to start with a /. you can try fetching it from the url bar, if that works the loader will be able to pick it up. it can't be in your src folder unless you import it first. it's more related to your bundle environment than three or react. |
Beta Was this translation helpful? Give feedback.
-
|
Ah it it can't just be in the src folder okay let me try that. |
Beta Was this translation helpful? Give feedback.
-
So I got it to load the model however,
I call it 3 times and it only generates once. I even tried putting it into my click function and i click to spawn a new OBJ and it just moves the old one from the previous location to the new location. |
Beta Was this translation helpful? Give feedback.
-
|
this is bc of the primitive, in threejs you just cant have the same mesh 3 times in different places. look into gltfjsx and the useGraph hook. build your own graph and pick out the geometries and materials. roughly: const materials = useLoader(MTLLoader, ...)
const object = useLoader(OBJLoader, ...)
const { nodes, materials } = useGraph(object)
return <mesh geometry={nodes.banana.geometry} material={materials.yellow} />in plain threejs you'd bump into the same thing, and you would most likely solve it by cloning, which is no good. you can do it here, too, but you're wasting resources and performance. you can re-use materials and geometry. if you plan to mutate them, for instance changing color on hover, you must use your own materials. return (
<mesh geometry={nodes.banana.geometry}>
<meshStandardMaterial color={nodes.yellow.color } ... />
</mesh>
)basically this is why i prefer gltf. this stuff is too easy with gltfjsx. |
Beta Was this translation helpful? Give feedback.
-
|
Im gonna mark this as solved (I also just realized there is a discord so I will probably continue down this rabbit hole there but actually loading the model is solved) |
Beta Was this translation helpful? Give feedback.
its the same. useLoader(OBJLoader, url). or if you want use three loaders raw as they come, there is no difference in r3f.