网页上的互动3D照片：未来已经来了

以前往网站加张图片，就扔个<img>标签完事。简单是简单，但现在你能玩出更多花样，还不用搞复杂东西。Web组件火了，让你轻松加互动效果，不用纠缠大框架或构建工具。

试试<image-3d>这个Web组件吧。它超轻量，把普通2D照片变身互动3D。访客拖拽旋转，捏合缩放，玩起来超带感。最棒的是，直接复制粘贴就行。

为什么你的项目需要它

静态图片过时了。现在用户都爱互动。产品照、作品集、房产listing、建筑文档，全都能用这种沉浸式查看。问题是，传统3D方案太麻烦：

• 后端处理超复杂
• 前端库又重又卡
• 性能吃紧
• 得懂WebGL或3D图形

<image-3d>全包了。2D转3D、网格生成、gaussian splatting，它自己搞定。你就专心建站。

起步超简单，两行代码搞定

<script src="https://mukba.ng/image-3d/embed.js" defer></script>
<image-3d src="/your-photo.jpg"></image-3d>

扔进HTML，就行了。不用装npm包，不用构建，不用配文件。组件自己注册，自动处理。

用支持Claude Code的IDE，还能让AI帮你搭。丢个提示，它加组件、挑图片、给你看diff，再提交。顺滑到飞起。

想自定义？轻松调

简单归简单，想改也有门道。用属性控制：

核心属性：

• src（必填）——图片URL。mukba.ng的worker处理，生成轻量mesh预览和精细3D splat。
• width / height——改默认尺寸。像素值或CSS单位，比如50%、40vw。
• loading="lazy"——滚到视口再处理。多图页面超实用。
• nobrand——自托管或有授权，就去掉水印。

CSS自定义属性调样式：

组件用shadow DOM，内部样式隔离。全局CSS碰不到。用这些：

image-3d {
  --image-3d-max-width: 600px;
  --image-3d-max-height: 80vh;
  --image-3d-radius: 8px;
}

灵活又安全，不会误伤。

开发者福利：事件监听

想接生命周期？它发自定义事件：

const el = document.querySelector('image-3d');
el.addEventListener('image-3d:loading',  () => console.log('开始加载...'));
el.addEventListener('image-3d:progress', (e) => console.log('进度：', e.detail));
el.addEventListener('image-3d:ready',    () => console.log('互动就绪'));
el.addEventListener('image-3d:error',    (e) => console.warn('出错了：', e.detail.error));

加加载圈、埋点、重试逻辑，出错还降级显示原图。用户永不见破图。

性能聪明到家

亮点：先载轻量mesh预览（~11KB），秒开。详细3D splat下载完，无缝渐变切换。先看到东西，后续细节后台来。

互动直觉：拖旋转，捏缩放，长按重置。零学习成本，就跟预期一样顺手。

完美适配你的技术栈

标准Web组件，啥环境都行：

• React / Vue / Svelte——模板里直接扔，不用wrapper。
• 静态站——博客、作品集、文档，加互动不带框架。
• Next.js / Nuxt——服务端渲染OK，lazy loading看视口。
• 传统SSR——纯HTML，到处跑。

看大局

Web组件生态在加速。像<image-3d>这样的工具，让3D渲染、AI图像处理、实时协作，任何开发者加个script就用。

没锁死，没框架依赖，没黑魔法。就是聪明抽象，盖在牛逼技术上。

电商、设计集、房产站、内容博客，有视觉的都试试。事后看，这工具太对了。

快去试试

文档全在这：mukba.ng/image-3d/docs。挑张照片，两行代码，访客瞬间3D互动，新世界大门开了。