# vue-3d-viewer

> A Vue 3D file viewer via Three.JS and Unified 3D Loader

Latest version **1.0.7** (published 2021-03-02) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-3d-viewer
pnpm add vue-3d-viewer
yarn add vue-3d-viewer
bun add vue-3d-viewer
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2021-03-02 |
| First published | 2020-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 25.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 21 |
| Author | Cloud CNC |
| Maintainers | cloud-cnc-bot |
| Keywords | vue, 3d, 3mf, amf, obj, ply, stl, gcode, cloud-cnc |

## Links

- npm: https://www.npmjs.com/package/vue-3d-viewer
- Repository: https://github.com/Cloud-CNC/vue-3d-viewer
- Homepage: https://github.com/Cloud-CNC/vue-3d-viewer#readme
- Issues: https://github.com/Cloud-CNC/vue-3d-viewer/issues
- npm.io page: https://npm.io/package/vue-3d-viewer

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [three](https://npm.io/package/three.md) ^0.126.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [threads](https://npm.io/package/threads.md) ^1.6.3
- [observable-fns](https://npm.io/package/observable-fns.md) ^0.5.1
- [unified-3d-loader](https://npm.io/package/unified-3d-loader.md) ^1.1.3

## Recent versions

- 1.0.7 (latest) — 2021-03-02
- 1.0.6 — 2020-11-25
- 1.0.5 — 2020-10-14
- 1.0.4 — 2020-10-14
- 1.0.2 — 2020-10-12
- 1.0.1 — 2020-10-05
- 1.0.0-alpha.1 — 2020-09-10

## README

# Vue 3D Viewer
![status](https://img.shields.io/badge/status-release-brightgreen)
[![npm](https://img.shields.io/npm/v/vue-3d-viewer)](https://npmjs.com/package/vue-3d-viewer)
[![tests](https://img.shields.io/github/workflow/status/Cloud-CNC/vue-3d-viewer/Tests?label=tests)](https://github.com/Cloud-CNC/vue-3d-viewer/actions)
[![issues](https://img.shields.io/github/issues/Cloud-CNC/vue-3d-viewer)](https://github.com/Cloud-CNC/vue-3d-viewer/issues)
[![last commit](https://img.shields.io/github/last-commit/Cloud-CNC/vue-3d-viewer)](https://github.com/Cloud-CNC/vue-3d-viewer/commits/master)

A Vue 3D file viewer via Three.JS and [Unified 3D Loader](https://github.com/Cloud-CNC/unified-3d-loader)

## Features
* Offloads parsing to a worker thread
* Fully reactive to props
* Moderately customizable with good defaults
* Relatively fast (Parsing and displaying)

## Documentation
### File Formats
Check out [Unified 3D Loader](https://github.com/Cloud-CNC/unified-3d-loader#file-formats) for a list of supported file types. This package also has a GCODE parser for GCODE file support.

### Events
Name | Arguments | Description
--- | --- | ---
`done` | N/A | Emitted when the viewer is done parsing the file
`progress` | `number` (Ranges from 0-100) | The progress of the file parsing

### Props
Name | Type | Description | Default
--- | --- | --- | ---
`file` | `ArrayBuffer` | The raw file | N/A
`extension` | `String` | The file extension (Used to identify the correct parser) | N/A
`plane` | `Object` | The plane/bed width and height | `{X: 10, Y:10}`
`position` | `Object` | The position of the object | `{X: 5, Y: 0, Z: -5}`
`rotation` | `Object` | The rotation of the object (Degrees) | `{X: -90, Y: 0, Z: 180}`
`scale` | `Object` | The scale of the object (Some file formats all specify units which will effect scale) | `{X: 0.1, Y: 0.1, Z: 0.1}`
`theme` | `Object` | The theme (colors) of the viewer. | `{background: "#dfe4ed", plane: "#586375", primary: "#4287f5", secondary: "#0a2f6b"}`
`transfer` | `Boolean` | Wether or not to transfer the ArrayBuffer to the worker (Prevents duplicating large amounts of memory but empties the ArrayBuffer on the main thread preventing other code from using the ArrayBuffer) | `true`
*All props should be fully reactive, so feel free to update them dynamically.*

### Examples
* [Demo](./src/demo)

### Reuse
If you're interested in reusing primarily the non-Vue code from this package, you may be interested in the [parsers directory](./src/parsers) and [Unified 3D Loader](https://github.com/Cloud-CNC/unified-3d-loader)

---
_Source: https://npm.io/package/vue-3d-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._