Why shadows might not be working

Questions
1

Hello.

I think I did everything right but the shadows are not visible, why?

<script>
        // Temel sahne kurulumu
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
        const controls = new THREE.OrbitControls(camera, renderer.domElement);

        renderer.setClearColor(0xffffff, 0); // the default
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);

        // Işık ekleme
        const light = new THREE.AmbientLight(0x404040, 5); // ambient ışık
        scene.add(light);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(0, 20, 0);
        directionalLight.intensity = 1;
        directionalLight.castShadow = true; // Bu şart
        scene.add(directionalLight);

        // GLTFLoader ile araba modelini yükleme
        const loader = new THREE.GLTFLoader();
        loader.load('https://model-82dfe.web.app/araba1.glb', function (gltf) {
            const car = gltf.scene;
            scene.add(car);
            car.scale.set(1, 1, 1);
            car.position.set(0, 0, -5);

            car.castShadow = true;

            // --- Burada tüm alt meshlere castShadow ayarlıyoruz
            car.traverse(function (child) {
                if (child.isMesh) {
                    console.log(child);
                    child.castShadow = true;
                    child.receiveShadow = true; // sadece gölge versin
                }
            });
        }, undefined, function (error) {
            console.error(error);
        });

        directionalLight.shadow.intensity = 0.5;

        // HDR yükleme
        new THREE.RGBELoader()
            .load(
                'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/equirectangular/royal_esplanade_1k.hdr',
                function (texture) {
                    texture.mapping = THREE.EquirectangularReflectionMapping;
                    scene.environment = texture;
                },
                undefined,
                function (error) {
                    console.error('HDR yüklenirken hata oluştu:', error);
                }
            );

        // Kamera ayarları
        camera.position.z = -30;
        camera.position.y = 8.386;
        camera.position.x = -0.356;

        // Yol
        const roadGeometry = new THREE.PlaneGeometry(15, 200);
        const roadMaterial = new THREE.MeshStandardMaterial({
            color: 0xffffff,   // Beyaz yol
            metalness: 0,    // Biraz metalik yaparsak yansıma olur
            roughness: 0     // Düşük roughness daha parlak yansımalı yüzey demek
        });
        const road = new THREE.Mesh(roadGeometry, roadMaterial);
        road.rotation.x = -Math.PI / 2; // Yatay düzlemi dik yap
        road.position.y = -0.01;
        // Yol gölge alır
        scene.add(road);
        road.receiveShadow = true;
        // Şeritler
        const stripeMaterial = new THREE.MeshStandardMaterial({ color: 0x000000 });

        const leftStripe = new THREE.Mesh(new THREE.PlaneGeometry(0.1, 100), stripeMaterial);
        leftStripe.position.x = -9.5;
        leftStripe.position.y = 0.0;
        leftStripe.rotation.x = -Math.PI / 2;
        leftStripe.receiveShadow = true; // Eklendi
        scene.add(leftStripe);

        const rightStripe = new THREE.Mesh(new THREE.PlaneGeometry(0.1, 100), stripeMaterial);
        rightStripe.position.x = 9.5;
        rightStripe.position.y = 0.0;
        rightStripe.rotation.x = -Math.PI / 2;
        rightStripe.receiveShadow = true; // Eklendi
        scene.add(rightStripe);

        // Gölge ayarları
        renderer.shadowMap.enabled = true;    // Gölge haritası etkinleştir
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;  // Yumuşak gölge kullan

        directionalLight.shadow.camera.left = -20;
        directionalLight.shadow.camera.right = 20;
        directionalLight.shadow.camera.top = 20;
        directionalLight.shadow.camera.bottom = -20;
        directionalLight.shadow.camera.near = 0.1;
        directionalLight.shadow.camera.far = 100;


        directionalLight.castShadow = true; // Yönlü ışığın gölge oluşturmasını sağla
        directionalLight.shadow.mapSize.width = 1024;  // Gölge çözünürlüğü
        directionalLight.shadow.mapSize.height = 1024;  // Yumuşak gölge
        directionalLight.shadow.bias = -0.005;  // Gölgeyi biraz kaydır

        scene.castShadow = true;
        scene.receiveShadow = true;
        //Create a helper for the shadow camera (optional)
        const helper = new THREE.CameraHelper(directionalLight.shadow.camera);
        scene.add(helper);
        // Animasyon döngüsü
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();

        // Pencere yeniden boyutlandırıldığında renderer'ı yeniden boyutlandır
        window.addEventListener('resize', function () {
            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
        });
    </script>
2

You have an ambiant light at 5 intensity. That’s a lot.
Also make sure your HDR environment emission isn’t killing the shadows as well.

Start by replacing them to see if it change the scene.
I see you have helpers activated, so I suppose your objects are correctly placed inside the shadowmap range. But to test it better, move your light to avoid 90° zenith angle, you want large shadows to debug this.

3 Likes