# vue-ros3djs

> Vue components for ros3djs

Latest version **1.1.1** (published 2020-07-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-ros3djs
pnpm add vue-ros3djs
yarn add vue-ros3djs
bun add vue-ros3djs
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2020-07-21 |
| First published | 2019-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 16.5 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Ludwig Waffenschmidt |
| Maintainers | ldwg |
| Keywords | vue, vuejs, ros, rviz, ros3d, ros3djs |

## Links

- npm: https://www.npmjs.com/package/vue-ros3djs
- Repository: https://github.com/LdwgWffnschmdt/vue-ros3djs
- Issues: https://github.com/LdwgWffnschmdt/vue-ros3djs/issues
- npm.io page: https://npm.io/package/vue-ros3djs

## Dependencies (4)

- [ros3d](https://npm.io/package/ros3d.md) ^1.0.1
- [three](https://npm.io/package/three.md) ^0.89.0
- [@vue/cli-service](https://npm.io/package/@vue/cli-service.md) ^4.1.2
- [@tweenjs/tween.js](https://npm.io/package/@tweenjs/tween.js.md) ^18.5.0

## Recent versions

- 1.1.1 (latest) — 2020-07-21
- 1.1.0 — 2020-01-13
- 1.0.8 — 2020-01-08
- 1.0.7 — 2020-01-08
- 1.0.6 — 2019-12-17
- 1.0.5 — 2019-12-17
- 1.0.4 — 2019-12-17
- 1.0.3 — 2019-11-13
- 1.0.2 — 2019-11-04
- 1.0.1 — 2019-11-03
- 1.0.0 — 2019-11-03

## README

# vue-ros3djs

![](screenshot.png)

Vue components for [ros3djs](http://wiki.ros.org/ros3djs) with some extra functionality:
- Get pose of right-click / long-press
- [tween.js](https://github.com/tweenjs/tween.js/) integration for smooth transitions

## Install
```
npm install --save vue-ros3djs
```

## [Documentation](https://ldwgwffnschmdt.github.io/vue-ros3djs/)

## Usage

```javascript
<template>
  <ros3d-viewer :ros="ros" v-if="connected">
    <ros3d-axes />
    <ros3d-grid />

    <ros3d-laser-scan topic="/laserscan">
  </ros3d-viewer>
</template>

<script>
import ROSLIB from 'roslib';
import { Ros3dViewer, Ros3dGrid, Ros3dAxes, Ros3dLaserScan } from 'vue-ros3djs';

export default {
  name:  'VueRos3djsDemo',
  components: {
    Ros3dViewer,
    Ros3dGrid,
    Ros3dAxes,
    Ros3dLaserScan
  },
  data: () => ({
    ros: null,
    connected: false
  }),
  mounted() {
    this.ros = new ROSLIB.Ros({
      url : 'ws://localhost:9090'
    });

    this.ros.on('connection', () => {
      this.connected = true;
    });
  }
}
</script>
```

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