尝试使用聚光灯THREE.SpotLight，将聚光灯下物体阴影显现出来
创建聚光灯 ，这个强度设置为1有点看不清阴影
//聚光灯1
const sportLight = new THREE.SpotLight(0xffffff, 1)
sportLight.position.set(-200, 350, 0)
sportLight.penumbra = 0.2 //边缘羽化
sportLight.lookAt(0, 0, 0);
scene.add(sportLight)
调整为90000
const sportLight = new THREE.SpotLight(0xffffff, 90000)
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
//console.log(THREE.REVISION);
//场景
const scene = new THREE.Scene()
//相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000)
camera.position.set(0, 400, 600)
//渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setPixelRatio(window.devicePixelRatio) //设置设备像素比。通常用于避免HiDPI设备上绘图模糊
renderer.setSize(window.innerWidth, window.innerHeight)
//环境光
const ambient = new THREE.AmbientLight(0xffffff, 0.3)
scene.add(ambient)
//辅助轴
const axesHelper = new THREE.AxesHelper(200)
scene.add(axesHelper)
//平面几何体
const planGeometry = new THREE.PlaneGeometry(1000, 1000)
//平面几何材质
const planMaterial = new THREE.MeshPhongMaterial({
color: 0x808080
})
//平面
const plan = new THREE.Mesh(planGeometry, planMaterial)
plan.position.set(0, 0, 0)
plan.rotation.x = -Math.PI / 2
scene.add(plan)
//球体
const sphereGeometry = new THREE.SphereGeometry(50, 32, 16)
const sphereMaterial = new THREE.MeshPhongMaterial({
color: 0x87CEEB
})
const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial)
sphereMesh.position.set(0, 60, 0)
scene.add(sphereMesh)
//聚光灯1
const sportLight = new THREE.SpotLight(0xffffff, 1)
sportLight.position.set(-200, 350, 0)
sportLight.penumbra = 0.2 //边缘羽化
sportLight.lookAt(0, 0, 0);
//这个聚光灯在three166默认值的情况跟没有差不多，像看不到一般
//sportLight.intensity=10000;//光源强度
sportLight.intensity = 900000; //光源强度
scene.add(sportLight)
//光源辅助类1
const sportLightCameraHelper = new THREE.CameraHelper(sportLight.shadow.camera)
scene.add(sportLightCameraHelper)
//聚光灯2
const sportLight2 = new THREE.SpotLight(0x4396D2, 1)
sportLight2.position.set(200, 350, 0)
sportLight2.angle = Math.PI / 6
sportLight2.penumbra = 0.2 //边缘羽化
sportLight2.lookAt(0, 0, 0);
//这个聚光灯在three166默认值的情况跟没有差不多，像看不到一般
//sportLight2.intensity=10000;//光源强度
sportLight2.intensity = 900000; //光源强度
scene.add(sportLight2)
//当源辅助类2
const sportLight2CameraHelper = new THREE.CameraHelper(sportLight2.shadow.camera)
scene.add(sportLight2CameraHelper)
//阴影
//需要投射阴影的物体要开启是否被渲染到阴影贴图中 castShadow属性
sphereMesh.castShadow = true //对象是否被渲染到阴影贴图中。默认值为false。
//接收阴影的物体要开启材质是否接收阴影 receiveShadow属性
plan.receiveShadow = true //材质是否接收阴影。默认值为false。
//灯光开启投射阴影
sportLight.castShadow = true //此属性设置为 true 聚光灯将投射阴影。警告: 这样做的代价比较高而且需要一直调整到阴影看起来正确。
sportLight2.castShadow = true
//渲染器显示阴影设置为enabled = true 允许在场景中使用阴影贴图
renderer.shadowMap.enabled = true //如果设置开启，允许在场景中使用阴影贴图。默认是 false。
document.body.appendChild(renderer.domElement)
const control = new OrbitControls(camera, renderer.domElement)
animation()
function animation() {
requestAnimationFrame(animation)
renderer.render(scene, camera)
}
</script>
</body>
</html>
已为社区贡献16条内容
所有评论(0)