Threejs入门之五:Threejs中的辅助对象_threejs添加辅助线

在继续Threejs入门之旅之前，我们先来了解几个Threejs提供的辅助对象，这些辅助对象有助于我们更好的了解Threejs。Threejs提供了很多辅助对象，这里我们先了解几个我们经常用到的坐标轴辅助对象、点光辅助对象、平行光辅助对象和聚光灯的锥形辅助对象。
1.AxesHelper：AxesHelper用于模拟3个坐标轴，它有三个轴线组成，红色线代表 X 轴. 绿色线代表 Y 轴. 蓝色线代表 Z 轴；它接收一个可选参数，这个参数表示轴的线段长度，默认值为1。
创建一个坐标轴辅助对象使用如下代码

const axesHelper = new THREE.AxesHelper(100)
scene.add(axesHelper)
1
2

刷新浏览器查看效果如下

可以看到在原点位置向三个方向延伸出了3条轴线，分别是x、y和z，对应的线颜色为红色、绿色和蓝色；
此时因为物体遮挡，看不到原点的位置，我们可以在材质里面开启透明效果，并设置透明度为0.5，这样就可以看清原点位置

// 创建材质，
const material = new THREE.MeshBasicMaterial({
  color:0xff0000,//设置颜色
  transparent:true,//开启透明
  opacity:0.5//设置透明度
})
1
2
3
4
5
6

2.PointLightHelper：PointLightHelper创建一个虚拟的球形网格 Mesh 的辅助对象来模拟点光源 PointLight，PointLightHelper接收三个参数
PointLightHelper( light : PointLight, sphereSize : Float, color : Hex )
light – 要模拟的光源.
sphereSize – (可选的) 球形辅助对象的尺寸. 默认为 1.
color – (可选的) 如果没有赋值辅助对象将使用光源的颜色.

// 创建点光 参数1 光的颜色，参数2 光的强度
const pointLight = new THREE.PointLight(0xffffff,1)
// 点光源的位置 
pointLight.position.set(100,100,100)
scene.add(pointLight)
// 创建点光源辅助对象
const pointLightHelper = new THREE.PointLightHelper(pointLight,10)
scene.add(pointLightHelper)
1
2
3
4
5
6
7
8

刷新浏览器，可以点光源的位置出现在了点光源的position位置

3.DirectionalLightHelper：DirectionalLightHelper用于模拟场景中平行光 DirectionalLight 的辅助对象. 其中包含了表示光位置的平面和表示光方向的线段.DirectionalLightHelper接收三个参数
DirectionalLightHelper( light : DirectionalLight, size : Number, color : Hex )
light-- 被模拟的光源.
size – (可选的) 平面的尺寸. 默认为 1.
color – (可选的) 辅助线的颜色，如果没有设置颜色将使用光源的颜色.
添加平行光辅助线

// 创建平行光辅助对象
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight,10,0x00ff00)
scene.add(directionalLightHelper)
1
2
3

4.SpotLightHelper:SpotLightHelper用于模拟聚光灯 SpotLight 的锥形辅助对象.
SpotLightHelper( light : SpotLight, color : Hex )
light – 被模拟的聚光灯 SpotLight .
color – (可选的) 辅助线的颜色，如果没有赋值辅助对象将使用光源的颜色.

// 创建聚光灯辅助对象
const spotLightHelper = new THREE.SpotLightHelper(spotLight,0x0000ff)
scene.add(spotLightHelper)
1
2
3

总结：Threejs的辅助对象能帮助我们在开发中比较直观的感受到特定对象的位置，为我们调整参数提供了便利，除了上面介绍的几种辅助对象外，Threejs还提供了很多其他的辅助对象，具体可以查看官方文档，里面也提供了使用的例子，可以敲敲代码试试效果。好了，今天就到这里吧！