Single gltf model cast shadow on itself

Questions
1

Hi, I have this gltf model which is an altar with several objects on it (all the objects are part of the same gltf model) but I haven’t been able to make the objects cast a shadow on the altar. I tried looping an array of the objects and enable the castShadow property to each mesh but had no success. Any suggestions?

This is my project: Altar de Día de Muertos 2022

and this is my code:

import './styles.css'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'



const canvas = document.querySelector('.scene')

//ESCENA

const scene = new THREE.Scene()
scene.background = new THREE.Color('#182857')
scene.fog = new THREE.Fog(0x182857,5,8)

//MODELS

 const gltfLoader = new GLTFLoader()

 gltfLoader.load(
     './models/altar5.glb',
    (gltf) =>
    {
        let modelo = gltf.scene
        modelo.castShadow = true
        modelo.position.set(0,-1,0)
        scene.add(modelo)

        const children = [...modelo.children]
        
        for(const child of children)
        {
            child.castShadow = true
        }
    }
)



//SIZES

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () => 
{
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
})

//CAMERA

const cameraTarget = new THREE.Vector3(0,8,0)

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.set(0,0,3)
camera.lookAt(cameraTarget)
scene.add(camera)

//CONTROLS

const controls = new OrbitControls(camera,canvas)

controls.enableDamping = true
controls.dampingFactor = 0.05

controls.screenSpacePanning = false;

controls.minDistance = 1;
controls.maxDistance = 5;

controls.maxPolarAngle = Math.PI / 2;
controls.minAzimuthAngle = -Math.PI * 0.3;
controls.maxAzimuthAngle = Math.PI * 0.3;
 ... 

//LIGHT

const directionalLight = new THREE.DirectionalLight('#fff',1.5)
directionalLight.castShadow = true
//directionalLight.shadow.camera.far = 10
directionalLight.shadow.mapSize.set(1024,1024)
directionalLight.shadow.normalBias = 0.003
directionalLight.shadow.bias = 0.001
directionalLight.position.set(1,2,2)
scene.add(directionalLight)

const helper = new THREE.DirectionalLightHelper( directionalLight, 5 );
scene.add( helper );

//RENDERER

const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas
})

renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
renderer.physicallyCorrectLights = true
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ReinhardToneMapping
renderer.toneMappingExposure = 3
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap


//TICK

let currentIntersect = null

const tick = () =>{
    
    controls.update();
    renderer.render(scene,camera)
    window.requestAnimationFrame(tick)
    camera.lookAt(cameraTarget)
}

tick()
2

Object3D#receiveShadow – three.js docs (threejs.org)

3

Of course! It totally went over my head :sweat_smile: thanks!