Three.js平面接收不到阴影
·
首先确认渲染器有无开启阴影贴图,默认是false
// 创建渲染器
var renderer = new THREE.WebGLRenderer()
// 设置渲染物体阴影
renderer.shadowMap.enabled = true
然后确认物体材质是否可受光照影响
// 创建地面几何体
const planeGeometry = new THREE.PlaneGeometry(60,20)
// 创建地面材质
const planeMaterial = new THREE.MeshLambertMaterial({color:0xcccccc})
// 若使用基础网格材质(MeshBasicMaterial)则会发现光照没有阴影,因为这种材质不受光照影响
// 创建地面
const plane = new THREE.Mesh(planeGeometry, planeMaterial)
确认物体对象是否渲染阴影贴图和是否接收阴影
// 对象是否渲染到阴影贴图中(对象是否可以产生阴影)
plane.castShadow = true
// 地面材质是否接收阴影
plane.receiveShadow = true
// 将地面添加到场景中
scene.add(plane)
js代码
function init() {
// 创建场景
const scene = new THREE.Scene();
// 设置相机
const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,2000)
// 创建渲染器
var renderer = new THREE.WebGLRenderer()
// 设置渲染器的初始颜色(背景颜色)
renderer.setClearColor(new THREE.Color(0xeeeeee))
// 设置输出canvas画面的大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 设置渲染物体阴影
renderer.shadowMap.enabled = true
// renderer.shadowMap.type = THREE.PCFShadowMap
// 显示三维坐标系(参数为坐标轴长度)
var axes = new THREE.AxesHelper(20)
// 将坐标系添加到场景中
scene.add(axes)
// 创建地面几何体
const planeGeometry = new THREE.PlaneGeometry(60,20)
// 创建地面材质
const planeMaterial = new THREE.MeshLambertMaterial({color:0xcccccc})
// 创建地面
const plane = new THREE.Mesh(planeGeometry, planeMaterial)
// 将物体移动位置
plane.rotation.x = -0.5*Math.PI
plane.position.x = 15
plane.position.y = -10
plane.position.z = 0
// 对象是否渲染到阴影贴图中
plane.castShadow = true
// 地面材质是否接收阴影
plane.receiveShadow = true
// 将地面添加到场景中
scene.add(plane)
// 添加光源
// 创建聚光灯SpotLight
const spotLight = new THREE.SpotLight(0xffffff)
// 设置聚光灯位置(x,y,z)
spotLight.position.set(10,40,-30)
spotLight.castShadow = true
scene.add(spotLight)
// 创建立方体
const cubeGeometry = new THREE.BoxGeometry(4,4,4)
const cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000})
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
// 将立方体移动位置
cube.position.x = 0
cube.position.y = 2
// 对象是否渲染到阴影贴图中
cube.castShadow = true
// 将立方体添加到场景中
scene.add(cube)
// 创建球体
const sphereGeometry = new THREE.SphereGeometry(4,6,6)
const sphereMaterial = new THREE.MeshLambertMaterial({color:0x00ff00})
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
sphere.position.x = 30
sphere.position.y = 5
sphere.castShadow = true
scene.add(sphere)
// 设置相机定位并且指向场景中心
camera.position.x = 50
camera.position.y = 50
camera.position.z = 50
camera.lookAt(scene.position)
// 将渲染器输出添加html元素中
document.getElementById('webgl-output').appendChild(renderer.domElement)
renderer.render(scene,camera)
}
window.onload = init
更多推荐
已为社区贡献10条内容
所有评论(0)