three 辅助对象 看这一篇就够了

three 辅助对象 文档总结之后，写出如下辅助对象介绍，主要包报括 模似方向的3维箭头对象 ArrowHelper，用于模似3个坐标轴的对象 AxesHelper， 用于 Box 盒的辅助对象 BoxHelper, 用于 Box 的辅助对象 Box3Helper 与BoxHelper的区别时 Box3Helper 是动态的， 相机视锥体的辅助对象 CameraHelper ，平行光的辅助对象 DirectionalLightHelper， 坐标格辅助对象象 GridHelper， 极坐标格辅助对象 PolarGridHelper，半球形光源辅助对象 HemisphereLightHelper， 模似平面辅助对象 PlaneHelper， 点光源辅助对象 PointLightHelper， 模似骨骼辅助对象 SkeletonHelper， 模似聚光灯辅助对象 SpotLightHelper。

ArrowHelper 三维箭头对象 这个对象有五个个参数 两个属性 三个方法

• dir 箭头基于原点的方向， 必须为单位的向量 也就是需要通过 THREE.Vector3 新建， 使用 dir.normalize 格式化为向量
• origin 箭头的原点
• length 箭头的长度 默认为 1
• hex 定义的 16 进制颜色值，箭头的
• headLength 箭头头部（锥体）的长度 默认为箭头长度的0.2倍
• headLength 箭头头部 （锥体）的宽度 默认为箭头长度的0.2倍
• lien 属性 箭头辅助对象的线段部分
• cone 属性 箭头辅助对象的锥体部分
• setColor 方法 箭头颜色 一个参数 16 进制颜色值
• setLength 方法 设置箭头长度 三个参数 第一个为 箭头线长度，第二个为 头长度 第三个为头宽度
• setDirection 方法 设置方向，只有一个参数 必须为单位向量

基本使用示例

    //  ArrowHelper(dir : Vector3, origin : Vector3, length : Number, hex : Number, headLength : Number, headWidth : Number )
    const dir = new THREE.Vector3( 1, 2, 0 );

    // normalize the direction vector (convert to vector of length 1)
    dir.normalize();

    const origin = new THREE.Vector3( 0, 0, 0 );
    const length = 1;
    const hex = 0xffff00;

    const arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
    scene.add( arrowHelper );

AxesHelper 三个坐标轴的对象 有 一个参数 两个方法

• size 坐标轴的线长度
• setColors 方法 设置坐标轴颜色 三个参数 X 线的颜色， Y 线的颜色，Z 线的颜色
• dispose 释放此实例的资源

基本使用示例

    // AxesHelper( size : Number )
    const axesHelper = new THREE.AxesHelper( 5 ); 
    scene.add( axesHelper );

BoxHelper 盒的辅助对象 有两个参数 两个方法

• object 盒的对象
• color 线框盒子的 16 进制颜色
• update 方法 更新辅助对象
• setFromObject 方法 用于创建辅僵对象的目录Object3D对象 一个参数 Object3D类型

基本使用示例

    // BoxHelper( object : Object3D, color : Color )
    const sphere = new THREE.SphereGeometry();
    const object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
    const box = new THREE.BoxHelper( object, 0xffff00 );
    scene.add( box );

Box3Helper 盒的辅助对象 有两个参数 一个属性 一个方法

• box 被模似的三维包围盒
• color 线框盒子的颜色，默认为0xffff00
• box 属性 被模似的三维包围盒
• updateMatrixWorld 方法 重写基类Object3D的方法 便于同时更新线框辅助对象 参数 Boolean

基本使用示例

    const box = new THREE.Box3();
    box.setFromCenterAndSize( new THREE.Vector3( 1, 1, 1 ), new THREE.Vector3( 2, 1, 3 ) );

    const helper = new THREE.Box3Helper( box, 0xffff00 );
    scene.add( helper );

CameraHelper 相机辅助对象 一个参数 四个属性 三个方法 这个对象用来模似相机的视角

• camera 被模似的相机
• camera 属性 被模似的相机
• pointMap 属性 包含用于模似的相机的点
• matrix 属性 相机的矩阵
• matrixAutoUpdate 属性 是否自动更新矩阵
• dispose 方法 销毁
• setColor 方法 此方法有 BUG 在使用透视相机时
• update 方法 基于相机的投影矩阵更新辅助对象

基本使用示例

    // CameraHelper( camera : Camera )
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 
    const helper = new THREE.CameraHelper( camera ); 
    scene.add( helper );

DirectionalLightHelper 平行光 的辅助对象 有三个参数 五个属性 两个方法

• light 被模似的光源
• size 平面的尺寸
• color 线条的颜色
• lightPlane 属性 平行光方向的线网格
• light 属性 被模似的光源
• matrix 属性 光源的世界矩阵
• matrixAutoUpdate 属性 光源是否自动更新矩阵
• color 属性 辅助线颜色值
• dispose 方法 销毁
• update 方法 更新辅助对象

基本使用示例

    // DirectionalLightHelper( light : DirectionalLight, size : Number, color : Hex )
    const light = new THREE.DirectionalLight( 0xFFFFFF );
    scene.add( light );

    const helper = new THREE.DirectionalLightHelper( light, 5 );
    scene.add( helper );

GridHelper 坐标格辅助对象 有四个参数

• size 坐标格尺寸 默认10
• divisions 坐标格缰分次数 默认10
• colorCenterLine 中线颜色 值为 Color 类型
• colorGrid 坐标网格线颜色 值为 Color 类型

基本使用示例

    // GridHelper( size : number, divisions : Number, colorCenterLine : Color, colorGrid : Color )
    const size = 10;
    const divisions = 10;

    const gridHelper = new THREE.GridHelper( size, divisions );
    scene.add( gridHelper );

PolarGridHelper 极坐标格辅助对象 有七个参数

• radius 极坐标格半径
• sectors 圆内划分为扇形的区域数 默认值 16
• rings 环的数量 可以是任何正数 默认值 8
• divisions 圆圈细分段数 可以为任何大于或等于3的正整数 默认为 64
• color1 极坐标格使用的第一个颜色 值为 Color 类型
• color2 极坐标格使用的第二个颜色 值为 Color 类型

基本使用示例

    // PolarGridHelper( radius : Number, sectors : Number, rings : Number, divisions : Number, color1 : Color, color2 : Color )
    const radius = 10;
    const sectors = 16;
    const rings = 8;
    const divisions = 64;

    const helper = new THREE.PolarGridHelper( radius, sectors, rings, divisions );
    scene.add( helper );

HemisphereLightHelper 半球光源辅助对象 三个参数 四个属性 两个方法

• light 被模似的光源对象
• size 模似光源的尺寸
• color 线条的颜色
• light 属性 被模似的半球光源
• matrix 属性 光源的世界矩阵
• matrixAutoUpdate 属性 自动更新矩阵
• color 属笥 线条颜色
• dispose 方法 销毁
• update 方法 更新

基本使用示例

    // HemisphereLightHelper( light : HemisphereLight, sphereSize : Number, color : Hex )
    const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
    const helper = new THREE.HemisphereLightHelper( light, 5 );
    scene.add( helper );

PlaneHelper 用于模似平面的辅助对象 三个参数 两个属性 一个方法

• plane 被模似的平面对象
• size 辅助对象的单边长度 默认值 1
• color 辅且轰动象的颜色 默认值 0xffff00
• plane 属性 平面对象
• size 属性 辅助对象的单边长度
• updateMatrixWorld 方法 更新世界矩阵

基本使用示例

    // PlaneHelper( plane : Plane, size : Float, hex : Color )
    const plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );
    const helper = new THREE.PlaneHelper( plane, 1, 0xffff00 );
    scene.add( helper );

PointLightHelper 点光源辅助对象 三个参数 四个属性 两个方法

• light 要模似的点光对象
• sphereSize 球形辅助对象的尺寸 默认为 1
• color 线条的颜色
• light 属性 点光对象
• matrix 属性 世界矩阵
• matrixAutoUpdate 属性 是否自动更新世界矩阵
• color 属性 线条颜色
• dispose 方法 销毁
• update 方法 更新

基本使用示例

    // PointLightHelper( light : PointLight, sphereSize : Float, color : Hex )
    const pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
    pointLight.position.set( 10, 10, 10 );
    scene.add( pointLight );

    const sphereSize = 1;
    const pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
    scene.add( pointLightHelper );

SkeletonHelper 用来模似骨骼 辅助对象 一个参数 三个属性

• object Object3D 对象
• bones 属性 骨数组
• isSkeletonHelper 属性 只读 用以检查给定对象是否是 骨骼
• root 属性 构造函数传入的对象

基本使用示例

    // SkeletonHelper( object : Object3D )
    const helper = new THREE.SkeletonHelper( skinnedMesh );
    scene.add( helper );

SpotLightHelper 模拟聚光灯 的锥形辅助对象 两个参数 五个属性 两个方法

• light 聚光灯对象
• color 线条颜色
• cone 属性 模似光源的类型对象
• light 属性 被模似的聚光灯
• matrix 属性 世界矩阵
• matrixAutoUpdate 属性 自动更新世界矩阵
• color 属性 线条颜色值
• dispose 销毁
• update 更新

基本使用示例

    // SpotLightHelper( light : SpotLight, color : Hex )
    const spotLight = new THREE.SpotLight( 0xffffff );
    spotLight.position.set( 10, 10, 10 );
    scene.add( spotLight );

    const spotLightHelper = new THREE.SpotLightHelper( spotLight );
    scene.add( spotLightHelper );

结语：辅助对象主要通过线条的形式为 three 提供简洁的模形展示方式，使其结构更加清晰，也使得不可见物体具有实体，例如光线，有了辅助对象在使用 three 时能够快速准确的分析问题。