Learning vtkjs之hello vtk

学习vtkjs

最近由于工作需要，开始学习vtkjs的相关内容，发现其实在医疗和工业领域，这个vtk的库的example还是非常有帮助，但是实际用的一些开发工具，或者研发生态却没有three的好，也就是能抄写的东西不多，所以给自己开一个坑吧，先学习一下这个库使用，整理一下自己使用过程的一些心得。

主要的渲染逻辑

目前接触的第一个例子是hellvtk，也比较简单，流程是从source -> mapper -> actor，其中我理解到actor就是类似three里面的mesh，是一个基础渲染物体，vtk的应用场景是典型不同的，它更侧重于一些工程数据的渲染，比如切面，等值线，体渲染。
请添加图片描述

数据处理管理管线

看了别人文章可以了解到，其实vtk里面有一个比较重要的数据管线，这些都是在前端完成的，所以，在想是不是可以把这部分功能移植到three上，然后three之前开发的功能就不用修改了，同时可以拓展一下接入的数据的种类

Hellovtk

上面说的，可能需要更多了解vtk之后才知道，目前计划是先把所有的vtk的例子跑一边，然后在react的前端框架里面简单封装应用一下，逼迫自己强制学习，就给自己开一个新的坑
第一个hellovtk的例子代码

import React, { useState, useRef, useEffect } from "react";
import Viewer from "../vtkView/Viewer";function HelloVTK() {const vtkContainerRef = useRef(null);const [coneResolution, setConeResolution] = useState(6);const [representation, setRepresentation] = useState(2);let viewer3D = useRef(null);useEffect(() => {if (!viewer3D.current) {viewer3D.current = new Viewer(vtkContainerRef.current);viewer3D.current.init();viewer3D.current.addCone();}return () => {if (viewer3D.current) {viewer3D.current.destory();viewer3D.current = null;}};}, [vtkContainerRef]);useEffect(() => {if (viewer3D.current) {viewer3D.current.coneSource.setResolution(coneResolution);viewer3D.current.render();}}, [coneResolution]);useEffect(() => {if (viewer3D.current) {viewer3D.current.actor.getProperty().setRepresentation(representation);viewer3D.current.render();}}, [representation]);return (<div><divref={vtkContainerRef}style={{ position: "absolute", width: "100%", height: "100%" }}/><tablestyle={{position: "absolute",top: "25px",left: "25px",background: "white",padding: "12px",}}><tbody><tr><td><selectvalue={representation}style={{ width: "100%" }}onInput={(ev) => setRepresentation(Number(ev.target.value))}><option value="0">Points</option><option value="1">Wireframe</option><option value="2">Surface</option></select></td></tr><tr><td><inputtype="range"min="4"max="80"value={coneResolution}onChange={(ev) => setConeResolution(Number(ev.target.value))}/></td></tr></tbody></table></div>);
}export default HelloVTK;