Using a custom shader with a texture doesn’t work.
I’ve confirmed that a custom shader without a texture applies correctly to a Plane, but when I try to use a texture, I get a {isTrusted: true} error or the view doesn’t render.
const applyShaderMaterialToPlane = (planeEid: any, gridX: number, gridY: number) => {
const planeObject = world.three.entityToObject.get(planeEid);
if (!planeObject) return;
const loader = new THREE.TextureLoader();
loader.load(
textureUrl,
(texture) => {
texture.needsUpdate = true;
const material = new THREE.ShaderMaterial({
uniforms: {
texture: { value: texture },
offset: { value: new THREE.Vector2(gridX / gridWidth, gridY / gridHeight) },
scale: { value: new THREE.Vector2(1 / gridWidth, 1 / gridHeight) },
},
transparent: true,
vertexShader: \`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix \* modelViewMatrix \* vec4(position,1.0);
}
\`,
fragmentShader: \`
uniform sampler2D texture;
uniform vec2 offset;
uniform vec2 scale;
varying vec2 vUv;
void main() {
vec2 uv = vUv \* scale + offset;
gl_FragColor = texture2D(texture, uv);
}
\`,
});
planeObject.traverse((node: any) => {
if (node.isMesh) {
node.material = material;
node.material.needsUpdate = true;
}
});
},
undefined,
(err) => {
console.error('Texture load failed for', textureUrl, err);
}
);
};
​Are there any examples or solutions I can refer to?