vtk.js+react 实现ArrowSource 平移,缩放,旋转

MatrixBuilder 矩阵构造器

实现方法主要使用到的APIMatrixBuilder 该类提供了一个创建mat4的系统变换矩阵。所有函数都返回 MatrixBuilder 对象实例。

ArrowSource 箭头

在vtk.js中 ArrowSource 没有提供可以直接对该对象位置变换的接口，只能通过对它进行矩阵变换来改变它的位置整体大小的缩放。
关于箭头的一些坐标，轴底坐默认是在(0,0,0)，箭头的尖端默认是在(1,0,0)，也可以通过设置 Invert 参数为真，两端将会翻转即尖端位于(0,0,0)，而底部位于(1,0,0)。

实现代码

//归一化
 const normalization = (inPutArray,outArray)=>{
     const length = Math.sqrt(inPutArray[0]*inPutArray[0]+
                             inPutArray[1]*inPutArray[1]+
                             inPutArray[2]*inPutArray[2]);
     outArray[0] = inPutArray[0]/length;
     outArray[1] = inPutArray[1]/length;
     outArray[2] = inPutArray[2]/length;
 }
 // 参数: 
 // theVector：方向坐标 方向的计算方式（终点-起点）=方向
 // fromPoint：到达的点坐标 
 // scale:按比例缩放 
 // 传入方向坐标前要进行归一化
const createArrow=(fromPoint,theVector,scale)=>{
        // 实现流程 
        // 向量移动到指定位置的方法,1.确定旋转轴 2.旋转的夹角
        // 使用箭头房的点(1,0,0)和所需要去到的方向计算旋转轴
        // 将向量箭头看做一个点(0,0,0),移动到指定点(x,y,z)
        // 移动点方式先将向量旋转到该点所在的轴,在将该点平移
        // 获取旋转轴
        const rotateAxis = [0,0,0]; // 默认旋转轴在原点与箭头原点同步
        const oringinVector = [1,0,0]; // 获取箭头默认方向

        // 计算旋转轴方向
        vtkMath.cross(oringinVector,theVector,rotateAxis);
        // 得出的 rotateAxis 进行一次归一化
        normalization(rotateAxis,rotateAxis);
        // 计算旋转角度
        const angle = Math.acos(vtkMath.dot(oringinVector,theVector))*180/3.14159;
        console.log("angle:",angle);
        // 创建一个箭头
        const arrowSource = vtkArrowSource.newInstance();
        // 从全局对象容器中获取 renderer,renderWindows
        const {renderer,renderWindows} = context.current;
        const actor  = vtkActor.newInstance();
        const mapper = vtkMapper.newInstance();
        actor.setMapper(mapper);
        // 设置矩阵的变换
        // 先translate 平移
        // 后rotate 旋转
        const Matrix = vtkMatrixBuilder
                        .buildFromDegree()
                        .identity()
                        .translate(fromPoint[0],fromPoint[1],fromPoint[2])
                        .rotate(angle,rotateAxis).scale(scale[0],scale[1],scale[2])
                        .getMatrix();
        actor.setUserMatrix(Matrix);
        mapper.setInputConnection(arrowSource.getOutputPort());
        renderer.addActor(actor);
        renderWindows.render();
    }