three.js - 当我在 udacity 中完成类(class)练习并想在three.js中添加阴影时遇到一些问题？

Question

我正在 udacity 的视频类(class)中学习three.js，当我尝试完成有关“three.js中的阴影”(exercise's link)的练习时遇到问题。我按照视频的说明添加了一些代码在练习中，但我没有得到预期的效果。没有创建任何阴影 code and result of finished exercise on jsfiddle 。

////////////////////////////////////////////////////////////////////////////////
// Adding shadows to a spotlight
////////////////////////////////////////////////////////////////////////////////
/* global THREE, Coordinates, document, window, dat */
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import $ from "jquery";
// import themes from './themes'
// import { Coordinates as  CoordinateCreater } from './Coordinates';
// const  Coordinates = new CoordinateCreater({}, themes.dark);
import * as dat from 'dat.gui';

var camera, scene, renderer;
var cameraControls;
var effectController;
var clock = new THREE.Clock();

var cylinder, sphere, cube;

var bevelRadius = 1.9;  // TODO: 2.0 causes some geometry bug.

var headlight;

var spotlight;
// this exercise is based on old version of three.js, and current version of three.js do not turn on shadows by this way.

function init() {
    var canvasWidth = 846;
    var canvasHeight = 494;
    // For grading the window is fixed in size; here's general code:
    //var canvasWidth = window.innerWidth;
    //var canvasHeight = window.innerHeight;

    // RENDERER
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    renderer.setSize(canvasWidth, canvasHeight);
    renderer.setClearColor( 0x0, 1.0 ); 
    renderer.shadowMapEnabled = true; // this is the old version api and it seems do not work in current version
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShado

    // CAMERA
    camera = new THREE.PerspectiveCamera( 35, canvasWidth/ canvasHeight, 1, 4000 );
    camera.position.set( -1160, 350, -600 );

    // CONTROLS
    cameraControls = new OrbitControls(camera, renderer.domElement);
    cameraControls.target.set(0,310,0);
}

function fillScene() {
    scene = new THREE.Scene();
    scene.fog = new THREE.Fog( 0x0, 2000, 4000 );

    // LIGHTS
    scene.add( new THREE.AmbientLight( 0x222222 ) );

    headlight = new THREE.PointLight( 0x606060, 1.0 );
    scene.add( headlight );

    spotlight = new THREE.SpotLight( 0xFFFFFF, 1.0 );
    spotlight.position.set( -400, 1200, 300 );
    spotlight.angle = 20 * Math.PI / 180;
    spotlight.exponent = 1;
    spotlight.target.position.set( 0, 200, 0 );
    spotlight.castShadow = true;
    scene.add( spotlight );

    var lightSphere = new THREE.Mesh(
        new THREE.SphereGeometry( 10, 12, 6 ),
        new THREE.MeshBasicMaterial() );
    lightSphere.position.copy( spotlight.position );

    scene.add( lightSphere );

    // GROUND
    // put grid lines every 10000/100 = 100 units
    var solidGround = new THREE.Mesh(
        new THREE.PlaneGeometry( 10000, 10000 ),
        new THREE.MeshPhongMaterial({ color: 0xFFFFFF,
            // polygonOffset moves the plane back from the eye a bit, so that the lines on top of
            // the grid do not have z-fighting with the grid:
            // Factor == 1 moves it back relative to the slope (more on-edge means move back farther)
            // Units == 4 is a fixed amount to move back, and 4 is usually a good value
            polygonOffset: true, polygonOffsetFactor: 1.0, polygonOffsetUnits: 4.0
        }));
    solidGround.rotation.x = -Math.PI / 2;
    solidGround.receiveShadow = true;
    scene.add( solidGround );

    //////////////////////////////
    // Bird
    var bird = new THREE.Object3D();
    createDrinkingBird( bird );

    scene.add( bird );
}

// Supporting frame for the bird - base + legs + feet
function createSupport( bsupport ) {
    var legMaterial = new THREE.MeshPhongMaterial( { shininess: 4 } );
    legMaterial.color.setHex( 0xAdA79b );
    legMaterial.specular.setRGB( 0.5, 0.5, 0.5 );
    legMaterial.color.copy( legMaterial.color );

    var footMaterial = new THREE.MeshPhongMaterial( { color: 0x960f0b, shininess: 30 } );
    footMaterial.specular.setRGB( 0.5, 0.5, 0.5 );
    footMaterial.color.copy( footMaterial.color );

    // base
    cube = new THREE.Mesh(
        new THREE.CubeGeometry( 20+64+110, 4, 2*77+12, bevelRadius ), footMaterial );
    cube.position.x = -45;  // (20+32) - half of width (20+64+110)/2
    cube.position.y = 4/2;  // half of height
    cube.position.z = 0;    // centered at origin
    bsupport.add( cube );

    // feet
    cube = new THREE.Mesh(
        new THREE.CubeGeometry( 20+64+110, 52, 6, bevelRadius ), footMaterial );
    cube.position.x = -45;  // (20+32) - half of width (20+64+110)/2
    cube.position.y = 52/2; // half of height
    cube.position.z = 77 + 6/2; // offset 77 + half of depth 6/2
    bsupport.add( cube );

    cube = new THREE.Mesh(
        new THREE.CubeGeometry( 20+64+110, 52, 6, bevelRadius ), footMaterial );
    cube.position.x = -45;  // (20+32) - half of width (20+64+110)/2
    cube.position.y = 52/2; // half of height
    cube.position.z = -(77 + 6/2);  // negative offset 77 + half of depth 6/2
    bsupport.add( cube );

    cube = new THREE.Mesh(
        new THREE.CubeGeometry( 64, 104, 6, bevelRadius ), footMaterial );
    cube.position.x = 0;    // centered on origin along X
    cube.position.y = 104/2;
    cube.position.z = 77 + 6/2; // negative offset 77 + half of depth 6/2
    bsupport.add( cube );

    cube = new THREE.Mesh(
        new THREE.CubeGeometry( 64, 104, 6, bevelRadius ), footMaterial );
    cube.position.x = 0;    // centered on origin along X
    cube.position.y = 104/2;
    cube.position.z = -(77 + 6/2);  // negative offset 77 + half of depth 6/2
    bsupport.add( cube );

    // legs
    cube = new THREE.Mesh(
        new THREE.CubeGeometry( 60, 282+4, 4, bevelRadius ), legMaterial );
    cube.position.x = 0;    // centered on origin along X
    cube.position.y = 104 + 282/2 - 2;
    cube.position.z = 77 + 6/2; // negative offset 77 + half of depth 6/2
    bsupport.add( cube );

    cube = new THREE.Mesh(
        new THREE.CubeGeometry( 60, 282+4, 4, bevelRadius ), legMaterial );
    cube.position.x = 0;    // centered on origin along X
    cube.position.y = 104 + 282/2 - 2;
    cube.position.z = -(77 + 6/2);  // negative offset 77 + half of depth 6/2
    bsupport.add( cube );
}

// Body of the bird - body and the connector of body and head
function createBody(bbody) {
    var bodyMaterial = new THREE.MeshPhongMaterial( { shininess: 100 } );
    bodyMaterial.color.setRGB( 31/255, 86/255, 169/255 );
    bodyMaterial.specular.setRGB( 0.5, 0.5, 0.5 );
    bodyMaterial.color.copy( bodyMaterial.color );

    var glassMaterial = new THREE.MeshPhongMaterial( { color: 0x0, specular: 0xFFFFFF, shininess: 100, opacity: 0.3, transparent: true } );
    glassMaterial.color.copy( glassMaterial.color );

    var crossbarMaterial = new THREE.MeshPhongMaterial( { color: 0x808080, specular: 0xFFFFFF, shininess: 400 } );
    crossbarMaterial.color.copy( crossbarMaterial.color );

    // body
    sphere = new THREE.Mesh(
        new THREE.SphereGeometry( 104/2, 32, 16, 0, Math.PI * 2, Math.PI/2, Math.PI ), bodyMaterial );
    sphere.position.x = 0;
    sphere.position.y = 160;
    sphere.position.z = 0;
    bbody.add( sphere );

    // cap for top of hemisphere
    cylinder = new THREE.Mesh(
        new THREE.CylinderGeometry( 104/2, 104/2, 0, 32 ), bodyMaterial );
    cylinder.position.x = 0;
    cylinder.position.y = 160;
    cylinder.position.z = 0;
    bbody.add( cylinder );

    cylinder = new THREE.Mesh(
        new THREE.CylinderGeometry( 12/2, 12/2, 390 - 100, 32 ), bodyMaterial );
    cylinder.position.x = 0;
    cylinder.position.y = 160 + 390/2 - 100;
    cylinder.position.z = 0;
    bbody.add( cylinder );

    // glass stem
    sphere = new THREE.Mesh(
        new THREE.SphereGeometry( 116/2, 32, 16 ), glassMaterial );
    sphere.position.x = 0;
    sphere.position.y = 160;
    sphere.position.z = 0;
    bbody.add( sphere );

    cylinder = new THREE.Mesh(
        new THREE.CylinderGeometry( 24/2, 24/2, 390, 32 ), glassMaterial );
    cylinder.position.x = 0;
    cylinder.position.y = 160 + 390/2;
    cylinder.position.z = 0;
    bbody.add( cylinder );

    // crossbar
    cylinder = new THREE.Mesh(
        new THREE.CylinderGeometry( 5, 5, 200, 32 ), crossbarMaterial );
    cylinder.position.set( 0, 360, 0 );
    cylinder.rotation.x = 90 * Math.PI / 180.0;
    bbody.add( cylinder );
}

// Head of the bird - head + hat
function createHead(bhead) {
    var headMaterial = new THREE.MeshLambertMaterial( );
    headMaterial.color.r = 104/255;
    headMaterial.color.g = 1/255;
    headMaterial.color.b = 5/255;
    headMaterial.color.copy( headMaterial.color );

    var hatMaterial = new THREE.MeshPhongMaterial( { shininess: 100 } );
    hatMaterial.color.r = 24/255;
    hatMaterial.color.g = 38/255;
    hatMaterial.color.b = 77/255;
    hatMaterial.specular.setRGB( 0.5, 0.5, 0.5 );
    hatMaterial.color.copy( hatMaterial.color );

    var eyeMaterial = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x303030, shininess: 4 } );
    eyeMaterial.color.copy( eyeMaterial.color );

    // head
    sphere = new THREE.Mesh(
        new THREE.SphereGeometry( 104/2, 32, 16 ), headMaterial );
    sphere.position.x = 0;
    sphere.position.y = 160 + 390;
    sphere.position.z = 0;
    bhead.add( sphere );

    // hat
    cylinder = new THREE.Mesh(
        new THREE.CylinderGeometry( 142/2, 142/2, 10, 32 ), hatMaterial );
    cylinder.position.x = 0;
    cylinder.position.y = 160 + 390 + 40 + 10/2;
    cylinder.position.z = 0;
    bhead.add( cylinder );

    cylinder = new THREE.Mesh(
        new THREE.CylinderGeometry( 80/2, 80/2, 70, 32 ), hatMaterial );
    cylinder.position.x = 0;
    cylinder.position.y = 160 + 390 + 40 + 10 + 70/2;
    cylinder.position.z = 0;
    bhead.add( cylinder );

    // nose
    cylinder = new THREE.Mesh(
        new THREE.CylinderGeometry( 6, 14, 70, 32 ), headMaterial );
    cylinder.position.set( -70, 530, 0 );
    cylinder.rotation.z = 90 * Math.PI / 180.0;
    bhead.add( cylinder );

    // eyes
    var sphGeom = new THREE.SphereGeometry( 10, 32, 16 );

    // left eye
    sphere = new THREE.Mesh( sphGeom, eyeMaterial );
    sphere.position.set( -48, 560, 0 );
    var eye = new THREE.Object3D();
    eye.add( sphere );
    eye.rotation.y = 20 * Math.PI / 180.0;
    bhead.add( eye );

    // right eye
    sphere = new THREE.Mesh( sphGeom, eyeMaterial );
    sphere.position.set( -48, 560, 0 );
    eye = new THREE.Object3D();
    eye.add( sphere );
    eye.rotation.y = -20 * Math.PI / 180.0;
    bhead.add( eye );
}

function createDrinkingBird(bbird) {
    var support = new THREE.Object3D();
    var body = new THREE.Object3D();
    var head = new THREE.Object3D();

    // MODELS
    // base + legs + feet
    createSupport(support);

    // body + body/head connector
    createBody(body);

    // head + hat
    createHead(head);

    bbird.add(support);
    bbird.add(body);
    bbird.add(head);

    // go through all objects and set the meshes (only)
    // so that they cast shadows
    bbird.traverse( function ( object ) {
        if ( object instanceof THREE.Mesh ) {
            object.castShadow = true;
            object.receiveShadow = true;
        }
    } );
}

function setupGui() {
    effectController = {
        shadowBias: 0.00001 // hack to make dat.GUI show decimal places
    };

    var gui = new dat.GUI();
    gui.add( effectController, "shadowBias", -0.01, 0.01 ).name("shadow bias");
    gui.close();
}

function drawHelpers() {
    // Coordinates.drawGrid({size:10000,scale:0.01});
}

function addToDOM() {
    var container = document.getElementById('container');
    var canvas = container.getElementsByTagName('canvas');
    if (canvas.length>0) {
        container.removeChild(canvas[0]);
    }
    container.appendChild( renderer.domElement );
}

function animate() {
    window.requestAnimationFrame(animate);
    render();
}

function render() {
    var delta = clock.getDelta();
    cameraControls.update(delta);

    headlight.position.copy( camera.position );
    // VM2636 three.module.js:49433 THREE.Light: .shadowBias is now .shadow.bias.
    spotlight.shadow.bias = effectController.shadowBias;
    renderer.render(scene, camera);
}

try {
    init();
    fillScene();
    setupGui();
    drawHelpers();
    addToDOM();
    animate();
} catch(e) {
    var errorReport = "Your program encountered an unrecoverable error, can not draw on canvas. Error was:<br/><br/>";
    $('#container').append(errorReport+e);
}

一开始我还以为是一些api变了，但是按照官方文档添加了一些代码后，没有任何 react 。 official document demo I follow .所以我想知道我的代码的哪一部分是错误的？有人可以帮我吗？提前致谢。

Answer 1

问题是阴影相机的聚光灯视锥体太小了。我建议您使用以下代码行来调试相机的视锥体:

scene.add( new THREE.CameraHelper( light.shadow.camera ) );

这将可视化场景中的视锥体，并且错误变得明显。您可以通过增加 spotlight.shadow.camera.far 来修复您的代码。到 2500 的值.

更新 fiddle : https://jsfiddle.net/dty0ewcp/