在三个js中确定添加阴影所需的表面

Question

我最近正在学习三个js，我试图通过下载模型来模仿下面链接中出现的场景

https://sketchfab.com/3d-models/ccity-building-set-1-a2d5c7bfcc2148fb8994864c43dfcc97

我已经下载了 gltf 模型并尝试为场景中的所有孩子添加阴影 事情就这样发生了。不太好看，路面也都有阴影

所以我检查了gltf场景中的细节。我仅将阴影应用于非混凝土表面的表面。现在看起来像这样。建筑物上的静止表面正在产生阴影，并且一些建筑物的阴影丢失了

下面是我正在使用的代码。

var scene = new THREE.Scene();
        const modelUrl = new URL('./assets/ground/scene.gltf', import.meta.url);
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        // renderer.setClearColor(0xA3A3A3);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
        renderer.gammaOutput = true;
        renderer.gammaFactor = 2.2;

        refContainer.current && refContainer.current.appendChild(renderer.domElement);

        const orbit = new OrbitControls(camera, renderer.domElement);
        camera.position.set(100, 100, -100);

        // camera.updateMatrix();
        orbit.update();


        const ambientLight = new THREE.AmbientLight(0x333333);
        scene.add(ambientLight);

        var spotLight = new THREE.SpotLight( 0xFBCEB1, 10000 );
        spotLight.position.set( -500, 200, 100 );
        spotLight.angle = 0.4;
        spotLight.penumbra = 0.05;
        spotLight.decay = 1;
        spotLight.distance = 2000;

        spotLight.castShadow = true;
        scene.add( spotLight );

        spotLight.target.position.set( 3, 0, - 3 );
        scene.add( spotLight.target );
        const helper = new THREE.DirectionalLightHelper( spotLight, 5 );
        scene.add( helper );


        const assetLoader = new GLTFLoader();


        assetLoader.load(modelUrl.href, function(gltf) {
            const model = gltf.scene;
            model.scale.set(0.01,0.01,0.01);
            model.position.z = 100
            model.position.x = 100
            model.traverse( function( child ) { 

                if ( child.isMesh ) {
                    console.log(child)
                    var childName = child.name
                    if(!childName.includes('ConcreteBlock')) {
                        child.castShadow = true;
                        child.receiveShadow = true;
                    }
                    
            
                }
            
            } );
            scene.add(model);
            
        }, undefined, function(error) {
            console.error(error);
        });

        
        function animate() {
            // requestAnimationFrame( animate );
            renderer.render(scene, camera);
        }

        renderer.setAnimationLoop(animate);
        animate();

如何识别需要阴影的表面，使场景看起来像上面的链接？？？我以正确的方式做吗？？

Answer 1

改变

 if ( child.isMesh ) {
      console.log(child)
      var childName = child.name
      if(!childName.includes('ConcreteBlock')) {
      child.castShadow = true;
      child.receiveShadow = true;
    }
  }

到

  if ( child.isMesh ) {
    meshes.push(child)
    child.castShadow = true;
    child.receiveShadow = true;
  }

因为

if(!childName.includes('ConcreteBlock')) {...}

不包括地平面。