No self-shadow on a model

Questions
,
1

Hello,
I’ve been having troubles trying to get the point light to cast self-shadows on the door,
like the door knob and frame shadow being visible on the door.
Iam using model-viewer and using the registerEffect Composer to access the renderer.
Iam traversing the scene and setting all meshes to recieve and cast shadow, setting light to cast shadow, and enabling and setting the shadowmap on the renderer.
The door casts shadow on the test plane perfectly, but not casting shadows upon itself.
Am i missing something, or is this something model-viewer also controls separetly?

image
image541×355 30.6 KB

this is my current render,and iam trying to achieve shadows like these(minus ssao):

image
image243×278 44.9 KB

code:

import * as THREE from 'three';

const viewer = document.getElementById('effectsViewer');

const ShadowComposer = (() => {
  let renderer, scene, camera, added = false;

  function setup() {
    if (!scene || added) return;
    added = true;

    const mainGroup = new THREE.Group();
    mainGroup.name = 'CustomMainGroup';
    mainGroup.position.y = 0.5;
    scene.add(mainGroup);

    const spotLight = new THREE.SpotLight(0xffffff, 10, 8, Math.PI / 4, 0.2);
    spotLight.name = 'CustomShadowSpot';
    spotLight.position.set(0, 2, 2);
    spotLight.castShadow = true;
    spotLight.shadow.mapSize.set(1024, 1024);
    spotLight.shadow.camera.near = 0.1;
    spotLight.shadow.camera.far = 10;
    mainGroup.add(spotLight, new THREE.SpotLightHelper(spotLight));

  
    scene.traverse(obj => {
      if (obj.isMesh) {
        obj.castShadow = true;
        obj.receiveShadow = true;
      }
    });

    const ground = new THREE.Mesh(
      new THREE.PlaneGeometry(20, 20),
      new THREE.MeshStandardMaterial({ color: 0x888888 })
    );
    ground.rotation.x = -Math.PI / 2;
    ground.receiveShadow = true;
    scene.add(ground);
  }

  return {
   
    setRenderer(r) {
      renderer = r;
      renderer.shadowMap.enabled = true;
      renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    },
   
    setMainScene(s) {
      scene = s;
      setup();
    },
 
    setMainCamera(c) {
      camera = c;
    },
 
    setSize() {
    },
 
    beforeRender() {
    },
 
    render() {
      if (renderer && scene && camera) renderer.render(scene, camera);
    },
    
    afterRender() {
    },
 
    dispose() {
    }
  };
})();


viewer.registerEffectComposer(ShadowComposer);

viewer.addEventListener('load', () => {
  console.log('Model loaded — shadow composer active.');
});
2 Likes
2

Adjusting the light.shadow.bias might fix it.. try values like .001 or -.001 in that range until you see the shadows, or until you start seeing shadow acne.

If tweaking bias still doesn’t make shadows show up…
try traversing and logging mesh.material to make sure the materials are all StandardMaterial or similar and aren’t getting exported as ShaderMaterial or PhysicalMaterial, or some material type that might not handle shadows correctly.

2 Likes
3

I found out that i was traversing and setting the cast and recieve before the model was even loaded by model-viewer, so after quick fix it started working… took me a while

1 Like