지난 시간에는 3D섬 위에 발랄하고 귀여운 여자 아이와 강아지를 배치해보았습니다.
하지만 서로 다른 방향을 바라보고 있고 집에 비해 덩치가 너무 큽니다.
오늘은 그 부분을 조정해 보겠습니다.
미리해보고 하는게 아니라 바로바로 실행하는 거라 시행착오가 있어도 그대로 공유드릴께요 🙂
쉽게 될른지 모르겠네요. 정 안되면 수동으로 조정하는 방법도 있습니다.
3D에서 물체를 자유롭게 배치하려면 관련 기본 지식을 가지고 가셔야 합니다,
코딩은 몰라도 개념은 알아야지요.
첫째는 3D 좌표입니다. 3차원 공간에서 물체는 X, Y, Z 3개를 축을 기준으로 위치값(Position)을 갖는데요.
그림으로 쉽게 설명드리면, 섬을 정면에서 바라볼 때, 가상 세계의 중심 위치를 기준으로 모든 물체는 X축, Y측으로 좌표값을 갖습니다.
위에서 바라볼 때는 Z축 방향을 이용하여서 캐릭터를 앞에 배치할지 뒤에 배치할지를 결정하는데요.
이 좌표는 바라보는 시점 기준은 아닙니다. 가상세계 월드 기준이지요.
즉 바라보는 시점에 해당하는 카메라를 다른 방향으로 틀어도 그 좌표가 유지됩니다.
같은 관점으로 3D 사물들의 회전각(Rotation)이라는 것이 있습니다.
역시 X, Y, Z 축을 기준으로 회전값을 주는 것인데요.
정확한 개념은 ‘쿼터니온’이라는 복잡한 수학이 들어가서 이해하기 어렵습니다.
보통은 Y축만 기준으로 회전하는 단순한 방법을 많이 사용합니다.
마찬가지로 스케일(Scale)이라는 확대/축소값을 갖는데요.
보통은 X, Y, Z 축을 따로 키우지는 않고 전체 크기를 한번에 키웁니다.
보여드리려고 강아지를 집채만하게 키워보았습니다 🙂
위 개념을 한번 이해하시고 출발하시면 앞으로의 3D 바이브 코딩이 쉬워집니다.
캐릭터를 코딩에서 떼어내자!
우선 첫번째 전략을 세워보겠습니다.
AI가 만들어준 소스코드를 조정하면 위의 위치, 방향, 크기 등을 조정할 수 있는데요.
우리는 이걸 직접 수정하지는 않을 겁니다.
아무래도 바이브 코딩은 쉬워야 하고 AI를 활용할거니까요.
아래와 같이 요청하겠습니다.
사물들의 위치, 방향, 크기, 와곽선을 코드와 떼내어 한곳에 모아 설정하려고 해. 배치.json 파일로 저장해서 불러오도록 바꿔줘.잘 되었습니다!
다음과 같은 파일 규격으로 바꿔주었네요.
이제 복잡한 코드 속에서 좌표값을 바꾸기 위해 헤멜 필요가 없습니다.
사실 관리 측면에서도 이런 방법이 좋습니다.
[
{
"id": "gingerbread_house",
"path": "./생강빵 집 3d 모델.glb",
"position": { "x": 0, "z": 0 },
"rotation": { "y": 0 },
"scale": { "type": "fitXZ", "value": 2.0 },
"outline": { "thickness": 0.005, "color": [0, 0, 0] }
},
{
"id": "character",
"path": "./3d character model.glb",
"position": { "x": 1.2, "z": 1.2 },
"rotation": { "y": 3.77 },
"scale": { "type": "fitY", "value": 1.2 },
"outline": { "thickness": 0.005, "color": [0, 0, 0] }
},
{
"id": "puppy",
"path": "./adorable puppy 3d model.glb",
"position": { "x": 1.8, "z": 0.8 },
"rotation": { "y": 1.57 },
"scale": { "type": "fitY", "value": 0.5 },
"outline": { "thickness": 0.005, "color": [0, 0, 0] }
}
]
position 이 바로 앞서 설명드린 위치값인데요.
캐릭터의 위치를 집 앞으로 변경해보겠습니다.
3D 모델을 넣으면서 모델명.glb 를 기억하실텐데요.
해당 glb 에 해당하는 position 값을 수정하시면 됩니다.
{
"id": "character",
"path": "./3d character model.glb",
"position": { "x": 1.2, "z": 1.2 }, => { "x": 1.2, "z": 1.2 }
"rotation": { "y": 3.77 },
"scale": { "type": "fitY", "value": 1.2 },
"outline": { "thickness": 0.005, "color": [0, 0, 0] }
},야호! 한번에 성공할 필요는 없으니 몇번에고 수정하시면서 새로 고침해 확인하시면 됩니다.
저는 강아지 위치가 딱 맞아 바꿀 필요는 없지만 필요한 경우 찾아서 바꿔주시면 됩니다.
방향값 설정은 rotation 으로 하시면 되는데요.
역시 각 모델의 아래와 같은 값을 찾아 y값을 변경하시면 캐릭터가 빙그르르 돌아갑니다.
보통은 AI가 원주율 값 ‘파이’를 기준으로 설정합니다. 그래서 3.14가 기준점에서 180도에 해당합니다.
정확한 계산 없어도 이값 저값 대입해 보세요 🙂
"rotation": {
"y": 3.77
},강아지는 주인을 바라보는 시점으로 방향을 정했습니다.
크기에 해당하는 값은 scale입니다.
AI가 x, y, z 따로 분리해줄 수도 있고 value 값처럼 한번에 조정하도록 해주기도 하는데 이번에 value 값으로 나왔네요.
이 값을 조정하시면 됩니다.
"scale": {
"type": "fitY",
"value": 0.5
},
외곽선이 너무 두껍네요.
외곽선 두께를 조정해 가느다랗게 하겠습니다.
"outline": {
"thickness": 0.005,
"color": [
0,
0,
0
]
}위치, 방향, 크기, 외곽선 두께 등을 조정한 최종 화면입니다.
마음에 드네요 ㅎㅎ
결과물입니다만, 앞으로 계속 변경될 수 있습니다.
https://3dweb-1.netlify.app/
아무쪼록 도전하시는 모든 분들 성공하시기를 바라며 오늘은 여기까지!
다음에는 어떤 상상의 나래를 펼칠지 많은 성원 바랍니다!
캐릭터의 위치, 방향, 크기 등의 정보를 json 파일 ‘한 곳으로 모이게’ 하였습니다.
그러다 보니 성경말씀 창세기 1장 천지창조의 말씀이 떠올랐는데요.
“하나님이 이르시되 천하의 물이 한 곳으로 모이고 뭍이 드러나라 하시니 그대로 되니라” – 창세기 1장 9절 말씀 –
이 부분을 제미나이에게 물어 얻은 답변입니다 🙂 흥미롭지 않으신가요?
과학적으로 이 구절을 아주 흥미롭게 바라보는 시각도 있어.
지구과학의 대륙 이동설에 따르면, 아주 먼 옛날 지구의 모든 육지는 '판게아(Pangaea)'라는 하나의 거대한 초대륙으로 뭉쳐 있었어.
그리고 그 육지 주변을 '판탈라사(Panthalassa)'라는 단 하나의 거대한 초대양이 둘러싸고 있었지. 육지가 하나로 뭉쳐 있었으니, 자연스럽게 물도 쪼개지지 않고 '한 곳'에 모여 거대한 바다를 이루고 있었던 거야.과학적으로 증명되든 아니든 저는 성경 말씀을 믿습니다.
지성보다 뛰어나신 하나님의 말씀을요. 아무쪼록 성경말씀을 접하실 기회가 되신다면 조금씩이라도 느끼면서 읽어보시길 권유드립니다.