Shadows not working

Questions
,
1

Hi!
First time using Three.js and i am trying to display this tree model that i got from here: tree model. But the problem is that the shadows are not rendering and in general the whole lighting of the scene looks kinda weird. I am trying to make the scene look similar to the one in sketchfab.

let container;
let camera;
let renderer;
let scene;
let tree;
let controls;

function init() {
  //create scene
  scene = new THREE.Scene();

  //camera setup
  camera = new THREE.PerspectiveCamera(
    60,
    window.innerWidth / window.innerHeight,
    0.1,
    10000
  );
  camera.position.set(400, 400, 100);

  //renderer
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  const pmremGenerator = new THREE.PMREMGenerator(renderer);
  pmremGenerator.compileEquirectangularShader();

  container = document.querySelector(".scene");
  container.appendChild(renderer.domElement);

  // controls
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.maxPolarAngle = Math.PI / 2;

  //lights
  var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(200, 100, 0);
  directionalLight.castShadow = true;
  scene.add(directionalLight);

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

  //ground
  const ground = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(1000, 1000),
    new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false })
  );
  ground.rotation.x = -Math.PI / 2;
  ground.receiveShadow = true;
  scene.add(ground);

  //load hdr image
  new THREE.RGBELoader()
    .setDataType(THREE.UnsignedByteType)
    .load("./lilienstein_1k.hdr", function (texture) {
      const envMap = pmremGenerator.fromEquirectangular(texture).texture;
      scene.environment = envMap;
      texture.dispose();
      pmremGenerator.dispose();
    });

  //load model
  let tree;
  let loader = new THREE.GLTFLoader();
  loader.load("./3dModel/scene.gltf", function (gltf) {
    tree = gltf.scene;
    tree.scale.set(0.3, 0.3, 0.3);
    tree.castShadow = true;
    tree.receiveShadow = false;
    scene.add(tree);
  });
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

init();
animate();

This is how it currently looks like

tree
tree2086×1168 233 KB

Thanks!

2

What you expect your tree mesh to be is likely not the same as gltf.scene as your code suggests.
gltf.scene is likely to be a THREE.Group, and not a mesh.
try traversing the gltf.scene and enable shadows on all the child meshes.

e.g.,

gltf.scene.traverse(function (child) {
   if (child.isMesh) {
     child.castShadow = true;
   }
});

also your scene seems very large, so check the camera near, far, left, right, top, bottom of the shadows camera frustum.

And instead of using the directional light helper, use the camera helper on your directional lights shadow.

const helper = new THREE.CameraHelper(directionalLight.shadow.camera)
scene.add(helper)

I have an example here
Directional Light Shadow - Three.js Tutorials (sbcode.net)

3

It works now, thanks for the answer.