Three.js와 WebGPU로 제작하는 인터랙티브 소프트바디 슬라임

제작자 메모

새 디렉터리를 만들고, 브라우저에서 플레이할 수 있는 슬라임 페이지를 제작해 주세요. Three.js와 WebGPU를 사용하고, WebGL로 대체하지 마세요. 화면 중앙에는 동글동글한 슬라임을 배치해 주세요. 분홍색이나 청록색 모두 괜찮고, 반투명한 표면 안에 기포가 은은하게 보이도록 해 주세요. 마우스로 눌러 변형하거나 끌고 다닐 수 있어야 하며, 놓으면 흔들리면서 원래 형태로 돌아오게 해 주세요. 약간의 중력을 적용해 보이지 않는 책상 위에 가볍게 튕겨 부딪힐 수 있도록 해 주세요. 단단한 공처럼 보이지 말고, 말랑한 살덩이 같은 느낌을 살려 주세요. 얼굴에는 귀여운 포인트를 추가해 주세요. 검은 콩알 같은 눈 두 개와 작은 입을 배치하고, 눈과 입도 몸체 표면과 함께 눌려 변형되도록 해 주세요. 눈과 몸체를 분리된 요소처럼 만들지 마세요. 오른쪽에는 색상, 탄성, 감쇠를 조절하는 간단한 컨트롤을 몇 가지 배치해 주세요. 「콕 찌르기」 버튼을 누르면 슬라임이 한 번 튀어 오르게 해 주세요. 페이지는 깔끔하게 구성하고, 배경은 밝은 회색으로 해 주세요. 제목은 큰 글자로 표시해 주세요. 60fps로 실행될 수 있어야 합니다. 먼저 목표 효과 이미지를 만든 다음, 그 이미지를 기준으로 구현해 주세요. 스크린샷이 목표와 비슷해진 뒤에 세부 요소를 추가해 주세요.