在浏览器里搭建3D世界：ai-virtual-phone世界搭建器完整教程（three.js + Tripo模型）-北京尧图网络

【免费下载链接】ai-virtual-phone项目地址https://gitcode.com/gh_mirrors/ai/ai-virtual-phone点击查看免费下载ai-virtual-phone是一个基于 Next.js 的 AI 虚拟互动手机而它内置的世界搭建器界面里叫「筑境」能让你完全在浏览器里搭建 3D 场景放置模型、打灯光、调氛围还能用 Tripo 把一段文字或一张图片直接变成 3D 模型甚至让 AI 角色化身走进场景漫步。本文是一份面向新手的世界搭建器完整教程零 3D 软件基础也能上手。什么是 ai-virtual-phone 的「筑境」浏览器里的 3D 场景搭建工具世界搭建器基于three.js通过 React Three Fiber 封装构建无需安装 Unity 或 Blender打开网页就是工作区。核心能力包括模型库内置酒馆风预设模型墙、地板、桌椅、壁炉、吊灯等按「结构 / 家具 / 装饰 / 道具 / 灯光」分类✨AI 生成模型接入 Tripo支持文字生成、图片生成、角色化身生成三种模式角色化身把你在 ai-virtual-phone 里创建的 AI 角色绑骨后放进场景头顶名牌、可点击看简介灯光系统点光源、射灯、面光源、方向光配合阴影、HDRI 环境光和 Bloom 辉光场景持久化场景和自定义模型都保存在浏览器 IndexedDB 里刷新不丢失入口源码在 app/world-builder/page.tsx主面板逻辑在 WorldBuilder.tsx。打开 3D 世界搭建器从手机桌面找到「筑境」图标在虚拟手机的主屏幕上找到**「筑境」图标琥珀色 3D 图标路由为/world-builder图标注册见 lib/desktop-config.ts点开后它会在独立浏览器窗口**中全屏打开——因为 3D 场景需要整块画布不塞在小手机界面里。提示首次打开时会有一段开机引导点击即可进入工作台如果窗口是意外打开的左上角返回键会直接关闭窗口。认识 3D 视口three.js 场景怎么看怎么移工作台中央就是三维视口SceneViewport.tsx操作方式类似常见 3D 软件操作效果拖拽空白处环绕视角OrbitControls点击模型选中出现变换手柄拖动手柄移动 / 旋转 / 缩放模型TransformControlsCtrlZ / CtrlShiftZ撤销 / 重做最多 50 步历史一个新手很在意的小细节模型吸附。开启后拖动模型靠近另一个模型时会自动啪地对齐面如地板贴地面、墙贴墙角由包围盒对面对齐算法实现见 SceneViewport.tsx。放置第一个模型内置 3D 模型素材库左侧素材面板ModelPalette.tsx列出全部可用模型预设模型定义在 scene-store.ts结构红砖墙、木地板、砖柱、拱形砖门框、木门板……家具圆桌、吧台、酒馆椅子、壁炉、竖式钢琴装饰吊灯、蜡烛灯、酒桶、招牌木板道具左轮手枪、威士忌酒瓶、扑克牌灯光暖黄灯泡、冷白灯泡、聚光灯、方向光上手建议先铺地面 → 再砌墙 → 摆家具 → 最后补灯一个迷你酒馆场景十几分钟就能成型。一个值得一提的性能优化打开素材库时只加载每只模型几 KB 的静态缩略图/models/_thumbs/完整 .glb 文件在你真正放置时才会下载避免一开库就加载全部模型。AI 生成 3D 模型Tripo 文生模与图生模教程想放个素材库里没有的东西点「生成」打开 Tripo 生成面板GenerateModal.tsx填 API Key粘贴你的 Tripo API Key点验证界面会显示余额Key 只存在你本地浏览器wb-tripo-api-key选模式文字生成输入提示词如一只坐着的柴犬图片生成上传一张参考图支持多张角色化身选择你的 AI 角色用其头像或上传立绘生成 3D 化身调参数可设置面数上限和简化比例默认 15%面数越低浏览器越流畅等待生成任务经 app/api/tripo/ 系列接口转发生成 / 轮询状态 / 验证 / 动画完成后模型自动进入你的素材库同时会自动优化减面再入库新手建议先用低面数生成预览效果满意后再生成高精度版本。生成结果会消耗 Tripo 额度请合理安排。导入自己的 GLB 模型把外部 3D 资产带进来如果你有从其他软件Blender、Sketchfab 等导出的模型点「导入」即可上传GLB / GLTF 文件ImportModal.tsx选择文件后自动识别名称可改名归类到预设分类或自定义分类模型存入本地 IndexedDB 的world-builder-models数据库model-db.ts导入后的模型与预设模型享有完全相同的拖拽、吸附、灯光绑定能力。让 AI 角色入场角色化身漫步场景这是世界搭建器最有虚拟手机特色的功能——场景里的人物可以是你创建的 AI 角色在生成面板选「角色化身」模式选择一个角色勾选自动绑骨走路动画额外消耗额度生成后可在场景中漫步化身头顶会显示角色名牌点击弹出角色简介卡同屏最多 3 个化身同时活动设备较弱时可在偏好设置里关闭化身动画场景对象数据结构位置、旋转、缩放、灯光、角色绑定定义在 scene-store.ts。灯光与氛围调节阴影、辉光和主题背景点「设置」打开渲染偏好SettingsModal.tsx阴影真实感↑消耗也↑默认关闭保护弱机HDRI 环境反射加载 public/hdri/park.hdr 环境贴图材质更有质感辉光Bloom灯光泛光夜景氛围神器亮度 / 暖度全局调色暖度拉高就是烛光酒馆风主题背景奶白 / 深空两种深空配夜景更沉浸每种灯点光 / 射灯 / 面光 / 方向光都能在选中后单独调颜色、强度、照射范围见 scene-store.ts 的灯光参数定义。保存与加载 3D 场景本地持久化不丢失场景管理在 SceneSaveLoadModal.tsx保存给场景起个名字当前所有对象按状态写入 IndexedDBworld-builder-scenes见 scene-db.ts加载 / 覆盖 / 删除已存场景按更新时间排序随时切换这些数据也会被 ai-virtual-phone 的数据管理 / 备份系统识别为世界构建场景和世界构建模型两个备份模块lib/data-management/modules.ts换设备时也能带走⚠️ 场景存储在浏览器本地清除浏览器数据前请先备份。写在最后从浏览器打开到第一个 3D 世界回顾一下这条完整路径打开筑境→ 素材库放置预设模型 → Tripo 生成缺少的资产 → 导入自己的 GLB → 放置角色化身 → 调灯光氛围 → 保存场景。整个流程不需要任何 3D 软件浏览器就是你的 3D 工作室。ai-virtual-phone 的世界搭建器three.js Tripo 模型特别适合两类人想快速给 AI 角色造一个家的互动用户以及想用 AI 快速产出轻量 3D 场景素材的创作者。现在就可以去搭你的第一个场景了 ️赞分享【免费下载链接】ai-virtual-phone项目地址https://gitcode.com/gh_mirrors/ai/ai-virtual-phone点击查看免费下载相关推荐Sure财务报表生成指南如何自动创建资产负债表与损益表Sure财务报表生成指南如何自动创建资产负债表与损益表 Sure是一款功能强大的个人财务管理应用能够自动生成专业的资产负债表与损益表。通过智能数据同步和分类金融科技后端前端移动开发桌面应用AI 应用如何快速掌握Chili3D浏览器3D建模引擎的完整入门指南如何快速掌握Chili3D浏览器3D建模引擎的完整入门指南 Chili3D是一款基于浏览器的开源3D CAD应用让你无需安装任何软件就能在线进行专业的3D模前端图形学3D渲染插件系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

在浏览器里搭建3D世界：ai-virtual-phone世界搭建器完整教程（three.js + Tripo模型）

相关推荐

工厂冷库照明怎么做分区控制？储存区、分拣通道分区策略

从 Travel 到 Customer，深入理解 ABAP CDS Association 的定义、暴露与导航

vector动态数组的基本语法作用

更多资讯

REA模型：用事件驱动思路重构企业核心数据模型

测试001项目复盘：时间压缩下的测试策略与缺陷管理实战

扩散模型图像恢复实战：从DDPM原理到条件生成与DDIM采样

开源趋势周报第40周：开发工具链与AI编程助手新动向

Java集合框架深度解析：从ArrayList到ConcurrentHashMap的选型与性能陷阱

Windows Server 2008 R2 SQL Server 2008 R2 生产数据库快照复用指南

今日更新

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？