지난 시간에는 미니자동차 외형을 구성하는 모델을 만들었는데요.
https://itadventure.tistory.com/691
바빌론JS - 미니자동차
어릴적 장난감 자동차를 붕붕 소리내어 가지고 놀아보신 적이 있나요?적어도 필자의 어릴적 기억으로는 큰 장난감 자동차를 가진 친구를 어느정도 부러워 했던것 같습니다.추억을 회상하며 가
itadventure.tistory.com
그다지 모양이 나지 않아 에이~ 이게 뭐야 하신 분들도 계실겁니다.
그랬던 미니 자동차가 오늘 새롭게 탄생합니다!
바로 무늬빨을 입고 말이지요 :)
이 내용은 공식 튜토리얼의 내용을 소화하여 크레이 나름대로 재구성한 것입니다.
텍스쳐의 힘!
3D 그래픽은 모델에 입히는 텍스쳐에 따라 느낌이 상당히 달라지는데요.
미니자동차에 텍스쳐를 입혀 갖고 싶은 장난감이 되도록 해봅시다 :)
우선 아래 파일을 다운받아
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
미니자동차 직진하다.
이번 시간에는 지난 시간에 이어 https://itadventure.tistory.com/692 바빌론JS - 때깔나는 미니자동차, 달려봐지난 시간에는 미니자동차 외형을 구성하는 모델을 만들었는데요.https://itadventure.tistory.com/6
itadventure.tistory.com
'자바스크립트와 캔버스' 카테고리의 다른 글
바빌론JS - 경로 우대? 경로 따라 걷는 NPC (2) | 2024.07.21 |
---|---|
바빌론JS - 이동하는 NPC (4) | 2024.07.21 |
바빌론JS - 미니자동차 (0) | 2024.07.16 |
바빌론JS - 마을 저장 & 열기 (2) | 2024.07.15 |
바빌론JS 를 vscode 에서 쉽게 - 코드스니펫 목록 (0) | 2024.07.12 |