vue-vtk-js mesh rendering: auto-focussing camera on bounding box?

Web
1

Using the example from GitHub - Kitware/vue-vtk-js: Vue.js based components for vtk.js I was able to successfully load a PLY mesh from a JSZip blob and render.

However I have to shift it around and zoom out a lot to actually see it.

How would I need to manipulate the code below to auto-focus and zoom the camera on the mesh (e.g. like below)? Using VTK in python or C++ that seems to work out of the box, and vue-vtk-js/script.js at master · Kitware/vue-vtk-js · GitHub seems to have the relevant ingredients (interactor etc.) so I am not sure what would be missing?

Besides I am seeing an error log coming from vue-vtk.umd.js - see below. Could that explain? How could I fix that?

error log from vue-vtk.umd.js

image

my Vue.js code

<template>
  <vtk-view>
    <vtk-geometry-representation>
      <vtk-reader vtkClass="vtkPLYReader" :url="meshURL" />
    </vtk-geometry-representation>
  </vtk-view>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class MeshComponent extends Vue {
  @Prop() public value!: string;
  @Prop() public report!: Report;
  @Prop() public experimentName!: string;
  public meshURL: string = '';

  public async beforeMount() {
    this.meshURL = await this.report.getFileUrl(this.experimentName, this.value);
  }
}
</script>

desired view

image

2

The issue is that the default resetCamera() call on the view happen before the data was loaded from the url. But you can ask the reader to trigger it once ready by adding the resetCameraOnUpdate prop.

<template>
  <vtk-view>
    <vtk-geometry-representation>
      <vtk-reader vtkClass="vtkPLYReader" :url="meshURL" resetCameraOnUpdate />
    </vtk-geometry-representation>
  </vtk-view>
</template>
3

works nicely - thank you @Sebastien_Jourdain !

1 Like