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();
}