---

前言

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視圖// 設置默認presetviewport.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視圖與切片視圖復位