# @candelas/vue_three_components

> ## 文档地址

Latest version **0.1.7** (published 2023-09-09) · 0 weekly downloads

## Install

```sh
npm install @candelas/vue_three_components
pnpm add @candelas/vue_three_components
yarn add @candelas/vue_three_components
bun add @candelas/vue_three_components
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2023-09-09 |
| First published | 2023-01-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 142.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tomgou |
| Keywords | three, vue, components, animation, mark, shaders |

## Links

- npm: https://www.npmjs.com/package/@candelas/vue_three_components
- npm.io page: https://npm.io/package/@candelas/vue_three_components

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.45
- [three](https://npm.io/package/three.md) ^0.144.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.1.7 (latest) — 2023-09-09
- 0.1.6 — 2023-09-09
- 0.1.5 — 2023-05-25
- 0.1.4 — 2023-05-25
- 0.1.3 — 2023-05-24
- 0.1.2 — 2023-05-24
- 0.1.1 — 2023-05-19
- 0.1.0 — 2023-05-19
- 0.0.5 — 2023-05-18
- 0.0.4 — 2023-01-19
- 0.0.3 — 2023-01-19
- 0.0.2 — 2023-01-19
- 0.0.1 — 2023-01-19
- 0.0.0 — 2023-01-19

## README

# 快速上手

## 文档地址

https://tomgou.github.io/vue-three-components/

## npm 地址

https://www.npmjs.com/package/@candelas/vue_three_components

## 标准开发

实际项目中，往往会使用 `webpack`，`rollup` 或者 `gulp` 的工作流，大多可以做到按需加载页面用到的组件，所以不推荐直接使用 `<script>` 标签全局引入的方式使用。

### 全局组件使用

可以在项目的入口文件中引入所有组件或所需组件

```js
import tools from '@candelas/vue_three_components' // 引入组件库
const WaveMesh = tools.createWaveMesh(20, 0x00ff00)
WaveMesh.position.z = 0
WaveMesh.rotateX(Math.PI / 2)
scene.add( WaveMesh );
```

### 单个组件按需使用

可以局部注册所需的组件，适用于与其他框架组合使用的场景

```js
import { createWaveMesh } from '@candelas/vue_three_components' // 引入组件库
const WaveMesh = createWaveMesh(20, 0x00ff00)
WaveMesh.position.z = 0
WaveMesh.rotateX(Math.PI / 2)
scene.add( WaveMesh );
```

---
_Source: https://npm.io/package/@candelas/vue_three_components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._