Why might shadows not be added to the scene?

Questions
1

Hello, my codes are as follows

import * as THREE from 'three';

import { LightProbeGenerator } from 'three/addons/lights/LightProbeGenerator.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 750);


const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor(0xffffff, 0);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;

let lightProbe;

lightProbe = new THREE.LightProbe();

let cubeTexture;

const genCubeUrls = function (prefix, postfix) {

	return [
		prefix + 'posx' + postfix, prefix + 'negx' + postfix,
		prefix + 'posy' + postfix, prefix + 'negy' + postfix,
		prefix + 'posz' + postfix, prefix + 'negz' + postfix
	];

};

const urls = genCubeUrls('textures/cubeMaps/', '.jpg');

new THREE.CubeTextureLoader().load(urls, function (cubeTexture) {

	
	scene.castShadow = true;
	scene.receiveShadow = true;
	scene.environment = cubeTexture;


	lightProbe.copy(LightProbeGenerator.fromCubeTexture(cubeTexture));
});

lightProbe.add(scene);

const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', renderer);
controls.minDistance = 0.1;
controls.maxDistance = 75;
controls.enablePan = false;

const loader = new GLTFLoader();

// Optional: Provide a DRACOLoader instance to decode compressed mesh data

var model;
// Load a glTF resource
loader.load(
	// resource URL
	'room.gltf',
	// called when the resource is loaded
	function (gltf) {






		gltf.animations; // Array<THREE.AnimationClip>
		gltf.scene; // THREE.Group
		model = gltf.scene;
		gltf.scenes; // Array<THREE.Group>
		gltf.cameras; // Array<THREE.Camera>
		gltf.asset; // Object

		gltf.receiveShadow = true;

		gltf.scene.traverse(function (child) {

			if (child.isMesh) {

				child.castShadow = true;

				child.receiveShadow = true;

			}

		});

		scene.add(gltf.scene);

		

		let cam1 = scene.getObjectByName("Door1_001");
		cam1.material.transmission = 0.89;

		render();

	},
	// called while loading is progressing
	function (xhr) {

		console.log((xhr.loaded / xhr.total * 100) + '% loaded');

	},
	// called when loading has errors
	function (error) {

		console.log('An error happened');

	}
);



let directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(4, 1, 0);
directionalLight.castShadow = true;



//Set up shadow properties for the light
directionalLight.castShadow = true;



scene.add(directionalLight);

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

camera.position.z = 5;






scene.environment = cubeTexture;

function animate() {
	requestAnimationFrame(animate);



	renderer.render(scene, camera);
}

animate();

I applied everything I saw on the internet, but the shadows still do not appear, what could be the reason?

2

Hi!
Is there renderer.shadowMap.enabled = true; line in your code?

2 Likes
3

thank you. it solved my problem

1 Like