Question

0

378

Views

Unable to add shadows

I just started learning three.js but was unable to put shadows of objects on the plane. All things are working, but objects are not casting their shadow on the plane. Here is my js file. I don't know what is missing in the code. Both HTML and javascript files are attached herewith.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script type = "text/javascript" src="../../../libs/three/three.js"></script>
    <script type="text/javascript" src = "../../../libs/three/controls/TrackballControls.js"></script>
    <script type="text/javascript" src = "../javascript/first_scene.js"></script>

  <title>First_Scene</title>
  </head>
  <body>

    <div id ="webgl-output"></div>
     <script type="text/javascript">
      (function(){
        init()
      }
    )();
    </script>
  </body>
</html>

    function init()
    {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth /
    window.innerHeight,0.1, 1000);
    var renderer =new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.Enabled = true;
    var axes = new THREE.AxesHelper(20);
    scene.add(axes);
    var planeGeometry = new THREE.PlaneGeometry(60,20,1,1)
    var planeMaterial = new THREE.MeshLambertMaterial({
      color: 0xffffff
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.set(15,0,0);
    scene.add(plane); 
    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.castShadow = true;
    cube.position.set(-4, 4, 0);
    scene.add(cube);
    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    var sphereMaterial = new THREE.MeshLambertMaterial({
        color: 0x7777ff,
    });
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.castShadow = true;
    sphere.position.set(20, 0, 2);
    sphere.castShadow = true;
    scene.add(sphere);
    camera.position.set(-30, 40, 30);
    camera.lookAt(scene.position);
    var ambienLight = new THREE.AmbientLight(0x353535);
    scene.add(ambienLight);
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 20, -5);
    spotLight.castShadow = true;
    scene.add(spotLight);  
    document.getElementById("webgl-output").appendChild(renderer.domElement);
    renderer.render(scene, camera);
    }

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T06:07:16.872Z

There is a typo in your code. It's not renderer.shadowMap.Enabled but renderer.shadowMap.enabled. Full code:

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth /
  window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;

var axes = new THREE.AxesHelper(20);
scene.add(axes);

var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1)
var planeMaterial = new THREE.MeshLambertMaterial({
  color: 0xffffff
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15, 0, 0);
scene.add(plane);

var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
  color: 0xff0000
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.set(-4, 4, 0);
scene.add(cube);

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({
  color: 0x7777ff,
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true;
sphere.position.set(20, 0, 2);
scene.add(sphere);

camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);

var ambienLight = new THREE.AmbientLight(0x353535);
scene.add(ambienLight);

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-10, 20, -5);
spotLight.castShadow = true;
scene.add(spotLight);

document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

body {
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

0

378

Unable to add shadows

1 answers

0

Find remote jobs

Andres GPT