鬥魚骨骼動畫

由 three.js 與 XPBD 約束驅動的水下物理動畫:一條鬥魚綁定 50 多個骨骼節點,拖曳魚頭即可牽動全身,讓尾鰭自然擺動。複製提示詞,一鍵生成同款 3D 互動動畫。

Loading preview...
從這段提示詞開始

生成可拖曳的鬥魚骨骼物理動畫

換成水母

將主角換成半透明水母與觸手骨骼。

試用 Kimi 建置應用程式
用 three.js 綁定 XPBD 約束,打造流暢的物理動態:鬥魚至少有 50 個骨骼節點,置於水下場景中,可拖曳魚頭牽動全身,尾巴靈活擺動,刷好權重後製作 HTML 互動。 將主角換成一隻半透明水母:骨骼節點沿傘蓋邊緣與觸手分布,拖曳傘蓋時,觸手會隨 XPBD 約束延遲擺動;材質改為具次表面散射效果的半透明質感,場景光改為深藍色調。 
加魚群與餵食

加入魚群巡游與點擊投餵互動。

試用 Kimi 建置應用程式
用 three.js 綁定 XPBD 約束,打造流暢的物理動態:鬥魚至少有 50 個骨骼節點,置於水下場景中,可拖曳魚頭牽動全身,尾巴靈活擺動,刷好權重後製作 HTML 互動。 在主鬥魚之外加入一群 8 條小型魚,使用簡化的集群演算法讓牠們在水中巡游並避開鬥魚;點擊水面任意位置投下魚飼料,鬥魚與魚群會轉向游往食物。 
生物課演示版

加入骨骼標註與說明,適合課堂演示。

試用 Kimi 建置應用程式
用 three.js 綁定 XPBD 約束,打造流暢的物理動態:鬥魚至少有 50 個骨骼節點,置於水下場景中,可拖曳魚頭牽動全身,尾巴靈活擺動,刷好權重後製作 HTML 互動。 為動畫加入教學標註模式:開啟後顯示鬥魚主要骨骼節點的名稱與連線(脊柱、尾柄、各鰭條),點擊節點會彈出一句功能說明,面板文字使用中文,適合課堂投影演示。