无法添加阴影

Question

我刚开始学习three.js但是无法在平面上放置物体的阴影。所有的东西都在工作，但物体没有在平面上投射它们的影子。这是我的 js 文件。我不知道代码中缺少什么。 HTML 和 javascript 文件随附。

<!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);
    }

Answer 1

您的代码中有错字。不是 renderer.shadowMap.Enabled，而是 renderer.shadowMap.enabled。完整代码：

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>

无法添加阴影

Unable to add shadows

javascript

three.js