Helpers

디버깅과 시각적인 가이드를 제공합니다. scene 내에서 가이드 라인, 축, 경계 상자 등을 생성하여 개발자에게 도움을 줍니다.ㅎ

ArrowHelper

raycater(광선 방향)을 확인할 때 유용하다.

ArrowHelper(dir?: THREE.Vector3, origin?: THREE.Vector3, length?: number, color?: THREE.ColorRepresentation, headLength?: number, headWidth?: number): THREE.ArrowHelper

• dir : Direction from origin. Must be a unit vector. Default new THREE.Vector3(0, 0, 1)
• origin : Point at which the arrow starts. Default new THREE.Vector3(0, 0, 0)
• length : Length of the arrow. Default 1
• hex : Hexadecimal value to define color. Default 0xffff00
• headLength : The length of the head of the arrow. Default 0.2 * length
• headWidth : The width of the head of the arrow. Default 0.2 * headLength

raycater에서 ArroHelper 사용법

scene.add(new THREE.ArrowHelper(raycaster.ray.direction, raycaster.ray.origin, 300, 0x00ff00) );

AxesHelper

3개의 축을 간단한 방식으로 시각화하는 축 객체.
X축은 빨간색입니다. Y축은 녹색입니다. Z축은 파란색입니다.

AxesHelper(size?: number): THREE.AxesHelper

• size : Size of the lines representing the axes. Default 1

DirectionalLightHelper

Scene에서 DirectionalLight의 효과를 시각화하는 데 도움이 되는 Helper입니다. 이것은 평면과 빛의 위치와 방향을 나타내는 선으로 구성됩니다.

const light = new THREE.DirectionalLight( 0xFFFFFF );
scene.add( light );

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

GridHelper

GridHelper는 그리드를 정의하는 객체입니다. 그리드는 2차원 선 배열입니다.

GridHelper(size?: number, divisions?: number, color1?: THREE.ColorRepresentation, color2?: THREE.ColorRepresentation): THREE.GridHelper

• size : The size of the grid. Default 10
• divisions : The number of divisions across the grid. Default 10
• olorCenterLine : The color of the centerline. This can be a THREE.Color Color, a hexadecimal value and an CSS-Color name. Default 0x444444
• colorGrid : The color of the lines of the grid. This can be a THREE.Color Color, a hexadecimal value and an CSS-Color name. Default 0x888888

const helper = new THREE.GridHelper( 1000, 40, 0x303030, 0x303030 );
helper.position.y = -75;
this.scene.add( helper );

PointLightHelper

const light = new THREE.PointLight( 0xFFFFFF, 1 );
scene.add( light );

const helper = new THREE.PointLightHelper( light, 0.1 );
scene.add( helper );

VertexNormalsHelper

객체의 vertex normals을 시각화합니다. 사용자 정의 속성에 노멀이 지정되었거나 ComputeVertexNormals를 사용하여 계산되어야 합니다.

Import

import { VertexNormalsHelper } from 'three/addons/helpers/VertexNormalsHelper.js';

Constructor

new VertexNormalsHelper(object: THREE.Object3D, size?: number, hex?: number): VertexNormalsHelper