일단 예제로 하나의 box를 예로들어 설명하겠다.
(직접 설계한 모델을 불러와 morphing 하는 것도 있지만 그건 방식이 좀 달랐다.)
먼저 아래와 같이 박스를 정의해 준다.
(변수의 이름은 임의로 설정했다.)
var geomCockpit = new THREE.BoxGeometry(60,50,70,1,1,1);
var matCockpit = new THREE.MeshPhongMaterial({color:Colors.red, morphTargets: true});여기서 MeshPhongMaterial 함수는 재질을 나타내는 것인데 자세한 설명은 아래의 링크에 있다.
https://justmakeyourself.tistory.com/entry/mesh-and-light
[three.js] 오브젝트(mesh)와 빛(light)
mesh는 2가지로 나눠져 있습니다. 바로 형태와 재질입니다. 왜 이 두가지를 구분했을까요? 똑같은 형태지만 여러 가지의 재질 및 색깔을 사용할 수 있고, 다른 형태들이지만 동일한 재질 및 색깔을 사용하기 편하..
justmakeyourself.tistory.com
어떠한 재질 함수를 사용하든 상관은 없다. 중요한 사실은 morphTargets: true 설정을 해주는 것이다.
var cubeTarget1 = new THREE.BoxGeometry(200,70,40,1,1,1);
var cubeTarget2 = new THREE.BoxGeometry(20,10,100,1,1,1);
// define morphtargets and compute the morphnormal
geomCockpit.morphTargets[0] = {name: 't1', vertices: cubeTarget1.vertices};
geomCockpit.morphTargets[1] = {name: 't2', vertices: cubeTarget2.vertices};
geomCockpit = new THREE.BufferGeometry().fromGeometry( geomCockpit );
var cockpit = new THREE.Mesh(geomCockpit, matCockpit);다음으로 타겟 박스를 설계한 후에 morphTargets라는 배열에 Object 객체의 형식으로 넣어준다.
그리고 THREE.BufferGeometry().fromGeometry( geomCockpit ) 해당 부분을 꼭 해주어야 하는데,
알아보니 버퍼의 크기는 수정할 수 없지만 버퍼를 업데이트 시킬수 있게 변환하는 과정이라고 한다.
이 부분에 대해선 더 알아봐야할거 같다.
그리고 new THREE.Mesh(geomCockpit, matCockpit) 해당 함수를 통해 선과 면이 만난 mesh를 비로소 생성한다.
다음단계로 morph를 실제로 해주는 morphTargetInfluences 를 이용하면 morph가 되는것을 확인할 수 있었다.
// value는 0 ~ 1 사이값
cockpit.morphTargetInfluences[ 0 ] = value;
cockpit.morphTargetInfluences[ 1 ] = value;
일반 적으로 해당 함수의 값은 0~1 범위밖에 없다.
즉 1은 타겟 모양으로 완전히 변화된 상태 0은 초기상태이다.
댓글