Three.js阴影对应于边界框，而不是实际的模型形状

Question

我正试图为恐龙模型（Three.js JSON格式）获得正确的阴影。

阴影显示，但它是矩形的，好像它认为恐龙模型只是一个简单的长方体（如下面的屏幕抓图）。

如何生成与恐龙的实际形状相对应的阴影？

我已经在Blender中检查过OBJ模型中没有可见的包含框，我使用Three.js OBJ到JSON转换器从中创建了JSON模型文件。

以下是相关代码段的一些片段：

/* Dinosaur! */

var loader = new THREE.JSONLoader();

var filePath = 'models/trex/trex.js';

loader.load(filePath, function(geometry, materials) {

    mesh = new THREE.Mesh( geometry,
        new THREE.MeshFaceMaterial( materials ) );

    mesh.scale.set(1000, 1000, 1000);
    mesh.position.set( 0, -75, 0 );
    mesh.rotation.y = Math.PI;
    mesh.castShadow = true;

    scene.add( mesh );

});

...

/* Lights */

var ambientLight = new THREE.AmbientLight( 0xFFFFFF );
scene.add( ambientLight );

var directionalLight = new THREE.DirectionalLight( 0xeeeeff, 0.5 );
directionalLight.position.set(0, 0, 1);
scene.add( directionalLight );

var spotlight = new THREE.SpotLight(0xFFFFFF, 0.2, 2000);
spotlight.position.set( 50, 100, 0 );
spotlight.target.position.set( 0, 0, 0 );
spotlight.castShadow = true;
scene.add( spotlight );

...

/* Renderer */

renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);
renderer.setSize(renderWidth, renderHeight);

renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;

container.appendChild(renderer.domElement);

...

/* Terrain */

var img = new Image();
img.onload = function() {

    heightData = buildHeightData(img);

    var plane = new THREE.PlaneGeometry( 100, 100, HEIGHT_MAP_SIZE-1, HEIGHT_MAP_SIZE-1 );

    var l = plane.vertices.length;

    for( var i=0; i < l; i++ ) {
        // We change z because by default the plane will be placed vertically. 
        // We rotate it afterwards (so the effect on z will end up being the 
        // effect on y).
        plane.vertices[i].z = heightData[i] * 10;
    }

    terrainMesh = buildMesh(
        {
            geometry: plane,
            scale: 100,
            x: 0,
            y: -370,
            z: -1050,
            material: terrainMaterial
        } );

    terrainMesh.rotation.x = -Math.PI / 2;
    terrainMesh.receiveShadow = true;
    scene.add( terrainMesh );

};
img.src = 'img/heightmap.jpg';

P.S。我正在使用Three.js v66。

Answer 1

糟糕。我得出了一个错误的结论。这只是因为聚光灯不够高（参见新的screengrab，shadowCameraVisible = true）。