threejs的阴影

郑建零零发

已于 2022-09-17 22:01:13 修改

阅读量400

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2022-09-17 15:59:39 首次发布

本文链接：https://blog.csdn.net/qq_52421092/article/details/126906248

案例说明：

第一:定义一个平面用来接收阴影的

第二:定义一个物体用来产生阴影的

第三：

代码

//添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff)
directionalLight.position.set(1, 1, 1) //设置光的位置
directionalLight.castShadow = true //********
directionalLight.shadow.mapSize.width = 1024 //默认是512 
directionalLight.shadow.mapSize.height = 1024 //默认是512
scene.add(directionalLight)//把平行光添加进场景

//定义一个平面(用来接收阴影)
const planeG = new THREE.PlaneGeometry(4, 4)
const planeM = new THREE.MeshStanderdMaterial({ color: 0xcccccc })
const plane = new THREE.Mesh(planeG, planeM)
plane.rotation.x = -0.5 * Math.PI //让平面旋转90度
plane.receiveShadow = true //接收阴影 //********
scene.add(plane) //添加场景

//定义一个球体(被照物体)
const sphereG = new THREE.SphereGeometry(0.5)//定义一个球半径为0.5
const sphereM = new THREE.MeshStandardMaterial({
    color: 0xffff00,
})
const sphere = new THREE.Mesh(sphereG, sphereM)
sphere.position .y = 0.5 
sphere.castShadow = true //光线照在物体上产生阴影 //********