공간정보시스템 / 3차원 시각화 / 딥러닝 기반 기술 연구소 @지오서비스(GEOSERVICE)
왼쪽은 반사 재질이고 오른쪽은 굴절 재질인데.. 각각의 재질은 다음과 같습니다.
const cubeMaterial1 = new THREE.MeshStandardMaterial({ color: 0xffffff, envMap: textureCube, metalness: 1, roughness: 0 });
const cubeMaterial2 = new THREE.MeshPhongMaterial({ color: 0xccfffd, envMap: textureCube, refractionRatio: 0.985, /* reflectivity: 0.9 */ });
재질의 refractionRatio와 reflectivity 속성은 MeshPhongMaterial에서만 사용할 수 있다는 점에 주의할 것.
웹 개발에서 HTML을 JS나 TS의 문자열로 구성하는 경우가 흔한데요. 이 경우 HTML에 대한 문자열에 대한 각 구문에 대한 색상 적용이 안되어 코드 가독성이 떨어집니다. 이런 경우 VS.Code에서 효과적으로 활용할 수 있는 확장 기능입니다.
위의 확장 기능을 통해 적용된 예시는 다음과 같구요.
환경맵(envmap)을 사용해서 주변 환경의 모습을 비추는 객체를 표현할 때 적용할 수 있는 코드입니다. 먼저 아무런 재질도 적용되지 않은 검정색 구체입니다.
위의 검정색 구에 주변 환경 이미지를 환경 맵 소스로 활용하는 코드는 다음과 같습니다.
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 1024 );
this._mirrorSphereCamera = new THREE.CubeCamera( 0.05, 50, cubeRenderTarget );
this._scene.add( this._mirrorSphereCamera );
const mirrorSphereMaterial = new THREE.MeshBasicMaterial( { envMap: cubeRenderTarget.texture } );
this._sphere.material = mirrorSphereMaterial;
환경맵을 생성하는 CubeCamera 객체의 상태가 변경될 경우… 예를들어 카메라의 위치 등이 변경될 경우 다음처럼 update 매서드를 호출해줘야 합니다.
this._mirrorSphereCamera.update( this._renderer, this._scene );
이 글에 사용된 코드와 결과는 Three.js에서 제공되는 예제 코드 중 webgl_animation_skinning_ik.html에서 환경맵 적용에 대한 내용만을 정리한 것입니다.
Three.js는 이동(position), 회전, 크기변환과 같은 3차원 변환을 위해 행렬을 사용함. Object3D의 파생 클래스의 모든 객체는 matrix 속성을 가지고 있고 이 속성은 객체의 위치, 회전, 크기 변환값이 저장되어 있음. 이 글은 객체의 변환을 어떻게 업데이트 하는지 기술함.
객체의 변환을 업데이트하기 위해서는 2가지 방법이 있음.
1. 객체의 position, quaternion, scale 속성을 변경하고 이 속성들로부터 객체의 행렬을 다시 계산시킴.
object.position.copy( start_position ); object.quaternion.copy( quaternion );
기본적으로 matrixAutoUpdate 속성이 true이므로 행렬은 자동적으로 재계산됨. 만약 객체가 정적이거나 행렬 재계산을 수동으로 제어하고자 한다면 matrixAutoUpdate를 false로 지정하여 더 나은 퍼포먼스를 얻을 수 있음. 이때 다음처럼 수동으로 행렬을 재계산할 수 있음.
object.updateMatrix();
2. 객체의 행렬을 직접 변경해도 됨. Matrix4 클래스는 행렬 변경을 위한 다양한 매서드를 제공함.
object.matrix.setRotationFromQuaternion( quaternion ); object.matrix.setPosition( start_position ); object.matrixAutoUpdate = false;
윗 코드의 경우 matrixAutoUpdate의 값은 false로 지정했고 updateMatrix 매서드가 호출되지 않도록 보장해야 함. updateMatrix 매서드를 호출하면 position, scale 등의 속성값으로 행렬이 재계산되어 버림.
객체의 행렬에는 부모 객체와 연관된 객체의 변환값이 저장되어 있음. 월드 좌표계에 대한 객체의 변환을 얻기 위해서는 객체의 Object3D.matrixWorld에 접근해야 함.
부모 또는 자식 객체의 변환이 변경될 때, 자식 객체의 matrixWorld를 업데이트되도록 updateMatrixWorld 매서드를 호출할 수 있음.
Three.js는 3차원 회전을 위해 2가지 방식을 제공: 오일러(Euler) 각도와 쿼터니안(Quaternions). 이 2가지 방식은 상호간의 변환이 가능함. 오일러 각도 방식은 짐벌락(Gimbal Lock)이라고 불리우는 문제가 있음으로 객체의 회전은 반드시 쿼터니안 방식을 위한 quaternion 속성을 이용해야 함.