How to display texture (img) on a plane geometry

[SarahVanDenBerghe]

Hi! I only started learning react-three-fiber as of today, but I was wondering what the best way is to display an image on a plane.

Currently, I have been trying this, with img being assigned the URL https://i.imgur.com/RoNmD7W.png I have taken over the code that I found on the API, but perhaps I am missing something important.

<mesh>
  <planeGeometry attach="geometry" args={[1, 1]} />
  <meshBasicMaterial name="material">
    <texture
      attach="map"
      image={img}
      onUpdate={(self) => img && (self.needsUpdate = true)}
    />
  </meshBasicMaterial>
</mesh>

However, it seems to generate a random color instead of the image, not sure what I did wrong, any help is welcome!

[drcmda]

https://codesandbox.io/s/r3f-basic-demo-ivguf?file=/src/index.js

import * as THREE from 'three'
import ReactDOM from 'react-dom'
import React, { Suspense } from 'react'
import { Canvas, useLoader } from 'react-three-fiber'
import img from './RoNmD7W.png'
import './styles.css'

function Image() {
  const texture = useLoader(THREE.TextureLoader, img)
  return (
    <mesh>
      <planeBufferGeometry attach="geometry" args={[3, 3]} />
      <meshBasicMaterial attach="material" map={texture} />
    </mesh>
  )
}

ReactDOM.render(
  <Canvas colorManagement>
    <Suspense fallback={null}>
      <Image />
    </Suspense>
  </Canvas>,
  document.getElementById('root')
)

[SarahVanDenBerghe]

Thank you! :)

[Fasani]

@drcmda these type of questions/answers which are in theory simple enough to become part of an FAQ. I would be happy to help maintain such an FAQ format and it would allow other members of the community to also answer and self learn.

Q: How to display texture (img) on a plane geometry
A: https://codesandbox.io/s/r3f-basic-demo-ivguf?file=/src/index.js

[sniok]

maybe those kind of topics could fit in recipes?

[drcmda]

Sure nothing against it

[yaroslavnikiforov]

Hi @drcmda, but how can I use nested texture, like in the docs? Seems this doesn't work:
<mesh> <meshBasicMaterial attach="material"> <texture attach="map" image={img} onUpdate={self => (self.needsUpdate = true)} /> </meshBasicMaterial > <mesh>

[yaroslavnikiforov]

I want to use reusable texture component to avoid this:

[yaroslavnikiforov]

I tried to create Image object but it also doesn't work. I compared it with image from texture and it looks the same:
const img = new Image()
img.src = '/textures/week_9/skin.jpg' // path in public folder
img.crossOrigin = 'anonymous'