如何让平面接收阴影?

Question

我想让飞机接收来自球体的阴影，但在我的路上我做错了什么，有人知道如何修复它吗?

//.................SETUP................//
import {
WebGLRenderer,
PerspectiveCamera,
Scene,
BoxGeometry,
MeshBasicMaterial,
Mesh,
Group,
PlaneGeometry,
AxesHelper,
GridHelper,
DoubleSide,
DirectionalLight,
AmbientLight,
MeshStandardMaterial,
DirectionalLightHelper,
Fog,
TextureLoader,
CubeTextureLoader,
SphereGeometry,
} from './three.module.js';
import { OrbitControls } from './q.js';
//................PROGRAM...............//
var renderer, camera, scene, light, light1, geometry, material, mesh;
// renderer
renderer = new WebGLRenderer({canvas:
document.getElementById('Canvas'), antialias: true, alfa: true});
//alfa: true gör att tomma pixlar i canvasen visar underliggande html-innehåll så att om man exempelvis skulle ha en bild under ett tomt canvas-element så kan man ändå se bilden. 
renderer.setClearColor(0x555555);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enable = true; 
// camera
camera = new PerspectiveCamera(35, window.innerWidth / 
window.innerHeight, 0.1, 6000);
camera.position.set(0, 0, 100);
camera.lookAt(0, 0, 0);
//controls
var orbitcontrol = new OrbitControls(camera, renderer.domElement)
//scene
scene = new Scene();
//lights
//var ambientlight = new AmbientLight(0x333333);
//scene.add(ambientlight);
var sun = new DirectionalLight(0xffffff, 0.8);
sun.castShadow = true;
scene.add(sun);
sun.position.set(0, 40, 0);
//fog
//scene.fog = new Fog(0xffffff, 0, 200); 
//helpers
var gridhelper = new GridHelper(10, 10);
scene.add(gridhelper);
var axishelper = new AxesHelper(3);
scene.add(axishelper);
var directionallighthelper = new DirectionalLightHelper(sun, 10, 0xff0000);
scene.add(directionallighthelper);
//material loaders
var bildimport = new TextureLoader().load('a.jpg');
var bildimport2 = new TextureLoader().load('träd.jpg');
var textureLoader = new TextureLoader();
scene.background = textureLoader.load('a.jpg');
//objects
//sphere
var geometrySphere = new SphereGeometry(10, 15);
var materialSphere = new MeshStandardMaterial({
color: 0xffff00f,
flatShading: true, 
//wireframe: true, 
});
var meshSphere = new Mesh(geometrySphere, materialSphere);
scene.add(meshSphere);
meshSphere.position.set(0,20,0);
meshSphere.castShadow = true;
meshSphere.receiveShadow = true;
//cube
geometry = new BoxGeometry(1, 1, 1);
var alt_material = [
new MeshBasicMaterial({map: bildimport2}),
new MeshBasicMaterial({map: bildimport}),
new MeshBasicMaterial({map: bildimport2}),
new MeshBasicMaterial({map: bildimport}),
new MeshBasicMaterial({map: bildimport2}),
new MeshBasicMaterial({map: bildimport}),
];
material = new MeshStandardMaterial({
color: 0xff0000,
map: bildimport2,
});
mesh = new Mesh(geometry, alt_material);
mesh.position.set(0, 50, 0);
mesh.castShadow = true;
scene.add(mesh);
//plane
var geometry2 = new PlaneGeometry(50, 50); 
var material2 = new MeshStandardMaterial({
color: 0xfff00,
map: bildimport,
side: DoubleSide,  // Gör att planet färgas på båda sidor isf bara på ovansidan.
});
var mesh2 = new Mesh(geometry2, material2);
mesh2.receiveShadow = true;
scene.add(mesh2);
mesh2.rotation.x = -0.5 * Math.PI;
//groups
//renderer loop 
requestAnimationFrame(render);
var i = 0;
var increase_of_i = 0.01;
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
// mesh.position.y = 100 * Math.abs(Math.sin(i));
mesh.scale.x = 1 + Math.abs(Math.sin(2*i));
mesh.scale.y = 1 + Math.abs(Math.sin(2*i));
mesh.scale.z = 1 + Math.abs(Math.sin(2*i));
i += increase_of_i;
renderer.render(scene, camera);
requestAnimationFrame(render);
}

我想让飞机从球体接收阴影，但在我的路上我做错了什么，有人知道如何修复它吗?

Answer 1

您的代码中有一个错别字。应该是renderer.shadowMap.enabled(缺少最后一个d)。

另外，到目前为止你还没有配置方向光的阴影，这可能是必要的。你通常这样做的方式，使阴影相机的截锥体包围所有阴影投射和接收3D对象。您可以通过THREE.CameraHelper可视化地调试截锥体，如下所示:

scene.add( new THREE.CameraHelper( sun.shadow.camera ) );

截锥体可以这样配置:

sun.shadow.camera.top = 25;
sun.shadow.camera.bottom = - 25;
sun.shadow.camera.left = - 25;
sun.shadow.camera.right = 25;
sun.shadow.camera.near = 0.1;
sun.shadow.camera.far = 100;