Second Sence

创立物体暗影

1. 增加暗影须要给高空设置承受暗影的属性 receiveShadow
2. 给几何体设置投射暗影的属性 castShadow
3. 给可投射的光源设置投射暗影属性 castShadow
4. 在 renderer 上设置暗影开启的属性 renderer.shadowMap.enabled

• 代码

const scene = new THREE.Scene();
// 创立高空
const planeGeometry = new THREE.PlaneGeometry(300, 300, 30);
const planeMaterial = new THREE.MeshPhonegMaterial({color: 0xeeeeee,});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = 0.5 * Math.PI;
// 高空承受暗影
plane.receiveShadow = true;
scene.add(plane);
// 创立几何体
const boxGeometry = new THREE.BoxGeometry(20, 20, 20);
const boxMaterial = new THREE.MeshPhongMaterial({color: 0x277234,});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
// 几何体投射暗影
box.castShadow = true;
box.position.y = 10;
scene.add(box);
// 创立点光源
const point = new THREE.PointLight(0xaaaaaa);
point.position.set(100, 100, 20);
// 设置点光源的投射暗影
point.castShadow = true;
scene.add(point);
// 创立环境光
const ambient = new THREE.AmbientLight(0xcccccc);
ambient.box;
scene.add(ambient);

// 创立相机
var camera = new THREE.OrthographicCamera("未设置参数");
camera.position.set(100, 100, 200);
camera.lookAt(scene.position);
// 创立 renderer 对象
var renderer = new THREE.WebGLRenderer();
renderer.setSize(
  window.document.body.clientWidth,
  window.document.body.clientHeight
);
renderer.setClearColor(0xb9d3ff, 1);
// 开启暗影
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

• 成果