Nested primitive syntax not working?

[stephent]

I'm having trouble getting nested primitives to work with a simple texture.

This example attempts to display two components TexturedPlane and TexturedPlane2.

https://codesandbox.io/s/r3f-nested-texture-component-b2837?file=/src/index.js

TexturedPlane works as expected, assigning a texture to the material map property.
TexturedPlane2 attempts to use the nested primitive syntax described in https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md (see the example beginning 'You can nest primitive objects'), but this one doesn't render and generates TypeError in the console.

Am I missing something in TexturedPlane2? Thanks!

[drcmda]

that isn't a primitive. 'map' itself is already a texture, so you're creating a texture and then give it a texture as an ... image? the following makes little sense:

<texture attach="map" image={map} onUpdate={(self) => (self.needsUpdate = true)} />

typescript can help you eliminate these things without even having to study threejs docs.

this is how you use primitive

<primitive attach="map" object={map} onUpdate={(self) => (self.needsUpdate = true)} />

what you can do is using THREE.ImageLoader and then go

<mesh>
  <...Material>
    <texture attach="map" image={image} />

but why would you, this is how it's usually done

  const [map] = useLoader(THREE.TextureLoader, [baseImageURL])
  return (
    <mesh>
      <meshStandardMaterial color="green" map={map} />

[stephent]

Ok, thanks. However, I was literally following the docs:

The reason for wanting to is that I'd like to decompose my textures into separate components as they have some non-trivial image loading logic that I could reuse in several places.

[drcmda]

well, yes, the code is correct, but your loader is not. you are using textureloader so what it gives you is a texture already. new THREE.Texture().image wants an image, not a texture. the example was just to explain what "attach" means. you shouldn't have to nest that deeply 99 out of 100 cases. you also don't need attach="material"

[stephent]

For anyone else coming across this, I updated the example to show three approaches to assigning the texture to the material:

1. Usual approach
2. Using a primitive per @drcmda 's answer above
3. Extracting the primitive into a separate component (trivial, but included for completeness)

[stephent]

well, yes, the code is correct, but your loader is not. you are using textureloader so what it gives you is a texture already. new THREE.Texture().image wants an image, not a texture. the example was just to explain what "attach" means. you shouldn't have to nest that deeply 99 out of 100 cases. you also don't need attach="material"

Ok - thanks for the clarification.