Object3D Hierarchy

Object3D는 Three.js의 많은 개체에 대한 기본 클래스로 3D 공간에서 개체를 조작하기 위한 메서드와 속성을 제공한다

 

가장 일반적인 ex) 메쉬, 조명, 카메라 및 Object3D 이다

https://threejs.org/docs/#api/en/core/Object3D

three.js docs

 

장면에 다른 Object3D 추가할수 있으면 부모 Object3D의 add() 메소드를 통해서 자식 Object3D를 만들수 있다

const object1 = new THREE.Mesh(
    new THREE.SphereGeometry(),
    new THREE.MeshPhongMaterial({ color: 0xff0000 }) // 빨강
)
object1.position.set(4, 0, 0)
scene.add(object1) //부모 object1

const object2 = new THREE.Mesh(
    new THREE.SphereGeometry(),
    new THREE.MeshPhongMaterial({ color: 0x00ff00 }) // 초록
)
object2.position.set(4, 0, 0)
object1.add(object2) // 부모 object1 의 자식 object2 넣어준다

const object3 = new THREE.Mesh(
    new THREE.SphereGeometry(),
    new THREE.MeshPhongMaterial({ color: 0x0000ff }) // 파랑
)
object3.position.set(4, 0, 0)
object2.add(object3) // 부모 object2 의 자식 object3 넣어준다

scene
    |--object1 (Red Ball)
             |--object2 (Green Ball)
                       |--object3 (Blue Ball)

• 빨간공에 대한 변경은 녹색공, 파란공의 영향을 미친다.
• 녹색공의 변경은 파란공의 영향을 미치지만 부모인 빨간공에 영향을 안미친다.
• 파란공의 변경은 부모공의 영향을 미치지 않는다

 

• 위치, 회전/쿼터니언 및 크기조정 같은 Object3D 변환을 가져오면 Local 공간의 값이 반환 된다
• Object3D 자식인 경우 월드 변환 값은 부모,조부모의 변환도 고려한다

obj.position // values are local transform
obj.rotation // values are local transform
obj.quaternion // values are local transform
obj.scale // values are local transform

 

Object3D의 월드 변환을 얻으려면?

const objectsWorldPosition = new THREE.Vector3() 
object.getWorldPosition(objectsWorldPosition) // values are world transform

const objectsWorldDirection = new THREE.Vector3()
object.getWorldDirection(objectsWorldDirection) // values are world transform

const objectsWorldQuaternion = new THREE.Quaternion()
object.getWorldQuaternion(objectsWorldQuaternion) // values are world transform

const objectsWorldScale = new THREE.Vector3()
object.getWorldScale(objectsWorldScale) // values are world transform