three.js中阴影投影效果

1.three.js中阴影投影效果

• 需要设置受产生投影的物体
• 需要设置接受投影的物体
• 需要设置用于计算阴影的光源对象
• renderer.shadowMap.enabled = true;

let scene = new THREE.Scene();//创建一个场景对象
let geometry = new THREE.BoxGeometry(40,100,40);//创建一个立体几何体
let material = new THREE.MeshLambertMaterial({
    
    
	color:0xb9d3ff,
	side:THREE.DoubleSide
});//创建一个材质对象
let mesh = new THREE.Mesh(geometry,material);//创建一个网格模型
scene.add(mesh);//将网格模型添加到场景中

设置产生投影的几何体
mesh.castShadow = true;

mesh.castShadow = true;

设置接受投影效果的几何体
planeMesh.receiveShadow = true;

let planeGeometry = new THREE.PlaneGeometry(300,200);//创建另一个几何体
let planeMaterial = new THREE.MeshLambertMaterial({
    
    
	color:0x999999,
	side:THREE.DoubleSide
})
let planMesh = new THREE.Mesh(planeGeometry,planeMaterial);//创建了一个平面模型
planMesh.receiveShadow = true;//将他设置成接受投影效果
scene.add(planMesh);//将这个模型添加到场景中
planeMesh.rotateX(-Math.PI/2);//旋转这个模型
planeMesh.position.y = -50;//平移这个几何体

设置产生投影的光源
directionalLight.castShadow = true;

let directionalLight = new THREE.DirectionalLight('red', 1);//创建一个光源
directionalLight.position.set(80, 100, 50);
scene.add(directionalLight);
directionalLight.castShadow = true;//设置用于计算投影的光源对象
directionalLight.shadow.camera.near = 2.1;
directionalLight.shadow.camera.far = 300;
directionalLight.shadow.camera.left = -50;
directionalLight.shadow.camera.right = 150;
directionalLight.shadow.camera.top = 100;
directionalLight.shadow.camera.bottom = -150;
let camera = new THREE.OrthographicCamera(-200*window.innerWidth/window.innerHeight,200*window.innerWidth/window.innerHeight,200,-200,1,1000);
        // 创建一个相机
        // let ambient = new THREE.AmbientLight(0x444444);//创建一个环境光
        // // 将环境光添加到场景中
        // scene.add(ambient);
camera.lookAt(scene.position);//设置相机拍摄的位置
camera.position.set(100, 40, 100);//设置相机的位置

设置渲染方式
renderer.shadowMap.enabled = true;

let renderer = new THREE.WebGLRenderer();//创建一个渲染器
        renderer.setSize(window.innerWidth,window.innerHeight);//设置相机的大小
// renderer.setClearColor(0xb9d3ff,1);//设置渲染器的背景颜色
document.body.appendChild(renderer.domElement);
let axisHelper = new THREE.AxesHelper(1000);//创建一个辅助坐标
scene.add(axisHelper);//向场景中添加坐标
renderer.shadowMap.enabled = true;
function rend(){
    
    
	renderer.render(scene,camera);//进行渲染
}
rend();
let constrols = new THREE.OrbitControls(camera,renderer.domElement);
constrols.addEventListener('change',rend);