<body>
<canvas id="canvas"></canvas>
<script>
const width = window.innerWidth;
const height = window.innerHeight;
var cvs = document.getElementById("canvas");
const renderer = new THREE.WebGLRenderer({canvas:cvs});
renderer.shadowMapEnabled = true;
renderer.shadowCameraFov = 90;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
const camera = new THREE.PerspectiveCamera(90,width/height,1,10000);
const scene = new THREE.Scene();
scene.add(camera);
renderer.setSize(width,height);
const sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xCC0000 });
const sphere = new THREE.Mesh(new THREE.SphereGeometry(50,16,16), sphereMaterial);
sphere.castShadow=true;
sphere.receiveShadow=true;
sphere.position.z = -300;
sphere.position.x=300;
scene.add(sphere);
var vFOV = camera.fov * Math.PI / 180;
var vHeight = 2 * Math.tan( vFOV / 2 );
var vAspect = width/height;
var vWidth = vHeight * vAspect;
const planeMat = new THREE.MeshLambertMaterial({color:0x00FFFF});
const plane = new THREE.Mesh(new THREE.PlaneGeometry(vWidth*1000,vHeight*1000),planeMat);
plane.receiveShadow=true;
plane.castShadow=true;
plane.position.z=-350;
scene.add(plane);
const pointLight = new THREE.DirectionalLight(0xFFFFFF,1);
pointLight.target = plane;
pointLight.castShadow = true;
pointLight.shadowCameraNear = 3;
pointLight.shadowCameraFar = 3000;
pointLight.shadowDarkness=0.5;
pointLight.intensity=1;
pointLight.shadowCameraRight = 5;
pointLight.shadowCameraLeft = -5;
pointLight.shadowCameraTop = 5;
pointLight.shadowCameraBottom = -5;
pointLight.shadowCameraVisible=true;
scene.add(pointLight);
Update();
function Update(){
renderer.render(scene,camera);
camera.position.z-=1;
//camera.rotation.y+=0.01;
requestAnimationFrame(Update);
}
</script>
</body>
我添加了three.js文档所说的所有内容，但没有用。 我添加了castShadow，receiveShadow，Far，Near，left，left，right，top，bottom，intensity和dark。 我已经搜索了很多互联网，但是没有任何答案。 如果要标记此帖子，请在标记mt帖子之前先对其进行测试。