基于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()应用生效

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事件

<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中添加事件响应

async function OnToolbarAction(action) {
	...
	case "changeCameraPos":
		displayArea.value.setCameraPosition(action.value);
		break;
}

3) 修改DisplayerArea3D.vue

添加并导出函数setCameraPosition

const setCameraPosition = position => {
	theMPR.setCameraPosition(position);
};

defineExpose({
	...
	setCameraPosition
});

二、所有视图复位

1.复位流程说明

VR视图：

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

切片视图：
3. 调用viewport.resetCamera()
4. 设置默认窗宽窗位

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

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函数

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

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

defineExpose({
	...
	reset 
});

---

总结

1.讲解VR视图六个正向视图的相机参数是如何设置的
2.VR视图与切片视图复位