详情

首页手游攻略 Kimi K3 深度评测 – 前端开发能力登顶全球第一

Kimi K3 深度评测 – 前端开发能力登顶全球第一

佚名 2026-07-21 08:29:03

昨晚,月之暗面悄悄上线了新旗舰模型 Kimi K3,我的朋友圈和社群几乎被刷屏了。

这一次,Kimi K3 不仅在参数体量上实现了翻倍,2.8T 参数,直接刷新全球开源模型的规模纪录!上下文窗口也从上一代的 256K 提升至最高 1M tokens,还通过创新的 MoE 架构与 Kimi Delta Attention 机制,将整体扩展效率提升了 2.5 倍

官方案例显示,Kimi K3 连续自主运行 48 小时,为基于自身架构的 Nano 模型,设计了一颗可以运行它的芯片。说明 Kimi K3 已经开始具备跨学科、长周期、可验证的自主研发能力。

还有不少网友晒用 Kimi K3 做的 RPG 游戏,视觉效果属实惊艳。

在 Arena 盲评榜单上,Kimi K3 更是直接登顶全球第一,横扫了几乎所有前端开发领域。

Kimi 官方公开的评测显示,Kimi K3 的综合表现高于 Opus 4.8,但距离 GPT-5.6 Sol 和 Fable 5 还有些差距。

话不多说,我们一起用真实案例感受一下。

 

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。

准备就绪,我们直接开测。

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 在游戏与 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 生成的 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 场景

实现车辆移动和物理碰撞

实现第三人称跟随镜头

创建四个内容展区

加入互动检测和项目浮层

完成开始界面和操作提示

增加移动端控制

优化视觉、动画和性能

运行构建、类型检查和必要测试

修复错误后提供最终结果

验收标准

项目完成后应满足:

页面能够正常启动和构建

点击开始后可以驾驶车辆

键盘和移动端控制有效

镜头能够平滑跟随

车辆可以与障碍物碰撞

场景中存在四类内容区域

至少展示三个可交互项目

项目详情可以打开和关闭

所有内容可以通过配置文件修改

刷新页面后不会出现明显错误

桌面端和移动端布局可用

不使用原网站的受版权保护素材

控制台没有持续报错或明显资源泄漏

请直接开始检查并实现,不要只输出设计建议。完成后说明:

实现了哪些功能

主要文件位置

如何启动项目

哪些内容可以在配置文件中替换

当前仍存在的限制

我们一起看看最终生成的结果:

小车运行的非常流畅,进入项目区域时,展板会高亮并弹出项目详情。作品、技能和联系方式也被集中到配置文件里,后续换内容方便很多。

Kimi K3 不只是把页面做出来,还会照顾项目结构、交互状态和后续维护。

 

02. 一些分享

 

Kimi K3 的生成和响应速度会比较慢,但 Kimi K3 的长程代码规划能力,是我目前测试过的开源大模型里最出色的。

整个实测过程,Kimi K3 都没有出现 BUG、断档或者陷入循环,也几乎不需要人工干预,产出的项目结构自洽,完成度也高,在实际研发中会非常省时省心。

月之暗面正在将大模型从一个聊天 bot,重塑为一套能够承载长任务、管理大代码库、并在反馈中反复迭代的 Agent 运行环境

在 Kimi 勾勒的未来图景中,Kimi 更像是一个开箱即用的开发沙盒。AI 负责处理从长程编码、自动测试纠错再到云端部署的闭环工作,我们只需要提供创意、确认需求和关键节点的授权决策。

综合性能上,Kimi K3 目前位列全球第三,仅次于 Fable 5 和 GPT-5.6 Sol。

考虑到美国一线的 GPT-5.6 和 Fable 5 在几个月前就已经完成了训练,Kimi K3 的突袭发布,意味着中国开源大模型与世界一线的差距,可能已经从去年的 6-8 个月,压缩到了现在的 2-4 个月左右

按照这样的迭代效率,中国 AI 实验室在垂直应用和开源生态上追平甚至局部领先,或许只是时间问题。

相关资讯
点击查看更多
游戏推荐
推荐专题
热门阅读
推荐下载