Three.js(2)---＞基础篇-Helpers(辅助对象/辅助线)

在Three.js中有许多的Helper(辅助对象)用来帮助我们的开发。 本篇例举几个常见的，方便理解。以及一些效果

---

前言

Helper对象比较简单，Helper链接
如图：官方的文档也是十分的齐全，左侧是不同类型的Helper右侧有关于该Helper的说明、代码示例以及其属性及其方法

---

一、AxesHelper

说明： 该Helper是用于创建一个物体的3维坐标(即：物体的x，y，z)，该类接受一个size参数用于设置轴的线段长度

---

相关代码：
将demo-2中的HelloWorld.vue created函数替换成以下代码

created() {
    
    
    const threeObj = new threeUtil({
    
    
      modelUrl: "/static/3d/koala_con_flor/scene.gltf",
    });
    this.Three = threeObj;
    threeObj.init();
    // 创建辅助线
    (() => {
    
    
      const axesHelper = new threeObj.THREE2.AxesHelper(1);
      threeObj.scene.add(axesHelper);
    })();
    // threeObj.autoRotation();
  },

二、BoxHelper

说明： 该Helper是用于创建物体的一个包装盒（可以这样理解）轴的线段长度

---

相关代码：
将demo-2中的HelloWorld.vue created函数替换成以下代码

created() {
    
    
    const threeObj = new threeUtil({
    
    
      modelUrl: "/static/3d/koala_con_flor/scene.gltf",
    });
    this.Three = threeObj;
    threeObj.init();
    // 创建辅助线
    (() => {
    
    
      const sphere = new threeObj.THREE2.SphereGeometry();
      const object = new threeObj.THREE2.Mesh( sphere, new threeObj.THREE2.MeshBasicMaterial( 0xff0000 ) );
      const box = new threeObj.THREE2.BoxHelper( object, 0xffff00 );
      threeObj.scene.add( box );
    })(); 
    // threeObj.autoRotation();
  },

三、Box3Helper

说明： 模拟3维包围盒 Box3 的辅助对象

---

四、CameraHelper

说明： 用于模拟相机视锥体的辅助对象

---

五、DirectionalLightHelper

说明： 用于模拟场景中平行光 DirectionalLight 的辅助对象. 其中包含了表示光位置的平面和表示光方向的线段

---

六、GridHelper

说明： 坐标格辅助对象

---

七、PolarGridHelper

说明： 极坐标格辅助对象

---

八、HemisphereLightHelper

说明： 创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 半球形光源 HemisphereLight

---

九、PlaneHelper

说明： 用于模拟平面 Plane 的辅助对象

---

十、PointLightHelper

说明： 创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 点光源 PointLight

---

十一、SpotLightHelper

说明： 用于模拟聚光灯 SpotLight 的锥形辅助对象

---

总结

以上是一些关于Helper(辅助对象)的一些基本效果，当然这里不能完全表示其实际效果，因为参数不一样其效果也不一样。更详细的还是需要看

官方文档

上一篇：Three.js(1)—＞基础篇-导入3d模型-方法封装