Decals not working

Questions
,
1

Hi,

I am trying to create a object similar to this
image

But when I try and add decals, it does not load. Below is my Code.

return  (
        <mesh ref={ref} {...props} {...bind()} receiveShadow={true}  material-aoMapIntensity={1} castShadow={true}>
            <icosahedronGeometry args={[2, 1]}/>
            <Decal position={[0, 0, 0]} map={texture} scale={2}/>
            <meshStandardMaterial color={"white"}/>

        </mesh>
    )
2

This is not three.js, and it doesn’t look like javascript?

3

I think is react 3 fiber or something else. my eyes…

4

If decals are not absolutely required this would be much easier to achieve with a texture, and a mesh created in blender for example. I don’t think a decal here actually achieves anything and would be more work to render / setup correctly.

1 Like
5

As @dubois has suggested, it seems a bit overkill to use decals in this scenario, however as that’s what you’re going for I think having your decal at position 0,0,0 is the issue here, you may need to move it just outside of the bounds of the geometries and in front of each, eg. If one of your objects is at position 0,0,0 you’d likely do…

<Decal position={[0, 0, 2.01]} map={texture} scale={2}/>
7

That works and you and @dubois were right, Decals are overkill. But I tried to use the same texture and map it to a meshStandardMaterial but that stretch the image to cover the mesh and that is not what I want. Is there any way to work around that problem?

Thanks for your help

8

Is there a problem with using react three fiber? Any feedback will do

9

Well, there is a lot that goes on behind the scenes with this syntax. It’s not just your code interacting with threejs it’s your code interacting with something that interacts with threejs.

If it’s “vanilla” at least you can compare it to the examples easier.

However, being that about half of all the threejs users do use react for it, it does make sense to have it as part of this “community”.