Learning vtkjs之hello vtk

news2024/11/15 13:22:01

学习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>
      <div
        ref={vtkContainerRef}
        style={{ position: "absolute", width: "100%", height: "100%" }}
      />
      <table
        style={{
          position: "absolute",
          top: "25px",
          left: "25px",
          background: "white",
          padding: "12px",
        }}
      >
        <tbody>
          <tr>
            <td>
              <select
                value={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>
              <input
                type="range"
                min="4"
                max="80"
                value={coneResolution}
                onChange={(ev) => setConeResolution(Number(ev.target.value))}
              />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default HelloVTK;