javascript - 在 MeshPhongMaterial 地面和聚光灯下看不到 Collada 模型的任何阴影

Question

我多年来一直试图解决这个问题，但没有成功。我正在尝试在 MeshPhongMaterial 上向我的 .dea 模型添加阴影，但没有显示任何内容。

相机位置正确，地面不在MeshPhongMaterial中，模型转换阴影并且地面可以接收它们。

我缺少什么想法吗？

相关代码位:

function load() {
loader.load( 'models/charMesh_02_1.5.dae', function ( collada ) {
    model = collada.scene;
    model.scale.x = model.scale.y = model.scale.z = modelScale;
    model.castShadow = true;
    model.receiveShadow = true;
    modelmesh = model.children[0].children[0];
    modelmesh.castShadow = true;
    modelmesh.receiveShadow = true;
    model.updateMatrix();

    // When model is loaded, init and animate everything
    init();
    animate();
  });
}

//
// Set everything up
//
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );

// Camera
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set( 2, 2, 400 );
scene = new THREE.Scene();
scene.add(new THREE.AxisHelper() );

// Fog
scene.fog = new THREE.Fog( 0xffffff, 1, 5000 );
scene.fog.color.setHSL( 0.6, 0, 1 );

// Light
var light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
light.shadowDarkness = 0.5;
light.shadowCameraVisible = true;
light.shadowCameraNear = 2000;
light.shadowCameraFar = 3000;
light.shadowCameraLeft = -200;
light.shadowCameraRight = 200;
light.shadowCameraTop = 200;
light.shadowCameraBottom = -200;
light.position.set(-60, 1500, 1000);
scene.add(light);

// Ground
var groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
var groundMat = new THREE.MeshPhongMaterial( { ambient: 0xffffff, color: 0xffffff, specular: 0x959595 } );
groundMat.color.setHSL( 0.095, 1, 0.75 );
groundMat.shininess = 0;
groundGeo.receiveShadow = true;
groundMat.receiveShadow = true;
var ground = new THREE.Mesh( groundGeo, groundMat );
ground.rotation.x = -Math.PI/2;
ground.position.y = 0;
ground.receiveShadow = true;
scene.add( ground );

// Skydome
var vertexShader = document.getElementById( 'vertexShader' ).textContent;
var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
var uniforms = {
    topColor: {type: "c", value: new THREE.Color( 0x0077ff )},
    bottomColor: {type: "c", value: new THREE.Color( 0xffffff )},
    offset: {type: "f", value: 33},
    exponent: {type: "f", value: 0.6}
}
uniforms.topColor.value.copy(skydomeColor);
scene.fog.color.copy( uniforms.bottomColor.value );
var skyGeo = new THREE.SphereGeometry( 4000, 32, 15 );
var skyMat = new THREE.ShaderMaterial({vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide});
var sky = new THREE.Mesh(skyGeo, skyMat);
scene.add(sky);

// Add the model
scene.add(model);

// Renderer
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapCullFace = THREE.CullFaceBack;
}

Answer 1

我认为您必须遍历模型才能在每个元素上设置转换/接收阴影。
当我加载一个对象时，我会这样做:

function LoadDae(DaeFilename, name, scene) {
var loader = new THREE.ColladaLoader();

loader.load(DaeFilename, function (collada) {
 dae = collada.scene;
 dae.traverse(function (child) {
    child.castShadow = true;
    child.receiveShadow = true;
 });

 scene.add(dae);
});
}