바빌론JS - 때깔나는 미니자동차, 달려봐

지난 시간에는 미니자동차 외형을 구성하는 모델을 만들었는데요.

https://itadventure.tistory.com/691

바빌론JS - 미니자동차

그다지 모양이 나지 않아 에이~ 이게 뭐야 하신 분들도 계실겁니다.
그랬던 미니 자동차가 오늘 새롭게 탄생합니다!
바로 무늬빨을 입고 말이지요 :)

이 내용은 공식 튜토리얼의 내용을 소화하여 크레이 나름대로 재구성한 것입니다.

---

텍스쳐의 힘!

---

3D 그래픽은 모델에 입히는 텍스쳐에 따라 느낌이 상당히 달라지는데요.
미니자동차에 텍스쳐를 입혀 갖고 싶은 장난감이 되도록 해봅시다 :)

우선 아래 파일을 다운받아 

car.png

0.07MB

tire.png

0.14MB

main.js 와 같은 폴더에 넣어 주세요.

파일명은 각각 car.png, tire.png 이며 픽사베이(pixabay) 무료 이미지 사이트에서 가져와 편집했습니다.

car.png 는 이렇게 생긴 이미지인데 이걸로 차 몸통을 감쌀거고,

타이어는 이렇게 생긴 이미지인데 타이어 휠 부분에 적용할 겁니다.

만일 독자 여러분만의 차를 갖고 싶다면 앞의 png 를 포토샵이나 포토피아같은 이미지 툴로 편집하시면 됩니다.

이제 차 몸통에 텍스쳐를 입혀 볼까요?
지난 번 FaceUV를 지정해 집을 꾸민것 처럼 비슷하게 하면 되는데요.

아래 코드를 찾아

const car = BABYLON.MeshBuilder.ExtrudePolygon(

그 윗 부분에 FaceUV 정의와 매트리얼 생성 코드를 추가해 주세요.

// 차 faceUV
const faceUV = [];
faceUV[0] = new BABYLON.Vector4(0, 0.5, 0.38, 1);
faceUV[1] = new BABYLON.Vector4(0, 0, 1, 0.5);
faceUV[2] = new BABYLON.Vector4(0.38, 1, 0, 0.5);

// 차 메트리얼
const carMat = new BABYLON.StandardMaterial("carMat");
carMat.diffuseTexture = new BABYLON.Texture("car.png");

그리고 방금 찾은 코드는 아래와 같이 변경합니다.

const car = BABYLON.MeshBuilder.ExtrudePolygon(
    "car", 
    {
        shape: outline,
        depth: 0.2, 
        faceUV: faceUV, 
        wrap: true
    }
);

// 차 매트리얼은 모델 생성 후 적용
car.material = carMat;

그러면 이렇게 됩니다.

이어서 타이어도 적용해 봅시다.
아래 코드를 찾아

 const wheelRB = BABYLON.MeshBuilder.CreateCylinder(

윗 부분에는 이 코드를 추가하고,

// 타이어 faceUV
const wheelUV = [];
wheelUV[0] = new BABYLON.Vector4(0, 0, 1, 1);
wheelUV[1] = new BABYLON.Vector4(0, 0.5, 0, 0.5);
wheelUV[2] = new BABYLON.Vector4(0, 0, 1, 1);

// 타이어 매트리얼
const wheelMat = new BABYLON.StandardMaterial("wheelMat");
wheelMat.diffuseTexture = new BABYLON.Texture("tire.png");

금방 찾은 코드는 이렇게 변경해 주세요.

const wheelRB = BABYLON.MeshBuilder.CreateCylinder(
    "wheelRB", 
    {diameter: 0.125, height: 0.05, faceUV: wheelUV}
)
// 타이어 매트리얼은 모델 생성 후 적용
wheelRB.material = wheelMat;

그러면 이렇게 됩니다.

차가 전복되어 있으니 똑바로 세워 봅시다.
아래 코드를 찾아

return car;

그 위에 아래 코드를 추가하면

// 차 똑바로 세우기
car.rotation.x = -Math.PI / 2;

차가 똑바로 섭니다. 이제 달려볼까요?

---

바퀴를 굴려보자

---

이제 바퀴를 굴려봅시다.
바퀴를 굴리는 애니메이션으로 BABYLON.Animation 이 적당한데요.

금방 차를 세우는 코드 아래 코드를 추가해 주세요.

// 휠 애니메이션
const animWheel = new BABYLON.Animation(
    "wheelAnimation", // 애니메이션 이름
    "rotation.y",       // 대상
    30,                 // fps 속도
    BABYLON.Animation.ANIMATIONTYPE_FLOAT, // 데이터 타입
    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE   // 반복 모드(회전)
);

// 0프레임과 30프레임의 애니메이션 값 조정
const wheelKeys = []; 
wheelKeys.push({
    frame: 0,   // 0 프레임
    value: 0    // 0도
});
wheelKeys.push({
    frame: 30,          // 30 프레임
    value: 2 * Math.PI  // 360도
});
animWheel.setKeys(wheelKeys);

// 각 바퀴 애니메이션 속성 정의
wheelRB.animations = [ animWheel ];
wheelLB.animations = [ animWheel ];
wheelRF.animations = [ animWheel ];
wheelLF.animations = [ animWheel ];

// 애니메이션 재생 시작
// ( 대상, 시작 프레임, 끝 프레임, 반복 )
scene.beginAnimation(wheelRB, 0, 30, true); 
scene.beginAnimation(wheelLB, 0, 30, true); 
scene.beginAnimation(wheelRF, 0, 30, true); 
scene.beginAnimation(wheelLF, 0, 30, true);

그리고 이대로 실행하면 오류가 납니다.
자동차 함수화 코드에는 scene가 없기 때문이지요.
그래서 함수에 scene 를 넘겨주어야 합니다.

아래 코드를 찾아

const buildCar = () => {

이렇게 바꾸고

const buildCar = (scene) => {

아래 코드 역시

const car = buildCar();

아래와 같이 바꿔 줍니다.

const car = buildCar(scene);

이제 준비되었습니다.
영상으로 결과를 볼까요 ? :)

멋진 결과물이 나온것 같습니다 :)
멋지게 달리고 있지만 사실 아직 자동차는 이동하고 있는 것은 아닙니다.
허공에서 공회전만을 할 뿐이지요.
다음에는 마을을 활주하는 미니자동차를 연출해보도록 하겠습니다.

실습이 어려우신 분은 아래 웹페이지에서 결과물을 확인해 보실 수 있습니다.

http://dreamplan7.cafe24.com/babylon/ex10/

---

마무~리

---

오늘은 미니자동차가 드디어 새 옷을 입고 달리는 연출을 시작하는 부분을 다루어 보았습니다.
점점 더 흥미로워지지 않으신가요 ? :)
필요하신 분에게 도움이 되셨으면 합니다.

오늘도 찾아주신 모든 분들께 감사드립니다~

---

다음 게시글 : https://itadventure.tistory.com/693

미니자동차 직진하다.