在vue2项目中使用vtk.js解决建模脱离文档流问题

比如我们要实现一个圆柱体的建模

<template>

         <div ref="vtkContainer" id="vtkContainer"></div>

</template>  

import 'vtk.js/Sources/favicon'

import 'vtk.js/Sources/Rendering/Profiles/Geometry'

import vtkFullScreenRenderWindow from'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow'

import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper'

import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor'

import vtkCylinderSource from 'vtk.js/Sources/Filters/Sources/CylinderSource'

//创建全屏窗口

const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({

        container: this.$refs.vtkContainer,

        background: [0.2, 0.2, 0.2, 0.2],

      })

const renderer = this.fullScreenRenderer.getRenderer()

const renderWindow = this.fullScreenRenderer.getRenderWindow()

// 创建一个圆柱体

const cylinderSource = vtkCylinderSource.newInstance()

cylinderSource.set({ height: 30, radius: 10, resolution: 80 })

const mapper = vtkMapper.newInstance()

mapper.setInputConnection(cylinderSource1.getOutputPort())

const actor = vtkActor.newInstance()

actor.setMapper(mapper)

actor.setPosition(10, 15, 10) // 将圆柱体移到10的位置

renderer.addActor(actor)

 // 更新并渲染

renderer.resetCamera()

renderWindow.render()

以上代码虽然在项目中创建了一个圆柱体，但是会出现类似脱离文档流情况。假设我们的项目有一个侧边导航栏，右边是我们的内容部分，如果用以上代码，虽然创建了建模，但是你会发现你的侧边导航没有办法点击跳转了。你再使用浏览器直接输入路径跳转页面之后，（比如跳转到首页），页面上不仅有页面原本的内容，还会出现你创建的建模。打开控制台查看元素时，会发现，在你ID为app的div标签的同级下，也会出现一个div标签，里面包裹一个canvas。正常情况这个div标签是要在app里面的。这种情况是因为使用了vtkFullScreenRenderWindow导致的。因为他是一个全屏的渲染窗口。

我们可以使用vtkrenderer和vtkRenderWindow解决这个问题

import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor'

import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper'

import vtkCylinderSource from 'vtk.js/Sources/Filters/Sources/CylinderSource'

import vtkrenderer from 'vtk.js/Sources/Rendering/Core/Renderer'

import vtkRenderWindow from 'vtk.js/Sources/Rendering/Core/RenderWindow'

import vtkOpenGLRenderWindow from 'vtk.js/Sources/Rendering/OpenGL/RenderWindow'

//获取展示建模的标签

const container = this.$refs.container

//渲染器

const renderer = vtkrenderer.newInstance()

//渲染窗口

const renderWindow = vtkRenderWindow.newInstance()

// 将渲染器添加到渲染窗口

renderWindow.addRenderer(renderer)

// 为渲染窗口创建一个OpenGL视图

const openGLRenderWindow = vtkOpenGLRenderWindow.newInstance()

renderWindow.addView(openGLRenderWindow)

// 将容器与OpenGL视图关联

openGLRenderWindow.setContainer(container)

// 创建一个圆柱体

const cylinderSource = vtkCylinderSource.newInstance()

cylinderSource.set({ height: 30, radius: 10, resolution: 80 })

const mapper = vtkMapper.newInstance()

mapper.setInputConnection(cylinderSource1.getOutputPort())

const actor = vtkActor.newInstance()

actor.setMapper(mapper)

actor.setPosition(10, 15, 10) // 将圆柱体移到10的位置

renderer.addActor(actor)

 // 更新并渲染

renderer.resetCamera()

renderWindow.render()

这样就解决了推理文档流的问题了。但是你会发现一个新的问题，你会发现页面的建模非常的模糊，并且没有办法使用鼠标拖动旋转。这也是使用vtkrenderer和vtkRenderWindow去创建和使vtkFullScreenRenderWindow的区别。vtkFullScreenRenderWindow是自动的帮你设置了交互器的，但是使用vtkrenderer和vtkRenderWindow需要手动去设置交互器。

添加这两个引入，交互器和交互样式

import vtkRenderWindowInteractor from 'vtk.js/Sources/Rendering/Core/RenderWindowInteractor'

import vtkInteractorStyleTrackballCamera from 'vtk.js/Sources/Interaction/Style/InteractorStyleTrackballCamera'

//这一步是解决模型模糊的，将容器的宽高设置到openGL的视图上。让视图自适应相机的像素

openGLRenderWindow.setSize(container.clientWidth, container.clientHeight)

 // 创建交互器

const interactor = vtkRenderWindowInteractor.newInstance()

interactor.setView(openGLRenderWindow)

interactor.initialize()

interactor.bindEvents(container) // 绑定到容器上

// 设置交互样式

const trackballInteractionStyle =

      vtkInteractorStyleTrackballCamera.newInstance()

interactor.setInteractorStyle(trackballInteractionStyle)

添加以上代码，模型就解决了模糊和不能旋转的问题了。