Wrap texture around object without stretching with MeshStandardMaterial


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?


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…


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

Here ya go:


code (look in triplanar-mapping.js):



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?

It should be yeah.

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 ?

Yeah it should be possible.

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

      `#ifdef USE_ALPHAHASH`,
    vec4 worldPosition = modelMatrix * vec4(position, 1.0);
    vWorldPosition = worldPosition.xyz;
    vWorldNormal = normalize(mat3(modelMatrix) * normal);
    vViewDirection = cameraPosition - vWorldPosition;

The way to figure out how to make it work with morphed vertices is to use this site:

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>
     vWorldPosition.xyz = transformed;  // Use the morph target "transformed" value
     vWorldNormal.xyz = transformedNormal;
    vViewDirection = cameraPosition - vWorldPosition;

1 Like

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