threejs 2. 辅助对象

对象"/>

threejs 2. 辅助对象

ArrowHelper 箭头

const arrowHelper = new THREE.ArrowHelper(new THREE.Vector3( 1, 2, 0 ).normalize(), // 方向向量必须是单位向量,默认值为(0,0,1)new THREE.Vector3( 0, 0, 0 ), // 起点,默认值为(0,0,0)1, // 长度,默认值为10xffff00, // 颜色,默认值为0xffff00undefined, // 箭头头部长度,默认为(0.2 * 长度)undefined, // 箭头头部宽度,默认为(0.2 * 箭头头部长度)
);
scene.add( arrowHelper );

AxesHelper 坐标轴

const axesHelper = new THREE.AxesHelper(3 // 轴线段长度，默认值为1
);
scene.add( axesHelper );

BoxHelper 包围盒

const box = new THREE.BoxHelper(object, // 需要展示包围盒的对象0xffff00 // 包围盒线条颜色，默认值为0xffff00
);
scene.add( box );
// box.setFromObject(object2); // 更新展示包围盒的对象
function animatie(){box.update() // 更新包围盒使之与目标保持一致
}

Box3Helper 虚拟包围盒

// 创建包围盒对象
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 摄像机

const camera1 = new THREE.PerspectiveCamera( 15, 1, 0.1, 3);
camera1.position.set(3,0,0);
camera1.lookAt(new THREE.Vector3(0,0,0));
scene.add(camera1); // 如果不添加到场景，辅助器无法正确展示位置和朝向
const helper1 = new THREE.CameraHelper( camera1 );
scene.add( helper1 );
const camera2 = new THREE.OrthographicCamera( -1,1,1,-1);
const helper2 = new THREE.CameraHelper( camera2 );
scene.add( helper2 );

DirectionalLightHelper 平行光

const light = new THREE.DirectionalLight( 0xFFFFFF );
light.position.set(2,0,0);
const target = new THREE.Object3D();
target.position.set(1,2,0)
const helper = new THREE.DirectionalLightHelper( light, 0.5, // 光源平面线框的大小undefined, // 平行光辅助器线框颜色，默认值为光源颜色
);
scene.add( helper );

GridHelper 坐标格

const gridHelper = new THREE.GridHelper( 10, // 网格尺寸，默认值为1010, // 划分单元格数量，默认值为100x444444, // 中线颜色0x888888 // 网格线颜色
);
scene.add( gridHelper );

PolarGridHelper 极坐标网格

const helper = new THREE.PolarGridHelper( 10, // 半径，默认值为1016, // 分区，默认值为168, // 圈数，默认值为864, // 绘制每个圈使用的线段数量，默认值为64，最小值为3（取3画出来是三角形）0x444444, // 颜色1，分区线和圈线间隔使用颜色1，颜色20x888888 // 颜色2
);
scene.add( helper );

HemisphereLightHelper 半球形光源

const light = new THREE.HemisphereLight( 0x00ffff, 0xff0000, 1 );
const helper = new THREE.HemisphereLightHelper( light, // 光源对象5, // 线框大小undefined // 线框颜色，默认取光源颜色(上锥体为天空色，下锥体为地面色) 
);
scene.add( helper );

PlaneHelper 模拟平面

const plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );
const helper = new THREE.PlaneHelper( plane, // 模拟平面对象1, // 线框大小，默认值为10xffff00 // 线框颜色，默认值为0xffff00
);
scene.add( helper );

PointLightHelper 点光源

const pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
pointLight.position.set( 0, 10, 0 );
scene.add( pointLight );
const pointLightHelper = new THREE.PointLightHelper(pointLight, // 点光源对象2, // 球形网格大小，默认值为1undefined // 网格颜色，默认值为光源颜色
);
scene.add( pointLightHelper );

SpotLightHelper 聚光灯

const spotLight = new THREE.SpotLight( 0xffffff,1,1,Math.PI/4);
spotLight.position.set( 0, 1, 0 );
scene.add( spotLight );
const spotLightHelper = new THREE.SpotLightHelper(spotLight, // 聚光灯对象undefined // 线框颜色，默认值为聚光灯颜色
);
scene.add( spotLightHelper );