Hi, I am new to three js and also very much new to programming. I see there are a few conversations that have taken place already on the same topic but I still cant get shadows to work in my basic scene. If anyone can tell me what I am missing here it’d be much appreciated. All Im trying to do is get my model to cast shadows on itself. Its probably a very simple fix. Thanks in advance, Nwebgl_loader_gltf - Copy.html (3.9 KB)
Try setting the following properties to ‘true’:
mesh.castShadow = true;
mesh.receiveShadow = true;
import * as THREE from ‘…/build/three.module.js’;
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { RGBELoader } from './jsm/loaders/RGBELoader.js';
let camera, scene, renderer;
init();
render();
function init() {
const container = document.createElement('div');
document.body.appendChild(container);
// Camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 40.000Preformatted text);
camera.position.set(1.500, 1.600, 10.000);
scene = new THREE.Scene();
new RGBELoader()
// Background
.setPath('textures/equirectangular/')
.load('sunset_forest_1k.hdr', function (texture) {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
render();
// Light
const dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(10, 10, 5);
dirLight.castShadow = true;
dirLight.shadow.camera.top = 2;
dirLight.shadow.camera.bottom = - 2;
dirLight.shadow.camera.left = - 2;
dirLight.shadow.camera.right = 2;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 20;
scene.add(dirLight);
// The model
const loader = new GLTFLoader().setPath('models/gltf/Shed/');
loader.load('Shed-FULLMAT.gltf', function (gltf) {
gltf.scene.traverse(function (child) {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
scene.add(gltf.scene);
render();
});
});
// Renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = true;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement);
// Controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render); // use if there is no animation loop
controls.target = new THREE.Vector3(0, 1.6, 0);
controls.minDistance = 0.001;
controls.maxDistance = 20.000;
controls.maxPolarAngle = Math.PI / 2;
controls.update();
controls.screenSpacePanning = false;
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
//
function render() {
renderer.render(scene, camera);
}
</script>
Thanks @vielzutun.ch, I had it down as:
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
The bit I was missing was ‘shadowMap’ from the renderer lines:
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = true;
Still not entirely happy with the outcome and need to get to grips with the lighting set up. Is it problematic to use HDR with other lighting ie Directional and Ambient lighting? Im guessing the directional,light is causing the harsh uneven shadow?
Also not sure why the inside of my shed is more illuminated the=than the exterior?
