qt如何添加组件ros_ros3djs的Vue组件

qt如何添加组件ros

vue-ros3djs (vue-ros3djs)

Vue components for ros3djs with some extra functionality:

ros3djs的 Vue组件具有一些额外的功能：

• Get pose of right click / long press

  右键单击/长按姿势

• tween.js integration for smooth transitions

  tween.js集成可实现平稳过渡

安装 (Install)

npm install --save vue-ros3djs

组件 (Components)

Includes the following components:

包括以下组件：

• Ros3dArrow

  Ros3d箭头

• Ros3dAxes

  Ros3dAxes

• Ros3dGrid

  Ros3dGrid

• Ros3dInteractiveMarkerClient

  Ros3dInteractiveMarkerClient

• Ros3dLaserScan

  Ros3dLaserScan

• Ros3dMarkerClient

  Ros3dMarkerClient

• Ros3dOccupancyGridClient

  Ros3dOccupancyGridClient

• Ros3dPath

  Ros3dPath

• Ros3dPointCloud2

  Ros3dPointCloud2

• Ros3dPoseArrow

  Ros3dPoseArrow

• Ros3dSceneNode

  Ros3dSceneNode

• Ros3dViewer

  Ros3dViewer

用法 (Usage)

<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>

翻译自: https://vuejsexamples.com/vue-components-for-ros3djs/

qt如何添加组件ros