【Three】Three.js光源入门之点光源

点光源是一种单点发光照亮物体的光源

基础介绍

  • 照射所有方向的光源,例如照明弹
  • 点光源是单点发光方式
  • 点光源不会产生阴影, 减少GPU 的负担

调用方法

1
THREE.PointLight(hex, intensity, distance)
  • clone() —- 复制当前颜色。 color 光源颜色
  • intensity —- 光照强度
  • distance —- 光源照射的距离
  • position —- 光源所在位置

测试点光源

测试方法和大体上和环境光是一样的, 但是点光源和环境光不同的是, 他有个特点, 它能产生阴影

那我们就创建一个点光源和几个几何物体, 顺便移动一下点光源, 看看阴影是如何变化的

创建立方体

1
2
3
4
5
6
7

// 立方体
var cubeGeomtry = new THREE.BoxGeometry(5,5,5)
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 })
var cube = new THREE.Mesh(cubeGeomtry, cubeMaterial)
cube.position.set(0, 6, 0)
commonObj.scene.add(cube)

创建球体

1
2
3
4
5
6
// 球体
var sphereGeometry = new THREE.SphereGeometry(4, 20, 30)
var sphreMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff })
var sphere = new THREE.Mesh(sphereGeometry, sphreMaterial)
sphere.position.set(20, 6, 0)
commonObj.scene.add(sphere)

创建点光源

1
2
3
4
// 添加点光源
var pointLight = new THREE.PointLight(0xffffff)
pointLight.position.set(-40, 60, -10)
commonObj.scene.add(pointLight)

让点光源动起来

1
2
3
4
5
6
7
function render() {
requestAnimationFrame(render)
pointLight.position.z += 0.2
commonObj.renderer.render(commonObj.scene, commonObj.camera)
}

render()

最终效果

我们可以看到, 随着点光源的不断发生位置变动, 我们可以看到阴影发生逐渐的发生变化

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>第一个ThreeJs</title>
</head>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<body>
</body>
<script src="../three.js"></script>
<script src="../common/common.js"></script>
<!-- 游戏帧率辅助库 -->
<script src="../stats.min.js"></script>
<script src="../SceneUtils.js"></script>
<script src="../common/common.js"></script>
<script>
var commonObj = common()

// 立方体
var cubeGeomtry = new THREE.BoxGeometry(5,5,5)
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 })
var cube = new THREE.Mesh(cubeGeomtry, cubeMaterial)
cube.position.set(0, 6, 0)
commonObj.scene.add(cube)

// 球体
var sphereGeometry = new THREE.SphereGeometry(4, 20, 30)
var sphreMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff })
var sphere = new THREE.Mesh(sphereGeometry, sphreMaterial)
sphere.position.set(20, 6, 0)
commonObj.scene.add(sphere)


commonObj.camera.position.set(-25, 30, 25)
commonObj.camera.lookAt(commonObj.scene.position)




// 添加点光源
var pointLight = new THREE.PointLight(0xffffff)
pointLight.position.set(-40, 60, -10)
commonObj.scene.add(pointLight)

function render() {
requestAnimationFrame(render)
pointLight.position.z += 0.2
commonObj.renderer.render(commonObj.scene, commonObj.camera)
}

render()
document.body.appendChild(commonObj.renderer.domElement)
</script>
</html>
你的支持将鼓励我继续创作