threejs 2. 辅助对象

news2025/1/12 0:52:52

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, // 长度,默认值为1
 0xffff00, // 颜色,默认值为0xffff00
 undefined, // 箭头头部长度,默认为(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, // 网格尺寸，默认值为10
 10, // 划分单元格数量，默认值为10
 0x444444, // 中线颜色
 0x888888 // 网格线颜色
);
scene.add( gridHelper );

PolarGridHelper 极坐标网格

在这里插入图片描述

const helper = new THREE.PolarGridHelper( 
 10, // 半径，默认值为10
 16, // 分区，默认值为16
 8, // 圈数，默认值为8
 64, // 绘制每个圈使用的线段数量，默认值为64，最小值为3（取3画出来是三角形）
 0x444444, // 颜色1，分区线和圈线间隔使用颜色1，颜色2
 0x888888 // 颜色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, // 线框大小，默认值为1
 0xffff00 // 线框颜色，默认值为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, // 球形网格大小，默认值为1
 undefined // 网格颜色，默认值为光源颜色
);
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 );