CODEWITHSUNDEEP
javascriptreactjs
naoval luthfi
naoval luthfi

Reputation: 771

Add 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

enter image description here

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/

enter image description here

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

Upvotes: 5

Views: 3312

Answers (1)

hpalu
hpalu

Reputation: 1435

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.

Upvotes: 1

Related Questions