基于上一节内容对空间添加光源效果,以及物体的在平面的投影效果。
效果图:
坐标系
坐标系支持右手定则。图中红色是x轴,绿色是y轴,蓝色是z轴
涉及的改动点为:
- 将材质替换为可对光源产生反应的:MeshLambertMaterial
- 设置渲染器支持阴影渲染功能:renderer.shadowMap.enabled = true;
- 设置平面可接受阴影:plane.receiveShadow = true;
- 设置立方体/球体可投射阴影:cube.castShadow = true;
- 设置光源:spotLight
//容器
const container = document.getElementById('container')
let sWidth = document.getElementById('container').clientWidth
let scale = window.innerWidth / window.innerHeight
console.log(sWidth, scale)
//清空容器
if(container.childNodes.length > 0){
let node = document.getElementsByTagName('canvas')[0]
container.removeChild(node)
}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, scale, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000))
renderer.setSize(sWidth, sWidth / scale)
// 设置渲染器支持阴影渲染功能
renderer.shadowMap.enabled = true;
// 坐标轴大小
var axes = new THREE.AxesHelper(20)
scene.add(axes)
// 创建地面
var planeGeometry = new THREE.PlaneGeometry(60, 20);
// 将材质替换为可对光源产生反应的:MeshLambertMaterial
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xAAAAAA
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// r旋转地面
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15, 0, 0);
// 设置平面可接受阴影
plane.receiveShadow = true;
// 添加地面到场景中
scene.add(plane);
// 添加方块
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xFF0000
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 设置方块位置
cube.position.set(-4, 3, 0);
// 设置立方体可投射阴影
cube.castShadow = true;
// 添加方块到场景中
scene.add(cube);
// 创建球体
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0x7777FF
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// 设置球体位置
sphere.position.set(20, 4, 2);
// 添加球体到场景中
scene.add(sphere);
// 设置球体可投射阴影
sphere.castShadow = true;
// 放置相机位置
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);
// 设置光源
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-40, 40, -15);
spotLight.castShadow = true;
spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
spotLight.shadow.camera.far = 130;
spotLight.shadow.camera.near = 40;
scene.add(spotLight);
// 添加canvas节点
container.appendChild(renderer.domElement);
// 渲染
renderer.render(scene, camera)