CODEWITHSUNDEEP
three.js
filip
filip

Reputation: 629

THREE.js shadow only visible using OrbitControls

I started using THREE.js today and managed to render a scene with a spaceship and some boxes. The spaceship is supposed to cast a shadow on the boxes but the shadow only shows when I use OrbitControls. If I use my own camera everything renders fine but not the shadow. How can I setup my PerspectiveCamera to show shadows?

Using OrbitControls: shadow showing

Not using OrbitControls: enter image description here

I'm a beginner and couldn't get my jsfiddle code to work but the code is here

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.copy(ship.position);
spotLight.position.z += 5;
spotLight.shadowDarkness = 0.7;
spotLight.target = ship;
spotLight.castShadow = true;

spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;
spotLight.shadowCameraNear = 1;
spotLight.shadowCameraFar = 20;
spotLight.intensity = 0.2;
spotLight.shadowCameraFov = 30;
spotLight.shadowCameraNear = true;


scene.add(spotLight);


if (useOrbitControls) {


  controls = new THREE.OrbitControls(camera);
  controls.center.clone(ship.position);
  controls.addEventListener('change', render);
}

Upvotes: 0

Views: 330

Answers (1)

filip
filip

Reputation: 629

I finally solved it. The first call to animate() was made before the 3D-model was loaded completetly due to the asynchronous nature of OBJLoader. By moving the first animate() call into the OBJLoader callback everything suddenly worked as expected.

Upvotes: 0

Related Questions