三.js阴影太详细

问题描述

我有一个加载的 3D 对象，我想要一个没有图像中那么详细的阴影。

我想要一个边缘柔和的阴影，如示例中所示：https://threejs.org/examples/?q=shadow#webgl_shadowmap_pcss。 我也尝试加载一个 png 作为阴影纹理，但没有显示出来。 这是我的定向光法线阴影代码：

const larghContenitore = $( window ).width();
const altContenitore = $( window ).height();

let shadowGroup,rendertarget,rendertargetBlur,shadowCamera,cameraHelper,depthMaterial,horizontalBlurMaterial,verticalBlurMaterial;
let plane,blurPlane,fillPlane;

renderer = new THREE.Webglrenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( larghContenitore,altContenitore );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.gammaFactor = 2.2;
renderer.outputEncoding = THREE.sRGBEncoding;
        
camera = new THREE.PerspectiveCamera( 60,larghContenitore / altContenitore,1,1000 );
camera.position.set( 0,50,zoom );

scene = new THREE.Scene();
scene.background = new THREE.Color().setHSL( 0.6,1 );
scene.fog = new THREE.Fog( scene.background,5000 );

const axisHelper = new THREE.AxesHelper(100);
scene.add(axisHelper);

const ambient = new THREE.AmbientLight( 0xffffff,0.3 );
scene.add( ambient );

const dirLight = new THREE.DirectionalLight( 0xffffff,1 );
dirLight.color.setHSL( 0,1 );
dirLight.position.set( 10,10 );
dirLight.castShadow = true;
dirLight.shadow.mapSize.width = 2048;
dirLight.shadow.mapSize.height = 2048;

const d = 200;
dirLight.shadow.camera.top = d;
dirLight.shadow.camera.bottom = - d;
dirLight.shadow.camera.left = - d;
dirLight.shadow.camera.right = d;
dirLight.shadow.camera.far = 3500;
dirLight.shadow.bias = 0.0001;
dirLight.shadow.normalBias = 0.5;
dirLight.shadow.darkness = 0.1;
dirLight.shadow.camera.castShadow = true;
dirLight.shadow.radius = 50;

scene.add( dirLight );

const dirLightHelper = new THREE.DirectionalLightHelper( dirLight,10 );
scene.add( dirLightHelper );

const geo = new THREE.PlaneBufferGeometry( 10000,10000 );
const mat = new THREE.MeshLAmbertMaterial( { color: 0xffffff } );
mat.color.setHSL( 0,0.7 );

plane = new THREE.Mesh(geo,mat);
plane.position.y = - 33;
plane.rotation.x = - Math.PI / 2;
plane.receiveShadow = true;
plane.material.opacity = 0.5;
scene.add(plane);

const controls = new OrbitControls( camera,renderer.domElement );
controls.enablePan = false;
controls.maxPolarangle = ( Math.PI / 2.5 );
controls.minPolarangle = ( Math.PI / 3 );
controls.mindistance = 48;
controls.maxdistance = maxZoom;
controls.enableZoom = true;
controls.update();

let product;

const matStdobjects = new THREE.MeshStandardMaterial({ 
  color: '#ffffff',roughness: 0.5,Metalness: 0.8
  //shininess: 80
});

matStdobjects.color.convertSRGBToLinear();

let loader = new FBXLoader();
loader.load( 'model/2021_01_26_DMT_EVO_R1_AR_200k.fbx',function ( object ) {
  let Box = new THREE.Box3().setFromObject( object );
  console.log( Box.getSize() );
  
  let mesh = object.children;
  for (let i = 0; i < mesh.length; i++) {
    mesh[i].material = matStdobjects;
  }
            
  object.position.set( 0,5,0 );
  //object.rotation.set( 0,Math.PI / 2 );
  
  object.traverse( function ( child ) {
    if ( child.isMesh ) {
      child.castShadow = true;
      child.receiveShadow = false;
      child.flatshading = true;
    }
  });
  
  object.castShadow = true;  
  
  product = object;
  scene.add( object );
    
  animate();
  
});

是否可以“简化”对象阴影？或者最好将 png 加载为阴影纹理？万一，我该怎么做？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）