[THREE] Vector2, Vector3

231027(금)

자세한 코드는 없습니다.

---

three.js 강의 코드 보는데 Vector2, Vector3가 지속적으로 나온다. 이게 뭘까?
간단하다. Vector2 2D (x,y) / Vector3 3D(x,y,z) 투디랑 쓰리디인 것이다.

- Vector3

// THREE.Vector
let pointer = new THREE.Vector2();
let startPointer = new THREE.Vector2();
let startPosition = new THREE.Vector3(0, 0, 0);
let startRotation = new THREE.Vector3(0, 0, 0);
let selectObjValue = {
  position: startPosition,
  rotation: startRotation,
};

• Three.js Vector3 3D

// Mesh
	const lineMaterial = new THREE.LineBasicMaterial({ color: 'yellow' });
	const points = [];
	points.push(new THREE.Vector3(0, 0, 100));
	points.push(new THREE.Vector3(0, 0, -100));
	const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
	const guide = new THREE.Line(lineGeometry, lineMaterial);
	scene.add(guide)

const mouse = New THREE.Vector2()

→ 마우스는 평면이라 2D

---

- raycaster "레이 캐스팅(Ray Casting)

3D 여러개 도형 중에 클릭한 첫 번째 도형만 선택하고 싶다면 레이(광선) 캐스터를 사용해야한다.
공간 상의 한 점에서부터 목표 지점까지 가상의 광선을 발사하여, 광선에 닿는 물체의 표면을 검출한다.
Three.js raycaster
raycaster 변천

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

function onPointerMove( event ) {

	// calculate pointer position in normalized device coordinates
	// (-1 to +1) for both components

	pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

function render() {

	// update the picking ray with the camera and pointer position
	raycaster.setFromCamera( pointer, camera );

	// calculate objects intersecting the picking ray
	const intersects = raycaster.intersectObjects( scene.children );

	for ( let i = 0; i < intersects.length; i ++ ) {

		intersects[ i ].object.material.color.set( 0xff0000 );

	}

	renderer.render( scene, camera );

}

window.addEventListener( 'pointermove', onPointerMove );

window.requestAnimationFrame(render);

출처