主页 / 问题 / 989364
Accepted
zeni1agent
Asked:2020-06-05 05:03:29 +0000 UTC2020-06-05 05:03:29 +0000 UTC

为什么阴影不显示？

  • 772

我有这个代码

var camera = new THREE.PerspectiveCamera(65,  1000 / 600, 0.1, 20000 );  
camera.position.set(  350, 325, 650 );

renderer.shadowMap.enabled = true;  

var DiLight = new THREE.DirectionalLight(0xFDFCEB, 0.5)  
DiLight.castShadow = true; 
DiLight.visible = false; 
DiLight.shadow.camera.left = -100;
DiLight.shadow.camera.bottom = -100;
DiLight.shadow.camera.right = 100;
DiLight.shadow.camera.top = 100;
scene.add(DiLight);

var  plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 5000, 5000 ),  THREE.MeshStandardMaterial( { color: 0x808080, roughness: 0, metalness: 0 } ) );
plane.rotation.x = floor_rotat ;
plane.receiveShadow = true;
plane.position.y = -200 ;
scene.add(  plane );

var bdf = new THREE.Mesh(new THREE.BoxBufferGeometry(400, 400, 400), THREE.MeshStandardMaterial( { color: 0x808080, roughness: 0, metalness: 0 } ));
bdf.receiveShadow = true;
scene.add( bdf );

但是由于某种原因阴影没有显示，我改变了大小，可能会影响阴影的显示或者我忘记包含整个代码，我不能给出它，因为它太长了

three.js

1 个回答

  1. Best Answer

    据我记得它以前不存在。

    DiLight.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 200, 10000 ) );
DiLight.shadow.bias = 0.0001;
DiLight.shadow.mapSize.width = 1024;
DiLight.shadow.mapSize.height = 1024;

    好吧，还需要设置对象

    bdf.receiveShadow = true;
bdf.castShadow = true;


    var scene = new THREE.Scene();
var aspect = window.innerWidth / window.innerHeight;
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.type = THREE.BasicShadowMap;
renderer.shadowMap.enabled = true;  
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var camera = new THREE.PerspectiveCamera(65,  1000 / 600, 0.1, 20000 );  
camera.position.set(  3500, 3250, 6500 );
new THREE.OrbitControls( camera, renderer.domElement );

var DiLight = new THREE.DirectionalLight(0xFDFCEB, 0.9)  
DiLight.castShadow = true; 
DiLight.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 200, 10000 ) );
DiLight.shadow.bias = 0.0001;
DiLight.shadow.mapSize.width = 2048;
DiLight.shadow.mapSize.height = 2048;
scene.add(DiLight);
scene.add(new THREE.AmbientLight(0xFDFCEB, 0.5)  );

var  plane = new THREE.Mesh( 
  new THREE.PlaneBufferGeometry( 5000, 5000 ), 
  new THREE.MeshLambertMaterial(  {side:THREE.DoubleSide} ) 
);
plane.castShadow = true; 
plane.receiveShadow = true;
plane.position.y = -200 ;
scene.add( plane );

var bdf = new THREE.Mesh(
  new THREE.BoxBufferGeometry(3000, 4000, 4000), 
  new THREE.MeshLambertMaterial( )
);
bdf.receiveShadow = true;
scene.add( bdf ); 
bdf.castShadow = true; 

function render(t) {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
    DiLight.position.set(5000 * Math.sin(t/1000),  3000 * Math.cos(t/1000) -1500, 6000 * Math.cos(t/1000));
}

requestAnimationFrame( render );
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

    • 0

相关问题