crosshairs ( 십자선 ) 만들기

let mousePosition = new THREE.Vector2();
const crosshairs = new THREE.Group();
crosshairs.position.z = -1;
camera.add(crosshairs);
const crossMaterial = new THREE.LineBasicMaterial({
  color: 0xfffff,
})
const lineGeometry = new THREE.BufferGeometry();
const lineVerts = [ 0, 0.05, 0, 0, 0.02, 0];
lineGeometry.setAttribute("position", new THREE.Float32BufferAttribute(lineVerts, 3))

for ( let i = 0; i < 4; i++){
  const line = new THREE.Line(lineGeometry, crossMaterial);
  line.rotation.z = i * 0.5 * Math.PI;
  crosshairs.add(line)
}

• mousePosition은 2D 벡터, THREE.Vector2 객체입니다. mousePositon은 나중에 마우스의 위치를 저장하는 데 사용될 수 있습니다. 
• THREE.Group 객체를 생성합니다. 이 객체는 여러 개의 객체들을 그룹화할 수 있는 컨테이너 역할을 합니다. 십자선을 구성하는 선들을 이 그룹에 추가하여 십자선을 하나의 객체처럼 다룰 수 있게 합니다.
• 십자선 그룹을 카메라 앞의 z축 -1 위치에 배치합니다. 카메라의 좌표계에서, z축의 음수 방향은 카메라가 바라보는 쪽이므로, 십자선이 카메라의 바로 앞에 위치하게 됩니다. z = -1로 설정하여 십자선이 화면에 렌더링되도록 합니다.
• 카메라에 십자선 그룹을 부착합니다. 이를 통해 카메라가 움직이거나 회전할 때 십자선도 함께 움직이도록 합니다. 이 방법을 사용하면 십자선이 화면에 고정된 상태로 유지됩니다.
• 버퍼 지오메트리(BufferGeometry) 객체를 생성합니다. BufferGeometry는 점, 선, 면과 같은 3D 객체의 형태를 정의하는 기본적인 구조입니다. 여기서 십자선의 선을 정의하기 위해 사용됩니다.
• 이 배열은 선의 정점 좌표(Vertices)를 정의합니다. 3D 공간에서 각 점의 x, y, z 좌표가 필요하며, 여기에 두 개의 점이 포함되어 있습니다. 첫 번째 점: (0, 0.05, 0) (y축 방향으로 0.05만큼 위에 위치). 두 번째 점: (0, 0.02, 0) (y축 방향으로 0.02만큼 아래에 위치). 이 두 점을 연결하면 수직선이 생성됩니다.
• lineVerts에 저장된 좌표들을 지오메트리의 위치(position) 속성으로 설정합니다.
• Float32BufferAttribute는 3D 좌표를 설정할 때 사용되는 객체로, 배열(lineVerts)에 저장된 점들을 3개씩 묶어서 (x, y, z) 좌표로 취급합니다.
• 네 개의 선을 만들기 위한 반복문입니다. 첫 번째 선은 수직선으로 만들고, 두 번째 선은 그 수직선을 회전 (90도= Math.PI *0.5) 시켜서 십자선을 만듭니다.  z축을 기준으로 회전하므로 수평선이 생성됩니다.
• 기본적으로 만들어진 선은 수직선입니다. 이를 z축을 기준으로 90도씩 회전시켜 수평선을 추가하면, 네 개의 선이 교차하여 십자선 모양을 만들 수 있습니다.
• 이 코드의 핵심은 THREE.Line 객체를 이용하여 수직선과 수평선을 만들어, 카메라에 고정된 십자선을 화면 중앙에 표시하는 것입니다.

 

 

 

참고 : crosshairs 와 mouse pointer 일치 시키기