0
231
ViewsAdd dynamic texture to model using three js and React Three Fiber and gltfjsx
I wanted to try three js and following this tutorial https://www.youtube.com/watch?v=xy_tbV4pC54, i was able to run it
What i wanted to do now is adding image texture on top of the model something like this
https://osorina.github.io/cup-demo/image/
i haven't tried any code because im still looking for a way to do it, some say that i need to use fabricjs but i cant find any helpful resource that suits my needs, hope someone here know how to do something like cup demo above.
Here's the sandbox https://codesandbox.io/s/floating-shoe-forked-qxjoj, thanks in advance
1 answers
Answer question0
you can overwrite pre-defined props
import { useGLTF, useTexture } from '@react-three/drei'
function Model() {
const { nodes, material } = useGLTF(...)
const texture = useTexture("/texture.jpg")
...
return (
<group>
<mesh geometry={...} material={...} material-map={texture} />
you can also flat out replace an existing material:
<mesh geometry={...}>
<meshStandardMaterial map={texture} />
</mesh>
just be aware that textures need proper UV coordinates which are usually set in blender or the modelling software. you can't just put an imagine on something and expect it to just align.