Object3D - three.js

Object3D는 3D 공간에서 객체를 표현하기 위한 기본 클래스로, 객체 간의 계층 구조(hierarchy)를 형성하고, 각 객체의 위치, 회전, 크기 변환 등을 담당합니다. 모든 Object3D 객체는 다른 Object3D 객체의 자식으로 추가될 수 있으며, 상위 객체의 변환(translation, rotation, scaling)은 하위 객체에 영향을 미칩니다.

const object = new THREE.Object3D();

Object3D 클래스의 생성자는 기본적으로 빈 3D 객체를 생성합니다. 이 객체는 위치, 회전, 크기 등의 속성을 갖지만, 그 자체로는 아무것도 렌더링하지 않습니다. 주로 부모로서 다른 3D 객체를 그룹화하거나 이동시키는 용도로 사용됩니다.

 

주요 Properties (속성)

1. position:
   • 객체의 위치를 나타내는 속성으로, THREE.Vector3 타입입니다.
   • 기본값: (0, 0, 0) (x, y, z 좌표).
   • 예시: object.position.set(1, 2, 3);
2. rotation:
   • 객체의 회전을 나타내는 속성으로, THREE.Euler 타입입니다.
   • 라디안 단위로 x, y, z 축에 대한 회전을 설정합니다.
   • 예시: object.rotation.set(Math.PI / 4, 0, 0); // x축으로 45도 회전
3. scale:
   • 객체의 크기를 나타내는 속성으로, THREE.Vector3 타입입니다.
   • 기본값: (1, 1, 1)이며, 이 값을 변경하면 객체의 크기가 조정됩니다.
   • 예시: object.scale.set(2, 2, 2); // 크기를 2배로 확장
4. matrix:
   • 객체의 위치, 회전, 크기 변환을 포함한 4x4 변환 행렬. 일반적으로 수동으로 설정하지 않으며, updateMatrix()를 사용해 갱신합니다.
5. matrixWorld:
   • 전역 공간에서 객체의 변환을 나타내는 행렬. 부모 객체의 변환도 포함됩니다.
6. children:
   • 이 Object3D 객체의 자식 객체들의 배열입니다. 객체를 계층적으로 구조화할 수 있습니다.
   • 예시: object.add(mesh); // mesh를 자식 객체로 추가
7. parent:
   • 현재 객체의 부모 객체를 가리킵니다. 객체가 다른 객체의 자식일 경우, 부모 객체가 이 속성에 저장됩니다.
8. visible:
   • 객체가 렌더링될지 여부를 나타냅니다.
   • 기본값: true. false로 설정하면 해당 객체와 그 자식 객체는 렌더링되지 않습니다.
9. castShadow:
   • true로 설정하면 해당 객체가 그림자를 투사합니다.
   • 기본값: false.
10. receiveShadow:

• true로 설정하면 해당 객체가 그림자를 받습니다.
• 기본값: false.

주요 Methods (메서드)

1. add(object):
   • 현재 객체에 자식 객체를 추가합니다.
   • 예시: parent.add(child);
2. remove(object):
   • 현재 객체에서 자식 객체를 제거합니다.
   • 예시: parent.remove(child);
3. lookAt(vector):
   • 객체가 주어진 벡터 또는 좌표를 바라보도록 회전을 설정합니다.
   • 예시: object.lookAt(new THREE.Vector3(0, 0, 0)); // 원점을 바라보게 함
4. translateX(distance), translateY(distance), translateZ(distance):
   • 현재 객체를 해당 축으로 특정 거리만큼 이동시킵니다.
   • 예시: object.translateX(10); // x축으로 10만큼 이동
5. rotateX(angle), rotateY(angle), rotateZ(angle):
   • 각 축을 기준으로 객체를 회전시킵니다.
   • 예시: object.rotateY(Math.PI / 4); // y축으로 45도 회전
6. getWorldPosition(target):
   • 현재 객체의 전역(world) 위치를 반환합니다.
   • 예시: object.getWorldPosition(new THREE.Vector3());
7. getWorldQuaternion(target):
   • 객체의 전역 회전을 쿼터니언(Quaternion) 형태로 반환합니다.
8. getWorldScale(target):
   • 객체의 전역 크기를 반환합니다.
9. getWorldDirection(target):
   • 객체의 전역 방향을 반환합니다.
10. clone():
    • 현재 객체의 복사본을 생성합니다.
    • 예시: const newObject = object.clone();
11. raycast(raycaster, intersects):
    • Raycaster를 사용해 객체와 충돌을 감지하는 데 사용됩니다. 이를 통해 마우스 클릭이나 터치 이벤트 등을 처리할 수 있습니다.
    • 예시: object.raycast(raycaster, intersects);

// Object3D 객체 생성
const object = new THREE.Object3D();

// 자식으로 큐브 메쉬 추가
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

// Object3D에 큐브 추가
object.add(cube);

// Object3D를 이동, 회전, 크기 조절
object.position.set(2, 3, 4);
object.rotation.set(Math.PI / 4, Math.PI / 4, 0);
object.scale.set(1.5, 1.5, 1.5);

// Object3D를 씬에 추가
scene.add(object);