THREEJS案例（11）- 光照阴影

Posted 2021-04-21 开源编程案例

阴影由于光线照射,遇不透光物体而形成的一个暗区。

ThreeJS为我们提供了三种可以产生阴影的光，聚光灯光源-SpotLight、点光源-PointLight和平行光-DirectionalLight。

ThreeJS中要产生阴影，需要四个步骤。

1、渲染器需要开启阴影属性

renderer.shadowMap.enabled = true;

2、灯光阴影属性设置

var light = new THREE.DirectionalLight(0xdfebff, 1.75);light.position.set(2, 8, 4);// 开启阴影light.castShadow = true;// 阴影属性    light.shadow.mapSize.width = 1024; //定义阴影贴图的宽度light.shadow.mapSize.height = 1024; //定义阴影贴图的高度light.shadow.camera.near = 0.5; //产生阴影的近距离light.shadow.camera.far = 20; //产生阴影的远距离
scene.add(light);

3、设置要产生阴影的物体

var groundMaterial = new THREE.MeshPhongMaterial({ color: 0x404040, specular: 0x111111 });
var mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(1, 4, 1), groundMaterial);mesh.position.y = 2;mesh.castShadow = true;  // 开启阴影mesh.receiveShadow = true; // 是否接收阴影scene.add(mesh);

4、接收阴影的物体

var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(20000, 20000), groundMaterial);
mesh.rotation.x = - Math.PI / 2;mesh.receiveShadow = true; // 接收阴影scene.add(mesh);

完整的代码。

function init() {   container = document.createElement('div'); document.body.appendChild(container);  scene = new THREE.Scene();
 camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000); camera.position.y = 5; camera.position.z = 15; scene.add(camera);  var light = new THREE.DirectionalLight(0xdfebff, 1.75); light.position.set(2, 8, 4);
 // 开启阴影 light.castShadow = true; // 阴影属性  light.shadow.mapSize.width = 1024; //定义阴影贴图的宽度 light.shadow.mapSize.height = 1024; //定义阴影贴图的高度 light.shadow.camera.near = 0.5; //产生阴影的近距离 light.shadow.camera.far = 20; //产生阴影的远距离
 scene.add(light);  var groundMaterial = new THREE.MeshPhongMaterial({ color: 0x404040, specular: 0x111111 });
 var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(20000, 20000), groundMaterial); mesh.rotation.x = - Math.PI / 2; mesh.receiveShadow = true; // 接收阴影 scene.add(mesh);  var mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(1, 4, 1), groundMaterial); mesh.position.y = 2; mesh.castShadow = true; // 开启阴影 mesh.receiveShadow = true; // 是否接收阴影 scene.add(mesh);  renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight);
 container.appendChild(renderer.domElement);    renderer.shadowMap.enabled = true;}