Hi everyone! I would be grateful for any help in my question.
I load the Google 3D Tiles model, but it comes with the material of ShaderMaterial, without the support of the shadows. I was thinking add shadow support for 2 ways - by adding GLSL code to shaders to support shadows and 2 option is replacing the material with MeshStandardMaterial and adding shaders from the 3d Tiles material.
According to the second option, it was possible to change the material, but the shadows are not displayed. What could my miss? I have commented shaders code from 3d tiles material. Because with this code map is not visible. With this code map is visible
const fetchGoogleModel = async () => {
setLoading(true);
const model = await fetchDSM(quoteDetails, lat, lng, radius);
// add shadow support for google models
if (model) {
model.traverse(child => {
if (child.isMesh && child.material instanceof THREE.ShaderMaterial) {
child.castShadow = true;
child.receiveShadow = true;
const oldUniforms = {
center: child.material.uniforms.center,
rotation: child.material.uniforms.rotation,
mirrorX: child.material.uniforms.mirrorX,
mirrorY: child.material.uniforms.mirrorY,
map: child.material.uniforms.map,
};
const oldVertexShader = child.material.vertexShader;
const oldFragmentShader = child.material.fragmentShader;
const newMaterial = new THREE.MeshStandardMaterial({
// alphaTest: 0.5,
// transparent: true,
});
newMaterial.onBeforeCompile = (shader) => {
shader.uniforms.map = oldUniforms.map;
shader.uniforms.center = oldUniforms.center;
shader.uniforms.rotation = oldUniforms.rotation;
shader.uniforms.mirrorX = oldUniforms.mirrorX;
shader.uniforms.mirrorY = oldUniforms.mirrorY;
// shader.fragmentShader = oldFragmentShader;
// shader.fragmentShader.replace(
// "void main() {",
// `
// uniform vec2 center;
// uniform float rotation;
// uniform bool mirrorX;
// uniform bool mirrorY;
// uniform sampler2D map;
// varying vec2 vUv; // если GLSL 1.0, или in vec2 vUv; если WebGL2
// void main() {
// vec2 uv = vUv;
// // Apply mirroring
// if (mirrorX) {
// uv.x = center.x - (uv.x - center.x);
// }
// if (mirrorY) {
// uv.y = center.y - (uv.y - center.y);
// }
// // Apply rotation
// float cosTheta = cos(rotation);
// float sinTheta = sin(rotation);
// uv -= center; // Translate UV to the center for rotation
// uv = vec2(
// uv.x * cosTheta - uv.y * sinTheta,
// uv.x * sinTheta + uv.y * cosTheta
// );
// uv += center; // Translate UV back to its original position
// vec4 color = texture2D(map, uv);
// gl_FragColor = color;
// `
// );
// shader.vertexShader = oldVertexShader;
// shader.vertexShader.replace(
// "void main() {",
// `varying vec2 vUv;\nvoid main() {
// gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );`
// );
};
child.material = newMaterial;
const depthMaterial = new THREE.MeshDepthMaterial({
depthPacking: THREE.RGBADepthPacking,
alphaTest: 0.5,
});
depthMaterial.transparent = true;
const distanceMaterial = new THREE.MeshDistanceMaterial({
alphaTest: 0.5,
});
distanceMaterial.transparent = true;
child.customDepthMaterial = depthMaterial;
child.customDistanceMaterial = distanceMaterial;
}
});
}```