# @depasquale/three-wizard 中文文档

规范地址：https://npmcn.com/package/%40depasquale/three-wizard/

版本：0\.0\.14
npm 元数据更新时间：2023-11-06T11:16:42.181Z
中文译文更新时间：2026-11-11T23:50:16.127Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：15.1 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- 首次发布：2022-03-03T11:43:13.808Z
- 最新版本发布：2023-11-06T11:16:42.006Z
- 近 30 天下载量：14119（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 0 个）

## 中文简介

创建一个没有锅炉板的 三.js场景

## 安装

```sh
npm install @depasquale/three-wizard
```

也可以使用：`pnpm add @depasquale/three-wizard`、`yarn add @depasquale/three-wizard`、`bun add @depasquale/three-wizard`

## README

# 三.js 向导

这个工具会做所有神奇的咒语 创造场景与Tree.js:

-   创建 `camera`, (中文(简体) ), `renderer`,以及 `scene` 实例
-   大小渲染器的 DOM 元素以填充浏览器窗口, 并带有相应的像素比
-   在 DOM 中添加渲染器的 DOM 元素
-   应用 CSS 到页面
-   添加事件倾听器以调整渲染器的 DOM 元素大小, 并在浏览器窗口被调整时更新相机
-   添加您的控件选择
-   设置动画循环, 与您的渲染常规
-   更新每个框架的控制

### 安装

```
npm install @depasquale/three-wizard
```

### 使用量

```javascript
import Wizard from '@depasquale/three-wizard';

const wizard = new Wizard({
  // Choose from `ImmersiveControls`, `OrbitControls`, and `static` (more options coming soon)
  controls: 'OrbitControls',
});

// You can access these if necessary
const { scene, camera, renderer, controls } = wizard;

// Add things to the scene
// ...
```

定义每个框架更新事物的渲染回路 。 (Tree.js Wizard负责更新控制并告诉渲染器渲染,因此没有必要包括这个锅炉板代码. 然后开始动画.

```javascript
const render = () => {
  // Update things in the scene
  // ...
};

wizard.start(render);
```

### 选项

-   `controls: 'ImmersiveControls' | 'OrbitControls' | 'static'`
    
    -   场景中使用的控制类型. 默认是 `static`。 。 。 .
-   `initialPosition: THREE.Vector3`
    
    -   相机在现场的初始位置. 默认是 `new THREE.Vector3(0, 1.6, 5)`。 。 。 .
-   `css: true | false`
    
    -   将 CSS 应用到页面中 。 默认是 `true`。 。 。 .
-   如果使用 [隐形控制](https://github.com/DePasqualeOrg/three-immersive-controls),这些控制的选项也可以在此列出.
    

### 示例

报告提供了完整的例子 `example` 目录。 要在浏览器中本地尝试, 请运行 :

```
npm run example
```

或者试试看 [这里](https://unpkg.com/@depasquale/three-wizard/example/index.html)。 。 。 .

### 来做

-   添加更多控件选项
-   添加选项为渲染器的 DOM 元素指定目标, 而不是完整的浏览器窗口

## 常见问题

### @depasquale/three-wizard 是什么？

创建一个没有锅炉板的 三\.js场景

### 如何安装 @depasquale/three-wizard？

在项目目录运行 npm install @depasquale/three-wizard，或使用 pnpm add / yarn add / bun add。

### @depasquale/three-wizard 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @depasquale/three-wizard 支持 ESM 还是 CommonJS？

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

### @depasquale/three-wizard 可以商用吗？

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

### @depasquale/three-wizard 的下载量有多少？

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

### @depasquale/three-wizard 还在维护吗？

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