Wrap texture around object without stretching with MeshStandardMaterial

Questions
1

Hello,

I try to wrap a texture around an object without stretching while scaling.

I have the following ShaderMaterial and it works as I need it.

But I want to make use of it with a MeshStandardMaterial instead of ShaderMaterial.

How am I able to solve this?

Best

2

You can use yourStandardMaterial.onBeforeCompile=(shader)=>{

}
To intercept the shader before compilation, then modify it to include your custom code.
You can use this site to figure out which parts of the shader you need to replace…
https://ycw.github.io/three-shaderlib-skim/dist/#/latest/standard/vertex

4 Likes
3

Thanks for your reply.

I already tried to create the material by using onBeforeCompile but I failed. I have no clue about glsl so I will be very grateful if you could help me here.

1 Like
4

Here ya go:

https://flint-separated-stretch.glitch.me

code (look in triplanar-mapping.js):

4 Likes
5

Hi,

I was able to implement your code into my project. It works as intended. Very nice - thank you!

Is it possible to make normalMap and roughnessMap behave the same way as map?

6

It should be yeah.

7

hi , i tried this code and get it working but i notice it only works with scaling and not with morph influences, will it be possible to adapt for morphing ?

8

Yeah it should be possible.

The section you’ll need to change will be near this part:

    injectChunk(
      s,
      "vertexShader",
      "begin_vertex",
      `#ifdef USE_ALPHAHASH`,
      `
{
    vec4 worldPosition = modelMatrix * vec4(position, 1.0);
    vWorldPosition = worldPosition.xyz;
    vWorldNormal = normalize(mat3(modelMatrix) * normal);
    vViewDirection = cameraPosition - vWorldPosition;
}
#ifdef USE_ALPHAHASH
    `
    );

The way to figure out how to make it work with morphed vertices is to use this site:
https://ycw.github.io/three-shaderlib-skim/dist/#/latest/standard/vertex

So… it looks like we will need to get the position further down in the shader after it goes through the various animation chunks:

#include <fog_vertex>

It looks like fog_vertex is the last chunk after all morph animation has been applied…

So maybe something like:

s.vertexShader = s.vertexShader.replace('#include <fog_vertex>',`
#include <fog_vertex>
#ifdef USE_MORPHTARGETS
     vWorldPosition.xyz = transformed;  // Use the morph target "transformed" value
     vWorldNormal.xyz = transformedNormal;
    vViewDirection = cameraPosition - vWorldPosition;
#endif
`)
1 Like
9

it’s imo easier to use something like this GitHub - FarazzShaikh/THREE-CustomShaderMaterial: Extend Three.js standard materials with your own shaders!

10