# @crapthings/run3d 中文文档

规范地址：https://npmcn.com/package/%40crapthings/run3d/

版本：0\.2\.19
npm 元数据更新时间：2026-11-08T15:11:35.540Z
中文译文更新时间：2026-11-11T11:04:30.342Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40crapthings/run3d
原文对照：https://npmcn.com/package/%40crapthings/run3d/?lang=original
项目主页：https://github.com/crapthings/run3d#readme
源码仓库：https://github.com/crapthings/run3d

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：131 kB，24 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=24
- 运行依赖：0 个
- 首次发布：2026-09-15T02:22:45.736Z
- 最新版本发布：2026-11-08T15:11:35.383Z
- 近 30 天下载量：2199（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 21 个）

## 中文简介

从想法到交互式3D原型在一个指令中. 一个带有Vite的JavaScript启动器,React Three Fiber,以及创造性实验的工具.

## 安装

```sh
npm install @crapthings/run3d
```

也可以使用：`pnpm add @crapthings/run3d`、`yarn add @crapthings/run3d`、`bun add @crapthings/run3d`

## README

# 运行3d

在一个命令中创建 3D 工程 。 起动场景以绿色立方体和快行重现了run3d图标,准备编辑.

随着GPT-6 Astra等模型在构建3D体验方面能力增强,从一个想法到工作原型的距离不断缩小. 我每天都有新的想法 我想花精力创造 run3d将我的集思广益和实验工具 带入一个随时可以使用的启动器, 所以我可以直接跳入建筑, 测试想法, 发现什么是可行的.

## 使用量

需要节点.js `>=24` 还有pnpm.

```bash
npx @crapthings/run3d my-project
cd my-project
pnpm dev
```

编辑组件在 `src/scenes` 来让启动者成为你自己的场景。 以后安装依赖关系,请添加 `--skip-install` 到第一个命令.

拖入场景轨道,滚动到缩放,右拖至平板. 编辑 `src/scenes/index.jsx` 用于场景及其设置.

## 语文

模板初始化 [反应- i18next](https://react.i18next.com/latest) 内 `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](https://github.com/react/react) ——构建并制造应用UI.
-   [维特](https://github.com/vitejs/vite) 财务报告和审定财务报表 [@vitejs/插件反应](https://github.com/vitejs/vite-plugin-react) ——运行开发服务器并构建React应用.

### 3D 场景

-   [3个J](https://github.com/mrdoob/three.js) 3D场景.
-   [反应 三发](https://github.com/pmndrs/react-three-fiber) ——让您用React来构建出"3.j"的场景.
-   [德莱](https://github.com/pmndrs/drei) ——提供现成的立体辅助人员和控制.
-   [缩写](https://github.com/pmndrs/klipp) ——为Tree.js和React Three Fiber提供虚拟相机工具包.
-   [目标](https://github.com/greensock/GSAP) 财务报告和审定财务报表 [@gsap/反应](https://github.com/greensock/react) 动画场景和UI属性,有时间和 `useGSAP` 反应钩子.
-   [后处理](https://github.com/pmndrs/postprocessing) 财务报告和审定财务报表 [@ react-3/后处理](https://github.com/pmndrs/react-postprocessing) ——增加带有React组件的视觉效果.
-   [pmndrs/ math (英语)](https://github.com/pmndrs/math) 为3D工作提供数学设施.
-   [Drei StatsGl 软件](https://github.com/pmndrs/drei#statsgl) ——在开发时监测提供性能.

### 数据和状态

-   [苏斯坦德](https://github.com/pmndrs/zustand) ——管理React应用状态.
-   [库塔](https://github.com/pmndrs/koota) ——以实体和组件管理游戏状态.
-   [D3级](https://github.com/d3/d3) ——提供数据尺度,布局,可视化.
-   [页:1](https://github.com/processing/p5.js) ——创建互动图形和创意编码草图.

### 接口

-   [尾风 CSS 和 @ 尾风/ vite](https://github.com/tailwindlabs/tailwindcss) ——对应用进行样式化,将Tailwind与Vite整合.
-   [无头UI](https://github.com/tailwindlabs/headlessui) ——提供可访问的,无样式的React UI组件.
-   [反应路由器](https://github.com/remix-run/react-router) ——将URL连接到页面并处理导航.
-   [反应- i18next](https://react.i18next.com/), (中文(简体) ), [下一个i18](https://www.i18next.com/),以及 [i18next- 浏览器语言检测器](https://github.com/i18next/i18next-browser-languageDetector) ——翻译UI文本,有浏览器语言检测和被保存的语言偏好.
-   [反应热键钩](https://github.com/JohannesKlauss/react-hotkeys-hook) ——用反应钩子添加声明键盘快捷键.
-   [浮动 UI](https://github.com/floating-ui/floating-ui) ——定位菜单,工具提示和弹出.

### 世界和运动

-   [反弹 三发相机](https://github.com/pmndrs/react-three-rapier) ——增加物理和相撞.
-   [重制导航和@重制导航/ 三](https://github.com/isaac-mason/recast-navigation-js) ——生成"导航"(navmeshes),并找到"3.js"场景中的路径.
-   [导航](https://github.com/isaac-mason/navcat) ——在纯JavaScript中建立并查询navmeshes,由Tree.js帮助.
-   [快速噪声Lite](https://github.com/Auburn/FastNoiseLite) ——产生程序2D和3D噪声.
-   [三块花板](https://github.com/Ameobea/three-hex-tiling) ——减少瓦片纹理中可见的重复.
-   [TSL 十六进制倾斜](https://github.com/crapthings/tsl-hex-tiling) ——为WebGPU和WebGL 2减少与Tree.js TSL的纹理重复.

### 媒体

-   [(原始内容存档于2018-09-26). Howler.js](https://github.com/goldfire/howler.js#documentation) ——用音量控制来播放音频,声音图案,以及3D空间声音.
-   [媒体朋尼](https://mediabunny.dev/) ——阅读,撰写,并转换浏览器中的音频和视频文件.
-   [小学](https://github.com/elemaudio/elementary) - 创建声明式音频 DSP 图表 `@elemaudio/core` 在浏览器中运行 `@elemaudio/web-renderer`。 。 。 .

## 常见问题

### @crapthings/run3d 是什么？

从想法到交互式3D原型在一个指令中\. 一个带有Vite的JavaScript启动器,React Three Fiber,以及创造性实验的工具\.

### 如何安装 @crapthings/run3d？

在项目目录运行 npm install @crapthings/run3d，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 run3d，可以用 npx run3d 直接运行。

### @crapthings/run3d 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/crapthings\_\_run3d 是否存在。

### @crapthings/run3d 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @crapthings/run3d 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=24。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @crapthings/run3d 可以商用吗？

@crapthings/run3d 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @crapthings/run3d 的下载量有多少？

根据 npm 官方下载统计，@crapthings/run3d 在 2026/10/11 – 2026/11/09 这 30 天内被下载 2,199 次，日均约 73 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @crapthings/run3d 还在维护吗？

最新版本 0\.2\.19 发布于 2026/11/08（2 天前）；至今共发布 21 个版本，其中过去 12 个月发布了 21 个；首次发布于 2026/09/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。