基于cornerstone3D的dicom影像浏览器 第二十七章 设置vr相机,复位视图

文章目录


前言

  1. VR窗口通过设置相机显示"前视( A )"、"后视( P )"、"左视( L )"、"右视( R )"、"俯视( S )"、"仰视( I )" 图像
  2. 实现各视图复位功能
    效果如下:

一、VR视图设置相机位置

1. 相机位置参数

vtk坐标系,以人体为例:

x 轴正向: 从右至左 [1,0,0],反向:从左至右[-1,0,0]

y轴正向:从前至后[0,1,0],反向:从后至前[0,-1,0]

z轴正向:从下至上[0,0,1],反向:从上至下[0,0,-1]

相机的两个参数:

  1. viewPlaneNormal,视平面法向量,与视线相反的方向。如相机对着物体拍摄,从物体指向相机镜头的方向就是视平面法向量。
  2. viewUp,相机向上的方向

于是可得以下参数:

前视( A ): viewPlaneNormal即为y轴反向[0, -1, 0],viewUp z轴正向[0,0,1]

后视( P ): viewPlaneNormal即为y轴正向[0, 1, 0],viewUp z轴正向[0,0,1]

左视( L ): viewPlaneNormal即为x轴正向[1, 0, 0],viewUp z轴正向[0,0,1]

右视( R ): viewPlaneNormal即为x轴反向[-1, 0, 0],viewUp z轴正向[0,0,1]

俯视( S ): viewPlaneNormal即为z轴正向[0, 0, 1],viewUp y轴正向[0,1,0]或反向[0,-1,0]

仰视( I ): viewPlaneNormal即为z轴反向[0, 0, -1],viewUp y轴反向[0,-1,0]

2. 修改mprvr.js

  1. 获取viewport camera
  2. 设置camera两个参数viewPlaneNormal、viewUp
  3. 调用viewport.resetCamera()应用生效
javascript 复制代码
const cameraPos = {
	A: {
		viewPlaneNormal: [0, -1, 0],
		viewUp: [0, 0, 1]
	},
	P: {
		viewPlaneNormal: [0, 1, 0],
		viewUp: [0, 0, 1]
	},
	L: {
		viewPlaneNormal: [1, 0, 0],
		viewUp: [0, 0, 1]
	},
	R: {
		viewPlaneNormal: [-1, 0, 0],
		viewUp: [0, 0, 1]
	},
	S: {
		viewPlaneNormal: [0, 0, 1],
		viewUp: [0, 1, 0]
	},
	I: {
		viewPlaneNormal: [0, 0, -1],
		viewUp: [0, -1, 0]
	}
};

export default class MPR {
	...
	setCameraPosition(position) {
	    // 获取相机位置参数
		const data = cameraPos[position];
		const viewport = this.renderingEngine.getViewport(idVolume);

		// 设置相机位置参数
		viewport.setCamera({
			viewUp: data.viewUp,
			viewPlaneNormal: data.viewPlaneNormal
		});
		viewport.resetCamera();
	}
}

3. 调用流程

1) 修改Toolbar3D.vue

  • 添加操作元素el-select
  • 绑定变量currentCameraPos
  • 监听currentCameraPos变化,发送changeCameraPos事件
javascript 复制代码
<script setup name="Toolbar3D">
const cameraPos = [
	{name:"前视(A)", value: "A"},
	{name:"后视(P)", value: "P"},
	{name:"左视(L)", value: "L"},
	{name:"右视(R)", value: "R"},
	{name:"俯视(S)", value: "S"},
	{name:"仰视(I)", value: "I"},
];
const currentCameraPos = ref("A");
watch(currentCameraPos, (newValue) => {
	emit("action", { name: "changeCameraPos", value: newValue });
});
</script>
<template>
	...
	<div class="toolbar-row">
		<div class="pre-label">Camera:</div>
		<el-select v-model="currentCameraPos" placeholder="Select Camera Position" style="width: 200px">
			<el-option v-for="item in cameraPos" :key="item.value" :label="item.name" :value="item.value" />
		</el-select>
	</div>
</template>

2) 修改View3d.vue

在OnToolbarAction中添加事件响应

javascript 复制代码
async function OnToolbarAction(action) {
	...
	case "changeCameraPos":
		displayArea.value.setCameraPosition(action.value);
		break;
}

3) 修改DisplayerArea3D.vue

添加并导出函数setCameraPosition

javascript 复制代码
const setCameraPosition = position => {
	theMPR.setCameraPosition(position);
};

defineExpose({
	...
	setCameraPosition
});

二、所有视图复位

1.复位流程说明

VR视图:

  1. 图像加载成功后保存相机初始参数
  2. 相机参数设置为初始参数
  3. 设置默认preset

切片视图:

  1. 调用viewport.resetCamera()

  2. 设置默认窗宽窗位

修改mprvr.js,在loadImages函数中保存相机初始参数。增加resetCamera函数

javascript 复制代码
const initVolumeCamera = {
	viewUp: [],
	viewPlaneNormal: [],
	position: [],
	focalPoint: [],
	viewAngle: 0,
	parallelScale: 1
};

export default class MPR {
	...
	async loadImages(imageIds) {
		...
		this.renderingEngine.renderViewports(viewportIds);

		const viewport = this.renderingEngine.getViewport(idVolume);
		await setVolumesForViewports(this.renderingEngine, [{ volumeId }], [idVolume]).then(() => {
			viewport.setProperties({
				preset: "CT-Coronary-Arteries-2"
			});
				
			// 保存相机初始参数
			const camera = viewport.getCamera();
			initVolumeCamera.viewUp = camera.viewUp;
			initVolumeCamera.viewPlaneNormal = camera.viewPlaneNormal;
			initVolumeCamera.position = camera.position;
			initVolumeCamera.focalPoint = camera.focalPoint;
			initVolumeCamera.viewAngle = camera.viewAngle;
			initVolumeCamera.parallelScale = camera.parallelScale;
		});
		...
	}
	
	resetCamera() {
		if (!this.loaded) return;
		viewportIds.forEach(viewportId => {
			const viewport = this.renderingEngine.getViewport(viewportId);
			if (viewport) {
				if (viewportId === idVolume) { // VR视图
				    // 设置默认preset
					viewport.setProperties({
						preset: "CT-Coronary-Arteries-2"
					});

					// 设置初始相机参数
					const camera = viewport.getCamera();
					camera.viewUp = initVolumeCamera.viewUp;
					camera.viewPlaneNormal = initVolumeCamera.viewPlaneNormal;
					camera.position = initVolumeCamera.position;
					camera.focalPoint = initVolumeCamera.focalPoint;
					camera.viewAngle = initVolumeCamera.viewAngle;
					camera.parallelScale = initVolumeCamera.parallelScale;
					viewport.setCamera(camera);
				} else { // 切片视图
					viewport.resetCamera();
					viewport.render();
				}
			}
		});
	}
}

2. 调用流程

1) Toolbar3D中添加"复位"按钮,发送reset事件

2) View3d.vue中响应reset事件,调用DispalerArea3D中的reset函数

3) DisplayerArea3D中添加并导出reset函数,增加setDefaultWindow函数

javascript 复制代码
// defWW, defWL在load函数中保存了默认窗值
const setDefaultWindow = () => {
	theMPR.setWindow(defWW.value, defWL.value);
};

const reset = () => {
	theMPR.resetCamera();
	setDefaultWindow();
};

defineExpose({
	...
	reset 
});

总结

1.讲解VR视图六个正向视图的相机参数是如何设置的

2.VR视图与切片视图复位

相关推荐
zhongqu_3dnest3 小时前
室内VR全景助力房产营销及装修
vr·vr看房·房产营销·房产经济·室内全景·vr室内装修·室内全景设计
广州华锐视点3 小时前
VR 技术与病毒分离鉴定:一场奇妙的邂逅
vr
zhongqu_3dnest5 小时前
VR看房系统,新生代看房新体验
科技·vr·vr看房·三维空间·在线看房系统·房产营销·房产经济
广州华锐视点6 小时前
线上 VR 展会:独特魅力与显著特质
vr
GISer_Jing9 小时前
[3D GIS&Mesh]三角网格模型中的孔洞修补算法
算法·3d
cnbestec9 小时前
MinVerse 3D触觉鼠标的技术原理与创新解析
3d·计算机外设·xr·minverse·minverse 3d触觉鼠标·三维交互·触觉反馈
zhongqu_3dnest16 小时前
什么是VR全景相机?如何选择VR全景相机?
科技·数码相机·vr·实用技巧·数字空间·全景相机·设备选择
BBTSOH159015160441 天前
数控技术应用理实一体化平台VR实训系统
vr·虚拟现实·仿真·教学·课程·机床·课件
广州华锐视点1 天前
VR 赋能病毒分离鉴定:开启微观探索新视界
vr
moonsims1 天前
无人机桥梁3D建模、巡检、检测的航线规划
3d·无人机