Kimi K3 深度評測 – 前端開發能力登頂全球第一

0 0 0

昨晚，月之暗面悄悄上線了新旗艦模型 Kimi K3，我的朋友圈和社羣幾乎被刷屏了。

這一次，Kimi K3 不僅在參數體量上實現了翻倍，2.8T 參數，直接刷新全球開源模型的規模紀錄！上下文窗口也從上一代的 256K 提升至最高 1M tokens，還通過創新的 MoE 架構與 Kimi Delta Attention 機制，將整體擴展效率提升了 2.5 倍。

官方案例顯示，Kimi K3 連續自主運行 48 小時，爲基於自身架構的 Nano 模型，設計了一顆可以運行它的芯片。說明 Kimi K3 已經開始具備跨學科、長週期、可驗證的自主研發能力。

Kimi K3 深度評測 – 前端開發能力登頂全球第一

還有不少網友曬用 Kimi K3 做的 RPG 遊戲，視覺效果屬實驚豔。

Kimi K3 深度評測 – 前端開發能力登頂全球第一

在 Arena 盲評榜單上，Kimi K3 更是直接登頂全球第一，橫掃了幾乎所有前端開發領域。

Kimi K3 深度評測 – 前端開發能力登頂全球第一

Kimi 官方公開的評測顯示，Kimi K3 的綜合表現高於 Opus 4.8，但距離 GPT-5.6 Sol 和 Fable 5 還有些差距。

Kimi K3 深度評測 – 前端開發能力登頂全球第一

話不多說，我們一起用真實案例感受一下。

01. Kimi K3 一手實測

目前 Kimi K3 已經在 kimi.com、Kimi APP、Kimi Work桌面客戶端、Kimi Code 和 Kimi API 全面上線。

如果你跟我一樣，主要想測試代碼方面，推薦用 Kimi Code，按照官網步驟，一句指令即可下載：

macOS / Linux：

curl -fsSL https://code.kimi.com/kimi-code/install.sh | bash

Windows（PowerShell）：

printf(“hello world!”);irm https://code.kimi.com/kimi-code/install.ps1 | ie

打開終端頁面，輸入Kimi，啓動 Kimi Code，Kimi Code 會自動打開網頁端登錄，不需要輸入 API 就可以用。

輸入 /model ，將模型切換到 K3。

Kimi K3 深度評測 – 前端開發能力登頂全球第一

準備就緒，我們直接開測。

Case 1 3D 遊戲

最近，朋友約我看世界盃直播，我挺喜歡大家一起玩的氛圍的，但是足球我是真不懂啊。

於是我用《我的世界》體素風，搭了一座世界盃決賽場館，把西班牙和阿根廷的對決搬進了方塊世界。

場館可以自由旋轉和切換視角，點擊任何一名球員，都能看到他的名字、位置、技術特點，以及他在球隊中的戰術職責。

提示詞：設計並完整實現一個精緻、龐大、色彩豐富的 “我的世界”體素藝術風格 3D 場景，還原 2026 年世界盃總決賽：西班牙 vs 阿根廷。

工作目錄下的場館.png 場館2.png 是本次需要還原的比賽場景，球員.png 是上場球隊，左邊紅色球服爲西班牙隊服，右邊藍白條紋球服爲阿根廷隊服，球員.png 作爲球隊成員人物比例、隊服顏色、圖案和造型的唯一視覺基準。請先讀取並仔細分析參考圖，嚴格按照圖片中的場景、人物服飾外觀進行建模，包括體育場外輪廓和主體體量，球場草坪，上、中、下層看台及看台座椅和觀衆的顏色分佈。請先讀這 3 張圖，嚴格按它的配色、比例和細節還原。

場景需要同時呈現：

場館：紐約/新澤西體育場（實際位置：美國新澤西州東拉瑟福德）

完整足球場與看台

西班牙、阿根廷雙方球員

正在進行中的足球比賽

球隊介紹、陣容與球員介紹

世界盃決賽級別的觀衆、燈光與慶典氛圍

所有建築、人物、道具和環境必須使用清晰可辨的方塊體素構成。

比賽基礎信息

比賽：西班牙 vs 阿根廷

賽事：2026 FIFA 世界盃總決賽

日期：2026 年 7 月 19 日

開球時間：紐約當地時間 15:00

地點：美國新澤西州東拉瑟福德

場館：紐約/新澤西體育場

世界盃模式容量：80,663 人

默認比分：0–0

默認場景時間：下半場 68 分鐘

比分與時間僅用於交互演示，不預設真實比賽結果

用戶控制

鏡頭

支持自由環繞、俯仰、平移與縮放

鼠標左鍵拖動：環繞球場

鼠標右鍵拖動：平移焦點

滾輪：快速縮放

鏡頭圍繞世界座標的垂直軸旋轉

操作必須輕盈、靈敏：

極低慣性

極低阻尼

不產生沉重或漂移感

限制俯仰角，避免鏡頭翻轉或穿入地面

鏡頭預設

提供緊湊的鏡頭切換按鈕：

體育場全景

高空戰術視角

場邊轉播視角

球門後方視角

西班牙進攻視角

阿根廷進攻視角

跟隨足球

跟隨選中球員

鏡頭切換需要平滑，但動畫時間不超過 0.8 秒。

重新居中

包含“重新居中”按鈕

將焦點恢復到球場中心

同時恢復默認距離、俯仰角和全景視角

不重置比賽動畫、比分或當前時間

比賽控制

暫停／繼續比賽

0.5×、1×、1.5× 動畫速度

顯示／隱藏球員姓名

顯示／隱藏戰術跑位軌跡

恢復默認比賽狀態

場景要求

紐約／新澤西體育場

按照真實場館的整體輪廓進行體素化還原，重點表現：

巨大的開放式矩形橢圓碗體

三層主要觀衆看台

銀灰色金屬外立面

具有節奏變化的豎向金屬格柵

四個角落的大型高清屏幕

環繞看台的數字燈帶

主入口、球員通道、媒體區和貴賓區域

頂部開放式輪廓，不添加不存在的封閉屋頂

體育場外部廣場、道路、停車區域和安檢入口

建築比例、層級關係與剪影應具有較高辨識度

不能只製作一個普通圓形競技場，必須體現紐約/新澤西體育場的現代建築特徵。

足球場

按標準足球場比例建模

深淺交替的草坪條紋

中線、中圈、禁區、球門區、角球弧和點球點

白色邊線必須清晰完整

兩端設置體素球門和方塊球網

包含替補席、技術區、角旗、攝影機與場邊廣告牌

草坪由不同綠色體素形成細微紋理，避免單一平面

西班牙隊

視覺識別

主色：紅色球衣

輔色：黃色細節

深藍色球褲

紅色或深色球襪

守門員使用明顯不同的配色

球衣圖案必須保持體素化，不使用模糊貼圖

球隊介紹

球隊信息面板需要包含：

球隊名稱：西班牙

英文名稱：Spain

身份：歐洲冠軍

世界盃最佳成績：冠軍

戰術標籤：

控球組織

高位壓迫

邊路一對一

中場短傳配合

簡介：以技術、控球和快速局部配合爲核心，通過邊路突破與中場輪轉創造機會

重點球員

至少爲以下球員製作獨立介紹：

拉明·亞馬爾

佩德里

羅德里

尼科·威廉姆斯

米克爾·奧亞薩瓦爾

馬克·庫庫雷利亞

烏奈·西蒙

每位球員介紹包含：

中文名與英文名

位置

技術特點

本場戰術職責

當前場景動作

所屬球隊顏色標識

不要虛構實時進球、助攻、評分或傷病信息。

阿根廷隊

視覺識別

白色與天藍色豎條紋球衣

黑色或深色球褲

白色球襪

守門員使用明顯不同的配色

條紋需要通過方塊顏色直接構成

球隊介紹

球隊信息面板需要包含：

球隊名稱：阿根廷

英文名稱：Argentina

身份：衛冕世界冠軍

世界盃最佳成績：冠軍

戰術標籤：

中路組織

快速轉換

緊湊防守

前場自由跑位

簡介：強調中場強度、攻守轉換與前場創造力，通過核心球員的自由移動打破防線

重點球員

至少爲以下球員製作獨立介紹：

萊昂內爾·梅西

朱利安·阿爾瓦雷斯

勞塔羅·馬丁內斯

亞歷克西斯·麥卡利斯特

恩佐·費爾南德斯

羅德里戈·德保羅

克里斯蒂安·羅梅羅

埃米利亞諾·馬丁內斯

每位球員介紹包含：

中文名與英文名

位置

技術特點

本場戰術職責

當前場景動作

所屬球隊顏色標識

球員建模

每名球員必須由多個獨立體素部件組成：

頭部

頭髮

軀幹

左右手臂

左右腿

球鞋

球衣顏色與球隊標識

球員之間需要存在：

身高差異

髮型差異

膚色差異

守門員與普通球員差異

不同跑步、傳球、射門和防守姿勢

不要把所有球員複製成完全相同的模型。

比賽動作

場上必須同時存在 22 名球員，並處於真實比賽狀態。

重點表現以下動作：

亞馬爾在右路帶球突破

尼科·威廉姆斯在左側前插

佩德里尋找傳球線路

羅德里在中場接應

梅西在中路回撤接球

阿爾瓦雷斯向防線身後衝刺

德保羅進行壓迫

羅梅羅上前攔截

後衛盯人、補位與回追

守門員調整站位並準備撲救

替補席人員觀看比賽

比賽動畫需要包含：

帶球

短傳

長傳

射門

搶斷

滑鏟

跳躍爭頂

守門員撲救

無球跑動

慶祝或遺憾動作

使用循環狀態機形成持續比賽，不要讓球員只是原地擺動。

足球必須在球員之間真實移動，避免無原因瞬移。傳球和射門可以使用簡短的方塊粒子軌跡增強可讀性。

觀衆與決賽氛圍

三層看台必須有大量體素觀衆

西班牙球迷集中使用紅色與黃色

阿根廷球迷集中使用天藍色與白色

中立觀衆使用更多顏色組合

避免規律、機械的重複排列

設置旗幟、圍巾、橫幅和助威牌

部分觀衆站立、揮手或跳躍

四角大屏顯示比賽縮略畫面或隊徽色塊

環形燈帶顯示：

WORLD CUP FINAL

ESPAÑA

ARGENTINA

2026

加入攝影閃光、聚光燈、球員入場通道和場邊媒體區

場館外部環境

體育場外部廣場

球迷入場隊列

方塊化車輛與大巴

西班牙、阿根廷球迷活動區

安檢設施和紀念品攤位

道路、停車場、路燈和樹木

遠處以體素剪影表現紐約都會區

環境必須豐富，但不能搶奪球場主體的視覺注意力

“我的世界”體素風格要求

所有場景元素必須由立方體或方塊化幾何構成

禁止使用光滑寫實人物模型

禁止用普通低多邊形風格冒充體素風格

建築大體素與人物小體素採用不同精度

保留清晰的方塊邊緣和階梯輪廓

使用硬邊陰影與方向光

加入輕微環境霧和塊狀陰影

色彩鮮明，但保持體育轉播級別的整體秩序

不使用寫實照片貼圖

球場標線、球衣條紋和廣告內容優先使用程序化生成

球隊與球員交互

點擊場上球員，打開對應球員介紹卡

點擊陣容列表，鏡頭自動聚焦對應球員

選中球員時：

添加體素輪廓高亮

顯示姓名、位置與球隊

可選擇跟隨鏡頭

點擊球隊名稱，打開球隊介紹面板

面板內可以在“球隊介紹”“重點球員”“完整陣容”之間切換

關閉面板後恢復無遮擋的比賽視野

UI／信息層約束

界面採用像素化體育轉播風格，但必須簡潔。

頂部只保留：

世界盃決賽標識

西班牙隊名與色塊

比分

阿根廷隊名與色塊

比賽時間

底部只保留：

鏡頭預設

暫停／播放

陣容入口

重新居中

右下角顯示緊湊性能數據：

FPS

Draw Calls

當前 LOD

可見體素數量

限制：

不顯示大段操作教程

不設置歡迎頁或標題頁

不使用遮擋球場的大型常駐面板

球隊及球員介紹默認摺疊

面板必須支持關閉

按鈕保持方塊化和像素化，不使用大量圓角卡片

技術規格

交付物

在聊天中提供完整實現代碼

輸出爲一個獨立 HTML 文件

雙擊後可直接通過 file:// 在最新版 Chrome 中運行

不需要安裝依賴

不需要構建步驟

完全離線

禁止任何網絡請求

禁止 CDN

禁止遠程字體

禁止遠程圖片、紋理或音頻

所有代碼、着色器、陣容數據和資源必須內聯

程序運行時網絡請求數量必須爲 0

渲染方式

優先使用原生 WebGL2：

自行實現體素立方體渲染

頂點與片元着色器直接內聯

使用實例化繪製

使用 TypedArray 存儲體素數據

靜態建築、觀衆和動態球員分別批處理

不依賴 Three.js 或其他第三方庫

性能目標

現代桌面設備持續保持不低於 55 FPS

默認目標 60 FPS

限制 devicePixelRatio <= 2

使用 requestAnimationFrame

避免逐幀創建大量對象

重用矩陣、向量、數組和粒子對象

靜態場館幾何只生成一次

動態更新僅作用於球員、足球和少量觀衆

每幀 Draw Calls 儘量控制在 3–8 次

實例化與批處理

分別建立：

體育場靜態體素批次

草坪與場地批次

觀衆批次

球員動態批次

足球與粒子批次

UI 獨立 DOM 層

相同材質的體素儘量一次繪製。

LOD 與可見性優化

實現動態 LOD：

遠距離：降低觀衆密度，隱藏細小道具

中距離：顯示主要觀衆、球員和球場設施

近距離：顯示球員髮型、球衣細節和動作部件

球員跟隨模式：優先保證球員細節

全景模式：優先保證體育場輪廓與觀衆色塊

實現：

視錐體裁剪

距離裁剪

動態觀衆預算

自動像素比例調整

連續低於 52 FPS 時降低一級 LOD

連續高於 58 FPS 時逐步恢復細節

鏡頭實現要求

環繞旋轉基於世界向上軸

俯仰基於攝像機右軸

俯仰角限制在 ±(π/2 – epsilon)

縮放距離必須設置最小值和最大值

防止鏡頭穿入球員、地面和看台

“重新居中”必須重新鎖定球場中心

球員跟隨模式要保持可讀距離，不能貼近模型內部

命名與作用域安全

使用 “use strict”

禁止同一作用域重複聲明變量

避免在嵌套邏輯中大量使用單字母變量名

使用可讀名稱，例如：

previousTime

currentTime

cameraYaw

cameraPitch

playerInstanceCount

禁止全局變量泄漏

所有模塊放入明確的閉包或命名空間

數據準確性

比賽雙方使用西班牙與阿根廷的 2026 世界盃正式參賽陣容

場上展示陣容僅作爲建模演示，不宣稱是官方決賽首發

不虛構真實比賽結果

不虛構球員實時數據

不顯示未經提供的進球、傷病、評分或勝率

球員介紹重點使用位置、特點和戰術職責

西班牙與阿根廷的 2026 世界盃陣容可參考 FIFA 官方名單：西班牙陣容、阿根廷陣容。

質量標準

最終實現必須滿足：

場館輪廓可以辨認爲紐約/新澤西體育場

一眼能夠區分西班牙與阿根廷

22 名球員均處於比賽狀態

球員動作不是簡單原地循環

足球運動具有連續性

球隊介紹與球員介紹可以正常交互

鼠標操作輕盈、準確

重新居中功能可靠

所有功能離線可用

0 個網絡請求

0 個控制檯錯誤

0 個控制檯警告

不出現黑屏、模型閃爍、深度衝突或明顯穿模

默認視角打開後立即看到體育場、球場和正在比賽的雙方球員

Kimi K3 深度評測 – 前端開發能力登頂全球第一

Kimi K3 對長提示詞的理解能力非常棒，我的要求寫了這麼多，Kimi K3 基本都完成了。場館的整體輪廓、看台層級和草坪比例都比較接近參考圖。不同隊伍的球員的辨識度也很高。

這個體素風的世界盃現場還是可交互的，我們可以自由切換全景視角、俯瞰視角、直播視角，甚至還能跟隨足球和某個球員，不同視角下，場館的一致性很穩。

點擊繼續，球員們會像真實比賽一樣，開始傳球、射門、撲救等等，守門員撲救成功後甚至還會舉手歡呼，莫名有點可愛~

能把場館建模、球員動畫、鏡頭系統和交互邏輯同時做出來，Kimi K3 在遊戲與 3D 編程上的表現，確實有點東西。

Case 2 3D 建模

我們再測測 Kimi K3 原生視覺能力，給 Kimi K3 一張圖片，讓它還原成可交互的 3D 模型。

提示詞：幫我構建一個塔式風扇的高質量 3D 產品展示網頁，並在完成後部署上線，返回可訪問的線上地址。

參考圖：工作目錄下的風扇.png 是本次需要還原的塔式風扇。請先讀取並仔細分析參考圖，嚴格按照圖片中的產品外觀進行建模，包括整體配色、結構比例、材質質感、塔身輪廓、頂部雙旋鈕、正面縱向格柵、出風格柵後方的隱藏式貫流風輪、寬扁橢圓底座以及其他可見細節。請先讀這張圖，嚴格按它的配色、比例和細節還原。

特別注意：這款產品沒有傳統圓形扇葉和圓形防護網，但正面縱向出風格柵後方具有隱藏式貫流風輪。必須製作貫流風輪及其旋轉動畫，不得將產品做成完全沒有內部動力結構的空心風道，也不得添加外露的圓形扇葉。

構建要求（Build Requirements）

支持鼠標和觸屏旋轉、縮放及查看模型，可使用 OrbitControls。

頁面在桌面端和移動端均應正常顯示和操作。

1. 主體模型優先

核心目標是準確還原塔式風扇的形狀、比例、結構和材質，並符合真實產品的物理規律。

2. 豐富場景細節

除風扇主體外，設計一個能夠襯托產品的高品質展示環境，例如極簡客廳。

3. 交互組件與動畫

根據塔式風扇的真實功能，爲頁面增加豐富但直觀的交互。

比如：可動部件動畫、旋轉展示、預設視角切換、開機和關機、三檔風速調節、左右搖頭功能開關、定時調節、顯示或隱藏氣流效果

所有動畫都要平滑自然。

4. 測試與截圖迭代

你必須對最終作品保持極高的質量要求。

完成初版後，應在瀏覽器中實際運行並測試，從正面、側面、背面、俯視、近景和移動端等不同視角持續截圖檢查，逐步修復：

模型比例錯誤

搖頭機構運動不合理

材質透明度或反射異常

陰影懸空

操作面板遮擋模型

移動端佈局溢出

頁面加載錯誤

動畫卡頓

控制按鈕失效

反覆對照風扇.png 覈對產品的配色、結構和關鍵外觀特徵，持續迭代，直到作品達到高質量商業產品展示頁面的標準。

5. 技術選擇

根據實現效果選擇合適的技術棧，例如：

Three.js 或 React Three Fiber

WebGL / WebGPU

HTML、CSS、JavaScript 或 TypeScript

GSAP 或其他動畫方案

Web Audio API

程序化幾何體、SVG、CSS 特效或 GLSL Shader

可以組合使用多種技術，但需要保證項目結構清晰、運行穩定、加載速度合理。

本次額外硬性要求

1. 真實的風速檔位

風扇至少支持關閉、低速、中速和高速四種狀態。

不同檔位必須明顯改變內部貫流風輪的轉速，並使用平滑的加速和減速過程。關閉風扇後，貫流風輪應受慣性影響逐漸停止，不能瞬間靜止。

2. 左右搖頭功能

風速與搖頭旋鈕具有 8 個物理檔位，依次爲：關閉 A、低速不搖頭、中速不搖頭、高速不搖頭、關閉 B、低速搖頭、中速搖頭、高速搖頭。兩個關閉檔位均停止送風和搖頭。

開啓搖頭後，上方塔身應相對底座，圍繞底座中心的垂直軸左右往復旋轉。底座始終保持固定，不能跟隨塔身一起轉動。

3. 頂部雙旋鈕可以交互調節

頂部兩個機械旋鈕需要支持鼠標拖動、觸屏滑動或點擊旋轉：

定時旋鈕：調節關閉、30 分鐘、60 分鐘、90 分鐘和120 分鐘

功能旋鈕：調節關閉、低速、中速、高速以及對應的搖頭模式

旋鈕應具有檔位吸附、合理的角度限制、阻尼感和逐檔“咔噠”音效。網頁控制面板與實體旋鈕狀態必須雙向同步。

4. 動態氣流可視化

風扇啓動後，在正面縱向出風格柵前方顯示剋制、半透明的寬幅動態氣流效果。

氣流的運動速度和強度需要隨風速檔位變化，並可以由用戶單獨關閉。氣流不能遮擋產品主體，也不能做成誇張的實體圓柱。

5. 風扇運行音效

使用 Web Audio API 合成輕微的電機和風噪，無需外部音頻文件。

音量和音調應隨風速變化。音效默認保持靜音或在用戶首次主動點擊開機後播放，以符合瀏覽器的自動播放限制，並提供清晰的靜音按鈕。

6. 部署交付

完成開發與測試後：

創建生產構建

確認線上環境可以正常加載 3D 模型、材質和全部交互

將網頁部署到合適的託管平台

返回最終可公開訪問的線上地址

同時說明項目的運行命令、構建命令和主要文件位置

不要只提供代碼或本地預覽，必須實際完成部署並驗證線上頁面可以訪問。

我給 Kimi 的圖片是這樣的。

Kimi K3 深度評測 – 前端開發能力登頂全球第一

看看 Kimi K3 生成的 3D 模型，很還原有沒有。

Kimi K3 看懂了圖片中的產品結構，連產品上面的 logo 細節都生成出來了。

我們調節不同風速檔位時，風輪的旋轉速度會有平滑的加速和減速動畫，搖頭非常平穩且迅速，非常擬真。

頁面頂部的兩個實體機械旋鈕支持拖拽和旋轉。最厲害的是，網頁的 HTML 控制面板與 3D 模型的實體旋鈕狀態做到了雙向同步，整體質量很高。

Case 3 3D 網頁

無論是找工作、接項目，還是展示個人能力，都少不了一份作品集。

我嘗試讓 Kimi K3 做了一個 3D 版本，我們可以在微縮世界裏開着小車自由探索，查看個人介紹、項目案例、技能和聯繫方式等等。

提示詞：請幫我開發一個創意 3D 個人作品集網頁。

項目目標

創建一個可以在瀏覽器中運行的 3D 互動作品集。用戶駕駛一輛低多邊形風格的小車，在微縮 3D 世界中自由移動，通過探索場景瞭解個人介紹、項目案例、技能和聯繫方式。

整體體驗應當像一個輕量級網頁小遊戲，同時具備作品集網站的信息傳達能力。

技術要求

優先使用：

React

TypeScript

Vite

Three.js

React Three Fiber

@react-three/drei

@react-three/rapier

Zustand

如果當前項目已有技術棧，請在不破壞現有結構的前提下實現。

不要依賴付費素材、私有接口或必須登錄才能使用的服務。3D 物體優先使用基礎幾何體組合，確保項目下載依賴後即可運行。

核心體驗

1. 3D 微縮世界

創建一個原創的低多邊形場景，包括：

大面積淺色地面

道路或可駕駛區域

樹木、石頭、路牌、箱子等裝飾

個人介紹區域

項目展示區域

技能展示區域

聯繫方式區域

少量坡道、障礙物和可碰撞物體

場景佈局需要有清晰的探索路徑，但不要使用完全封閉的道路限制玩家。

2. 可駕駛小車

創建一輛原創低多邊形小車，至少包含：

車身

車頂或駕駛艙

四個車輪

前燈或尾燈

明確的車頭方向

控制方式：

W / ↑：前進

S / ↓：後退

A / ←：左轉

D / →：右轉

Space：剎車

R：車輛翻轉或卡住時復位

駕駛手感需要平滑，有加速、減速、轉向和慣性效果。車輛需要與地面、障礙物和展板發生物理碰撞。

不要讓小車輕易穿模、無限加速或因爲輕微碰撞飛出場景。

3. 鏡頭系統

使用第三人稱跟隨鏡頭：

鏡頭位於車輛後上方

平滑跟隨車輛位置與朝向

加速時可以輕微拉遠

轉彎時存在自然延遲

避免鏡頭劇烈抖動

車輛復位後鏡頭自動恢復

提供合理的遠近裁剪範圍

4. 內容展區

在場景中設計四類互動區域：

About

使用大型 3D 文字或立體展板展示：

K姐研究社

一個幫助你把 AI 真正用起來的女子

Projects

至少創建三個項目展板。每個項目包含：

項目名稱

一句話簡介

技術標籤

項目封面佔位圖

“查看項目”按鈕

小車靠近展板時：

展板高亮

出現輕微放大或發光動畫

頁面顯示項目詳情浮層

用戶可以點擊按鈕打開項目鏈接

不要因爲車輛短暫經過就強制跳轉頁面。

Skills

使用原創的 3D 表現方式展示技能，例如：

漂浮方塊

立體圖標牆

環形技能裝置

不同高度的技能柱

示例技能：

React

TypeScript

Three.js

WebGL

UI Design

Creative Coding

Contact

設置一個明顯的終點區域，包含：

社交媒體

交流社羣

“聯繫我”按鈕

5. 界面層

在 3D Canvas 上方添加簡潔的 HTML UI：

左上角：個人 Logo 或姓名

右上角：聲音開關、幫助按鈕、全屏按鈕

左下角：鍵盤操作提示

右下角：當前所在區域

中央：首次進入時的開始界面

移動端：觸屏方向控制和油門、剎車按鈕

加載時：顯示加載進度

開始界面應包含：

項目標題

一句簡短說明

“開始探索”按鈕

控制方式提示

用戶點擊“開始探索”後再啓用車輛控制。

6. 視覺方向

採用原創的低多邊形玩具世界風格：

明亮、溫暖、輕鬆

柔和陰影

環境光與主方向光結合

使用有限的配色方案

地面以米白或淺灰爲主

使用橙色、藍色或綠色作爲強調色

適當加入霧效增加空間層次

物體邊緣清晰，避免寫實材質

頁面具有遊戲感，但仍然保持專業

不要使用 Bruno Simon 的名稱、Logo、文案、車輛模型、地圖佈局或原站素材。

7. 動畫與反饋

加入適量的細節動畫：

樹木輕微擺動

展板懸浮或呼吸

車輛移動時車輪旋轉

轉向時前輪改變方向

碰撞時產生輕微反饋

進入互動區域時顯示提示

按鈕具有 hover 和點擊反饋

頁面加載和浮層切換使用平滑過渡

動畫需要剋制，避免所有元素同時持續運動。

8. 聲音

預留聲音系統：

背景環境音

車輛移動音

碰撞音

UI 點擊音

如果沒有合適的本地音頻素材，可以先實現聲音開關和接口結構，不要使用不明確版權來源的音頻。

9. 性能與兼容性

必須考慮性能：

控制場景 draw calls

合理複用 geometry 和 material

使用 InstancedMesh 渲染重複物體

限制陰影貼圖尺寸

根據設備能力調整 DPR

移動端減少裝飾和陰影

頁面切到後台時暫停不必要的更新

提供 WebGL 不可用時的降級提示

避免在每一幀創建新對象

清理事件監聽器和 Three.js 資源

目標是在常見桌面瀏覽器中流暢運行，並能夠在移動端正常瀏覽和操作。

10. 響應式與可訪問性

支持桌面和移動設備

移動端提供觸屏控制

UI 文字具有足夠對比度

所有可點擊按鈕支持鍵盤訪問

爲按鈕添加清楚的 aria-label

支持 prefers-reduced-motion

提供“跳過 3D，查看普通作品列表”的入口

不允許 3D 場景阻止用戶訪問核心作品信息

工程結構

請合理拆分代碼，例如：

components/Experience

components/Vehicle

components/World

components/CameraRig

components/ProjectZone

components/Interface

components/TouchControls

stores/useGameStore

config/portfolio

hooks/useVehicleControls

作品、技能、聯繫方式和主題顏色應集中配置，避免散落在組件內部。

實施順序

請按以下順序完成：

檢查當前項目結構和已有依賴

搭建可運行的 3D 場景

實現車輛移動和物理碰撞

實現第三人稱跟隨鏡頭

創建四個內容展區

加入互動檢測和項目浮層

完成開始界面和操作提示

增加移動端控制

優化視覺、動畫和性能

運行構建、類型檢查和必要測試

修復錯誤後提供最終結果

驗收標準

項目完成後應滿足：

頁面能夠正常啓動和構建

點擊開始後可以駕駛車輛

鍵盤和移動端控制有效

鏡頭能夠平滑跟隨

車輛可以與障礙物碰撞

場景中存在四類內容區域

至少展示三個可交互項目

項目詳情可以打開和關閉

所有內容可以通過配置文件修改

刷新頁面後不會出現明顯錯誤

桌面端和移動端佈局可用

不使用原網站的受版權保護素材

控制檯沒有持續報錯或明顯資源泄漏

請直接開始檢查並實現，不要只輸出設計建議。完成後說明：

實現了哪些功能

主要文件位置

如何啓動項目

哪些內容可以在配置文件中替換

當前仍存在的限制