运行3d
在一个命令中创建 3D 工程 。 起动场景以绿色立方体和快行重现了run3d图标,准备编辑.
随着GPT-6 Astra等模型在构建3D体验方面能力增强,从一个想法到工作原型的距离不断缩小. 我每天都有新的想法 我想花精力创造 run3d将我的集思广益和实验工具 带入一个随时可以使用的启动器, 所以我可以直接跳入建筑, 测试想法, 发现什么是可行的.
使用量
需要节点.js >=24 还有pnpm.
npx @crapthings/run3d my-project
cd my-project
pnpm dev
编辑组件在 src/scenes 来让启动者成为你自己的场景。 以后安装依赖关系,请添加 --skip-install 到第一个命令.
拖入场景轨道,滚动到缩放,右拖至平板. 编辑 src/scenes/index.jsx 用于场景及其设置.
语文
模板初始化 反应- i18next 内 src/i18n.js中英文资源 src/locales. 它检测到浏览器语言,倒回英语,并记得本地存储中的语言变化. 该文件 lang 属性遵循活动语言.
使用 const { t, i18n } = useTranslation() 从 react-i18next 在组件中,将文本修改为 t('scene.label'),并切换语言 i18n.changeLanguage('zh') 或者说 i18n.changeLanguage('en')。为 JSON 文件添加新的翻译密钥; 在其中注册额外的语言 src/i18n.js。 。 。 .
包含的工具
按对起步器和典型用法的重要性排序,先用核心工具,后用专用工具.
应用基础
- 反应和反应 DOM ——构建并制造应用UI.
- 维特 财务报告和审定财务报表 @vitejs/插件反应 ——运行开发服务器并构建React应用.
3D 场景
- 3个J 3D场景.
- 反应 三发 ——让您用React来构建出"3.j"的场景.
- 德莱 ——提供现成的立体辅助人员和控制.
- 缩写 ——为Tree.js和React Three Fiber提供虚拟相机工具包.
- 目标 财务报告和审定财务报表 @gsap/反应 动画场景和UI属性,有时间和
useGSAP反应钩子. - 后处理 财务报告和审定财务报表 @ react-3/后处理 ——增加带有React组件的视觉效果.
- pmndrs/ math (英语) 为3D工作提供数学设施.
- Drei StatsGl 软件 ——在开发时监测提供性能.
数据和状态
接口
- 尾风 CSS 和 @ 尾风/ vite ——对应用进行样式化,将Tailwind与Vite整合.
- 无头UI ——提供可访问的,无样式的React UI组件.
- 反应路由器 ——将URL连接到页面并处理导航.
- 反应- i18next, (中文(简体) ), 下一个i18,以及 i18next- 浏览器语言检测器 ——翻译UI文本,有浏览器语言检测和被保存的语言偏好.
- 反应热键钩 ——用反应钩子添加声明键盘快捷键.
- 浮动 UI ——定位菜单,工具提示和弹出.
世界和运动
- 反弹 三发相机 ——增加物理和相撞.
- 重制导航和@重制导航/ 三 ——生成"导航"(navmeshes),并找到"3.js"场景中的路径.
- 导航 ——在纯JavaScript中建立并查询navmeshes,由Tree.js帮助.
- 快速噪声Lite ——产生程序2D和3D噪声.
- 三块花板 ——减少瓦片纹理中可见的重复.
- TSL 十六进制倾斜 ——为WebGPU和WebGL 2减少与Tree.js TSL的纹理重复.
媒体
- (原始内容存档于2018-09-26). Howler.js ——用音量控制来播放音频,声音图案,以及3D空间声音.
- 媒体朋尼 ——阅读,撰写,并转换浏览器中的音频和视频文件.
- 小学 - 创建声明式音频 DSP 图表
@elemaudio/core在浏览器中运行@elemaudio/web-renderer。 。 。 .