add IRV card

src/components/content/SeqInferenceResultVisualize.vue

@@ -17,12 +17,12 @@
             
             <Col span="16" style="padding-left: 10px;">
 
-                <ViewDistributionCard
+                <ViewDistributionCard_IRV
                     :seqFrameData="seq_frame_data"
                     :objInfo="obj_info"
                     @show-img="showImage"
                     />
-                <RecProcessCard
+                <RecProcessCard_IRV
                     :seqFrameData="seq_frame_data"
                     :modelPts="model_pts"
                     @show-img="showImage"
@@ -39,16 +39,16 @@
 <script>
 
 import UploadInferenceCard from './cards/UploadInferenceCard.vue';
-import ViewDistributionCard from './cards/ViewDistributionCard.vue';
-import RecProcessCard from './cards/RecProcessCard.vue';
+import ViewDistributionCard_IRV from './cards/ViewDistributionCard_IRV.vue';
+import RecProcessCard_IRV from './cards/RecProcessCard_IRV.vue';
 
 
 export default {
     name: "SeqInferenceResultVisualize",
     components: {
         UploadInferenceCard,
-        ViewDistributionCard,
-        RecProcessCard,
+        ViewDistributionCard_IRV,
+        RecProcessCard_IRV,
     },
     watch: {
     },
@@ -60,7 +60,6 @@ export default {
             obj_info: null,
             seq_frame_data: [],
             model_pts: null,
-
             loading: false,
 
             selectedImage: null,

src/components/content/cards/RecProcessCard.vue

@@ -40,10 +40,10 @@
                         <span style="color: green; font-size: 14px;font-weight: bold;">+{{ curr_frame_info["delta_CR"] }}%</span>
                     </div>
                 </Card>
-                <Divider/>
-                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                <Divider />
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;" >
                     Depth(L)
-                </p>
+                </p >
                 <Card :style="{
                     marginTop: '5px', 
                     marginBottom: '5px', 

src/components/content/cards/RecProcessCard_IRV.vue

@@ -0,0 +1,212 @@
+<template>
+    <Card style="width: 100%; margin-bottom: 10px">
+       
+        <p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
+            <Icon type="md-code-working" size="20" style="color: #464c5b;" />
+            Inference Reconstruction Process
+        </p>
+        <Row style="height: 100%;">
+            <Col span="18" style="height: 100%;">
+                <Card
+                    style="position: relative; height: 100%; "
+                    dis-hover>
+                    <div style="width: 100%; height: 100%;">
+                        <canvas ref="threeCanvas_pts" style="width: 100%; height: 600px;"></canvas>
+                    </div>
+                </Card>
+            </Col>
+            <Col span="1" style="display: flex; align-items: center; justify-content: center;">
+                <Divider type="vertical" style="height: 100%;" />
+            </Col>
+            <Col span="5">
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Current Frame Information
+                </p>
+                <Card style="margin-top: 5px; margin-bottom: 5px; width: 100%;">
+                    <div >
+                        Step:
+                        <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["step"] }}</span>
+                    </div>
+                    <div >
+                        Coverage Rate(CR):
+                        <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["coverage_rate"] }}%</span>
+                    </div>
+                    <div >
+                        Delta CR:
+                        <span style="color: green; font-size: 14px;font-weight: bold;">+{{ curr_frame_info["delta_CR"] }}%</span>
+                    </div>
+                </Card>
+                <Divider v-if="hasImg"/>
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
+                    Depth(L)
+                </p >
+                <Card :style="{
+                    marginTop: '5px', 
+                    marginBottom: '5px', 
+                    paddingBottom: rpCurrDepth ? '0' : '62.5%'
+                }" v-if="hasImg">
+                <img :src="`data:image/png;base64,${rpCurrDepth}`" alt="Depth Image" style="width: 100%;" v-if="rpCurrDepth" @click="showImage(`data:image/png;base64,${rpCurrDepth}`)"/>
+                </Card>
+                <Divider v-if="hasImg" />
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
+                    Mask(L)
+                </p>
+                <Card :style="{
+                    marginTop: '5px', 
+                    marginBottom: '5px', 
+                    paddingBottom: rpCurrMask ? '0' : '62.5%'
+                }" v-if="hasImg">
+                <img :src="`data:image/png;base64,${rpCurrMask}`" alt="Depth Image" style="width: 100%;" v-if="rpCurrMask" @click="showImage(`data:image/png;base64,${rpCurrMask}`)"/>
+                </Card>
+            </Col>
+        </Row>
+        <Divider/>
+        <Row>
+            <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Reconstruction Process: [<span style="color: green;">{{ curr_step }}</span>/<span>{{ seqFrameData.length -1 }}</span>]
+            </p>
+            <Slider v-model="curr_step" :step="1" style="width: 100%;" :max="seqFrameData.length-1 >=0 ? seqFrameData.length-1:0"></Slider>
+        </Row>
+    </Card>
+</template>
+
+<script>
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+export default {
+  props: {
+    seqFrameData: Array,
+    modelPts: Array,
+  },
+  data() {
+    return {
+        rpCurrDepth: null,
+        rpCurrMask: null,
+
+        pts_scene: null,
+        pts_camera: null,
+        pts_renderer: null,
+        pts_controls: null,
+
+        curr_step: 0,
+
+        model_pts: null,
+
+        combined_point_cloud: [],
+        new_point_cloud: [],
+
+        best_seq: null,
+
+        curr_frame_info: {
+                "step": 0,
+                "frame_id":0,
+                "coverage_rate": 0,
+                "delta_CR": 0,
+                "combined_points": [],
+                "new_points": [],
+            },
+
+      
+    };
+  },
+  watch: {
+    seqFrameData(val) {
+        if (val.length > 0) {
+            this.rpCurrDepth = val[0].data.depth;
+            this.rpCurrMask = val[0].data.mask;
+            this.curr_step = 0;
+            this.curr_frame_info["step"] = 0;
+            this.curr_frame_info["frame_id"] = val[0]["frame_id"];
+            this.curr_frame_info["coverage_rate"] = val[0]["data"]["coverage_rate"];
+            this.curr_frame_info["delta_CR"] = val[0]["data"]["delta_CR"];
+            this.curr_frame_info["combined_point_cloud"] = val[0]["data"]["combined_point_cloud"];
+            this.curr_frame_info["new_point_cloud"] = val[0]["data"]["new_point_cloud"];
+            this.updatePointCloud();
+            this.view_cam_pose_list = [];
+            for (let i = 0; i < val.length; i++) {
+                this.view_cam_pose_list.push(val[i].data.cam_to_world);
+            }
+            
+        }
+        
+    },
+    curr_step (val) {
+        this.rpCurrDepth = this.seqFrameData[val]["data"]["depth"];
+        this.rpCurrMask = this.seqFrameData[val]["data"]["mask"];
+        this.curr_frame_info["step"] = val;
+        this.curr_frame_info["frame_id"] = this.seqFrameData[val]["frame_id"];
+        this.curr_frame_info["coverage_rate"] = this.seqFrameData[val]["data"]["coverage_rate"];
+        this.curr_frame_info["delta_CR"] = this.seqFrameData[val]["data"]["delta_CR"];
+        this.curr_frame_info["combined_point_cloud"] = this.seqFrameData[val]["data"]["combined_point_cloud"];
+        this.curr_frame_info["new_point_cloud"] = this.seqFrameData[val]["data"]["new_point_cloud"];
+        this.updatePointCloud();
+    }
+  },
+  mounted() {
+    this.initThreeJS_pts(); 
+    this.animate_pts();
+  },
+  
+  methods: {
+    initThreeJS_pts() {
+        const width = this.$refs.threeCanvas_pts.clientWidth;
+        const height = this.$refs.threeCanvas_pts.clientHeight;
+
+        this.pts_scene = new THREE.Scene();
+
+        this.pts_camera = new THREE.PerspectiveCamera(75, width / height, 0.001, 1000);
+        this.pts_camera.position.z = 2;
+
+        this.pts_renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_pts });
+        this.pts_renderer.setSize(width, height);
+
+        this.pts_controls = new OrbitControls(this.pts_camera, this.pts_renderer.domElement);
+        
+
+        this.pts_scene.rotation.x = -Math.PI / 2;
+        const axesHelper = new THREE.AxesHelper(5);
+        this.pts_scene.add(axesHelper);
+    },
+
+    animate_pts() {
+        requestAnimationFrame(() => this.animate_pts());
+        this.pts_renderer.render(this.pts_scene, this.pts_camera);
+    },
+
+    updatePointCloud() {
+        
+        if (this.combinedPointCloudMesh) {
+            this.pts_scene.remove(this.combinedPointCloudMesh);
+        }
+        if (this.newPointCloudMesh) {
+            this.pts_scene.remove(this.newPointCloudMesh);
+        }
+        this.combinedPointCloudMesh = this.createPointCloud(this.curr_frame_info["combined_point_cloud"], 0x0000ff);
+        this.newPointCloudMesh = this.createPointCloud(this.curr_frame_info["new_point_cloud"], 0xff0000);
+
+        this.pts_scene.add(this.combinedPointCloudMesh);
+        this.pts_scene.add(this.newPointCloudMesh);
+        
+    },
+
+
+    createPointCloud(pointCloudData, color) {
+        const geometry = new THREE.BufferGeometry();
+        const vertices = new Float32Array(pointCloudData.flat());
+
+        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+
+        const material = new THREE.PointsMaterial({
+            size: 0.005,
+            color: color,
+        });
+
+        return new THREE.Points(geometry, material);
+    },
+    showImage(url){
+        this.$emit('show-img', url);
+    }
+  },
+};
+
+</script>

src/components/content/cards/UploadInferenceCard.vue

@@ -23,19 +23,24 @@
       <p style="font-size: 16px; color: #464c5b; font-weight: bold;">Select Inference Result:</p>
       </Col>
       <Col span="12">
-        <Select v-model="localSceneName" style="width: 100%;" @on-change="handleSceneChange" placeholder="please select..." :disabled="localDisableBtn">
+      <Select v-model="localSceneName" style="width: 100%;" @on-change="handleSceneChange"
+        placeholder="please select..." :disabled="localDisableBtn" disabled>
         <Option v-for="item in sceneNameList" :value="item" :key="item">{{ item }}</Option>
       </Select>
       </Col>
     </Row>
 
-    <Upload
-        multiple
-        type="drag"
-        action="//jsonplaceholder.typicode.com/posts/">
+    <Upload multiple type="drag" action="" accept=".pkl" :before-upload="beforeUploadInferenceResultFile"
+      style="width: 100%; position: relative;">
       <div style="padding: 20px 0">
-            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
-            <p>Click or drag inference result here to upload</p>
+        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff" v-if="!loading">
+        </Icon>
+        <p v-if="!loading">Select or drag the inference result file(.pkl) here to upload
+        </p>
+        <div class="demo-spin-container" v-if="loading">
+          <Spin fix size="large"></Spin>
+        </div>
+        <p v-if="loading">Waiting for server response...</p>
       </div>
     </Upload>
 
@@ -47,10 +52,19 @@
       </p>
       <Row style="width: 100%;">
         <Col style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px; width: 100%;">
-          <p><Badge status="success" /><span style="font-weight: bold;">sequence length</span>: {{ localSeqLen }}</p>
-          <p><Badge status="success" /><span style="font-weight: bold;">max coverage rate</span>: {{ localMaxCoverageRate }}%</p>
-          <p><Badge status="success" /><span style="font-weight: bold;">best sequence length</span>: {{ localBestSeqLen }}</p>
-          <p><Badge status="success" /><span style="font-weight: bold;">best sequence</span>:</p>
+        <p>
+          <Badge status="success" /><span style="font-weight: bold;">sequence length</span>: {{ localSeqLen }}
+        </p>
+        <p>
+          <Badge status="success" /><span style="font-weight: bold;">max coverage rate</span>: {{ localMaxCoverageRate
+          }}%
+        </p>
+        <p>
+          <Badge status="success" /><span style="font-weight: bold;">best sequence length</span>: {{ localBestSeqLen }}
+        </p>
+        <p>
+          <Badge status="success" /><span style="font-weight: bold;">best sequence</span>:
+        </p>
 
         <Card style="margin:10px;max-height: 200px; overflow-y: auto;">
           <Row v-for="(item, index) in localBestSeq" :key="item['frame']" style="margin-left: 20px;">
@@ -65,7 +79,8 @@
 
     <Divider />
     <Row type="flex" justify="center">
-      <Button type="success" style="width:60%" :disabled="!localSceneName || localDisableBtn" @click="handleLoadSeq" :loading="localDisableBtn">
+      <Button type="success" style="width:60%" :disabled="!localSceneName || localDisableBtn" @click="handleLoadSeq"
+        :loading="localDisableBtn">
         Load Sequence
       </Button>
     </Row>
@@ -86,6 +101,8 @@ export default {
       localBestSeq: null,
       localDisableBtn: false,
       sceneNameList: null,
+      loading: false,
+      
       seqFrameData: []
     };
   },
@@ -96,7 +113,7 @@ export default {
   },
   methods: {
     getSceneList() {
-      const params = {dataset_name: this.localDatasetName};
+      const params = { dataset_name: this.localDatasetName };
       this.$ajax.postjson('/get_scene_list', params)
         .then((data) => {
           if (data.success == true) {
@@ -108,7 +125,7 @@ export default {
     },
     handleSceneChange(val) {
       this.localSceneName = val;
-      const params = {dataset_name: this.localDatasetName, scene_name: val};
+      const params = { dataset_name: this.localDatasetName, scene_name: val };
       this.$ajax.postjson('/get_scene_info', params)
         .then((data) => {
           if (data.success == true) {
@@ -122,7 +139,7 @@ export default {
         });
     },
     handleLoadSeq() {
-      const params = {dataset_name: this.localDatasetName, scene_name: this.localSceneName, sequence: this.localBestSeq};
+      const params = { dataset_name: this.localDatasetName, scene_name: this.localSceneName, sequence: this.localBestSeq };
       this.localDisableBtn = true;
       this.$emit('set-loading', true);
       this.$ajax.postjson('/get_frame_data', params)
@@ -138,6 +155,40 @@ export default {
         });
 
     },
+    beforeUploadInferenceResultFile(file) {
+      this.loading = true;
+      const isPkl = file.name.endsWith('.pkl');
+      if (!isPkl) {
+        this.$Notice.warning({
+          title: 'File format error',
+          desc: 'You can only upload a .pkl file'
+        });
+        this.loading = false;
+        return false;
+      }
+      const formData = new FormData();
+      formData.append('file', file);
+      this.$ajax.postfile('/analysis_inference_result', formData)
+        .then((data) => {
+          if (data.success == true) {
+            
+            this.$Notice.success({
+              title: 'Successfully parsed the file',
+              desc: 'inference results are found in the uploaded file.'
+            });
+            this.loading = false;
+          } else {
+            console.log(data.success, data.message)
+            this.$Notice.error({
+              title: 'Failed to parse the file',
+              desc: 'Error message: ' + data.message
+            });
+            this.loading = false;
+          }
+        });
+
+      return false;
+    },
   },
 };
 </script>

src/components/content/cards/ViewDistributionCard_IRV.vue

@@ -0,0 +1,349 @@
+<template>
+    <Card style="width: 100%; margin-bottom: 10px">
+        
+        <p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
+            <Icon type="ios-image" size="20" style="color: #464c5b;"/>
+            View Distribution
+        </p>
+        <Row>
+            <Col span="18">
+                <Card
+                    style="position: relative; padding-bottom: 62.5%; min-height: 100px; height: 0; overflow: hidden;"
+                    dis-hover>
+                    <canvas ref="threeCanvas_view" style="width: 100%; height:100%"></canvas>
+                </Card>
+            </Col>
+            <Col span="1" style="display: flex; align-items: center; justify-content: center;">
+                <Divider type="vertical" style="height: 100%;" />
+            </Col>
+            <Col span="5">
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Current Frame ID:
+                </p>
+
+                <div style="text-align: center;">
+                    <span style="color: red; font-size: 16px;font-weight: bold;">{{ chosen_frame_id == null?"no camera is selected": chosen_frame_id }}</span>
+                </div>
+                <Divider/>
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
+                    Depth(L)
+                </p>
+                <Card :style="{
+                    marginTop: '5px', 
+                    marginBottom: '5px', 
+                    minHeight: '30%'
+                }" v-if="hasImg">
+                    <img :src="`data:image/png;base64,${vdCurrDepth}`" alt="Depth Image" style="width: 100%;" v-if="vdCurrDepth" @click="showImage(`data:image/png;base64,${vdCurrDepth}`)"/>
+                </Card>
+                <Divider v-if="hasImg"/>
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;" v-if="hasImg">
+                    Mask(L)
+                </p>
+                <Card :style="{
+                    marginTop: '5px', 
+                    marginBottom: '5px', 
+                    minHeight: '30%'
+                }" v-if="hasImg">
+                    <img :src="`data:image/png;base64,${vdCurrMask}`" alt="Mask Image" style="width: 100%;" v-if="vdCurrMask" @click="showImage(`data:image/png;base64,${vdCurrMask}`)"/>
+                </Card>
+            </Col>
+            
+        </Row>
+        <Divider/>
+        <Row>
+            <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    NBV Sequence: [<span style="color: green;">{{ selected_idx }}</span>/<span>{{ seqFrameData.length -1 }}</span>]
+            </p>
+            <Slider v-model="selected_idx" :step="1" style="width: 100%;" :max="seqFrameData.length-1 >=0 ? seqFrameData.length-1:0"></Slider>
+        </Row>
+    </Card>
+</template>
+
+
+<script>
+
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
+
+export default {
+  props: {
+    seqFrameData: Array,
+    objInfo: Object
+  },
+  data() {
+    return {
+        vdCurrDepth: null,
+        vdCurrMask: null,
+        chosen_frame_id: null,
+        selected_idx: 0,
+
+        scene: null,
+        camera: null,
+        renderer: null,
+        controls: null,
+        raycaster: new THREE.Raycaster(),
+        mouse: new THREE.Vector2(),
+        selectedFrustum: null, 
+        hoveredFrustum: null, 
+        target: new THREE.Vector3(0, 0, 0.85),
+        view_cam_pose_list: [],
+        view_cam_pose_matrix_list: [],
+        frustums: [], 
+        loadedObject: null,
+
+      
+    };
+  },
+  watch: {
+    seqFrameData(val) {
+        if (val.length > 0) {
+            this.vdCurrDepth = val[0].data.depth;
+            this.vdCurrMask = val[0].data.mask;
+            for (let i = 0; i < this.frustums.length; i++) {
+                this.scene.remove(this.frustums[i]);
+            }
+            this.view_cam_pose_list = [];
+            this.view_cam_pose_matrix_list = [];
+            this.frustums = [];
+            this.selectedFrustum = null;
+            this.selected_idx = 0;
+            for (let i = 0; i < val.length; i++) {
+                this.view_cam_pose_list.push(val[i].data.cam_to_world);
+            }
+            this.getCameras();
+            this.selectCamera(this.selected_idx);
+        }
+    },
+    objInfo(val) {
+        if (val) {
+            const objURL = val.obj_path;
+            const mtlURL = val.mtl_path;
+
+            this.loadMesh(objURL, mtlURL);
+        }
+    },
+    selected_idx(val) {
+        if (val != null) {
+            this.selectCamera(val);
+        }
+    }
+  },
+  mounted() {
+    this.initThreeJS_view();
+    
+    this.animate();
+    window.addEventListener('mousemove', this.onMouseMove, false);
+    window.addEventListener('click', this.onMouseClick, false);
+  },
+  beforeDestroy() {
+        window.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('click', this.onMouseClick);
+},
+  methods: {
+    initThreeJS_view() {
+            
+        this.scene = new THREE.Scene();
+
+        const width = this.$refs.threeCanvas_view.clientWidth;
+        const height = this.$refs.threeCanvas_view.clientHeight;
+
+        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.09, 1000);
+        
+        this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_view });
+        this.renderer.setSize(width, height);
+        this.scene.rotation.x = -Math.PI / 2;
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        const axesHelper = new THREE.AxesHelper(5);
+        this.scene.add(axesHelper);
+        const light = new THREE.AmbientLight(0xffffff, 1);
+        this.scene.add(light);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+        directionalLight.position.set(5, 5, 5).normalize();
+        this.scene.add(directionalLight);
+        this.camera.position.set(0.5, 1.5, 0); 
+        this.camera.lookAt(this.target);
+
+    },
+    selectCamera(index) {
+        if (index >= 0 && index < this.frustums.length) {
+            const frustum = this.frustums[index];
+            if (this.selectedFrustum) {
+                this.selectedFrustum.material.color.set(0xff0000); // 恢复之前选中四棱锥的颜色
+            }
+            frustum.material.color.set(0x00ff00); // 选中的四棱锥颜色
+            this.selectedFrustum = frustum;
+
+            // 更新 chosen_frame_id 和其他相关信息
+            this.chosen_frame_id = this.seqFrameData[index].frame_id;
+            this.vdCurrDepth = this.seqFrameData[index].data.depth;
+            this.vdCurrMask = this.seqFrameData[index].data.mask;
+        }
+    },
+    clearLoadedObject() {
+        if (this.loadedObject) {
+        this.scene.remove(this.loadedObject);
+        this.loadedObject.traverse(child => {
+            if (child.material) child.material.dispose();
+            if (child.geometry) child.geometry.dispose();
+        });
+        this.loadedObject = null;
+        }
+    },
+    
+    loadMesh(objURL, mtlURL) {
+        this.clearLoadedObject();
+        const objLoader = new OBJLoader();
+        const mtlLoader = new MTLLoader();
+
+        mtlLoader.load(mtlURL, materials => {
+            materials.preload();
+            objLoader.setMaterials(materials);
+            objLoader.load(objURL, object => {
+                this.loadedObject = object;
+                this.scene.add(object);
+            });
+        });
+    },
+    getCameras() {
+        for (let i = 0; i < this.view_cam_pose_list.length; i++) {
+            const view_cam_pose = this.view_cam_pose_list[i];
+            const camera = new THREE.PerspectiveCamera(45, 1280 / 800, 0.1, 1000);
+
+            const camMatrix = new THREE.Matrix4().fromArray([
+                view_cam_pose[0][0], view_cam_pose[1][0], view_cam_pose[2][0], view_cam_pose[3][0],
+                view_cam_pose[0][1], view_cam_pose[1][1], view_cam_pose[2][1], view_cam_pose[3][1],
+                view_cam_pose[0][2], view_cam_pose[1][2], view_cam_pose[2][2], view_cam_pose[3][2],
+                view_cam_pose[0][3], view_cam_pose[1][3], view_cam_pose[2][3], view_cam_pose[3][3]
+            ]);
+            camera.matrixWorld.copy(camMatrix);
+            //camera.matrixWorldInverse.copy(camMatrix).invert();
+            camera.position.setFromMatrixPosition(camMatrix);
+            camera.rotation.setFromRotationMatrix(camMatrix);
+
+            this.view_cam_pose_matrix_list.push(camera.matrixWorld);
+            camera.updateProjectionMatrix();
+            const frustum = this.createFrustum(camera);
+            this.frustums.push(frustum);
+        }
+
+    },
+    createFrustum(camera) {
+        const frustumGeometry = new THREE.BufferGeometry();
+        const near = camera.near;
+        const far = camera.far;
+        const aspect = camera.aspect;
+        const fov = camera.fov * (Math.PI / 180); // 角度转弧度
+
+        // 计算近平面的高度和宽度
+        const hNear = 2 * Math.tan(fov / 2) * near;
+        const wNear = hNear * aspect;
+
+        // 获取相机的世界矩阵和相机方向
+        const worldMatrix = new THREE.Matrix4().makeRotationFromEuler(camera.rotation);
+        const camPos = new THREE.Vector3().copy(camera.position);
+        const camDir = new THREE.Vector3(0, 0, 1).applyMatrix4(worldMatrix).normalize();
+        const camUp = new THREE.Vector3(0, -1, 0).applyMatrix4(worldMatrix).normalize();
+        const camRight = new THREE.Vector3(1, 0, 0).applyMatrix4(worldMatrix).normalize();
+
+        // 计算近平面中心
+        const nearCenter = camPos.clone().add(camDir.clone().multiplyScalar(near));
+
+        // 计算近平面四个角的顶点
+        const nearTopLeft = nearCenter.clone().add(camUp.clone().multiplyScalar(hNear / 2)).sub(camRight.clone().multiplyScalar(wNear / 2));
+        const nearTopRight = nearCenter.clone().add(camUp.clone().multiplyScalar(hNear / 2)).add(camRight.clone().multiplyScalar(wNear / 2));
+        const nearBottomLeft = nearCenter.clone().sub(camUp.clone().multiplyScalar(hNear / 2)).sub(camRight.clone().multiplyScalar(wNear / 2));
+        const nearBottomRight = nearCenter.clone().sub(camUp.clone().multiplyScalar(hNear / 2)).add(camRight.clone().multiplyScalar(wNear / 2));
+
+        const vertices = new Float32Array([
+            // 近平面四个角
+            ...nearTopLeft.toArray(),
+            ...nearTopRight.toArray(),
+            ...nearBottomRight.toArray(),
+            ...nearBottomLeft.toArray(),
+            // 相机位置（四个重复的点）
+            ...camPos.toArray(),
+            ...camPos.toArray(),
+            ...camPos.toArray(),
+            ...camPos.toArray()
+        ]);
+
+        const index = [
+            // 近平面
+            0, 1, 2, 0, 2, 3,
+            // 侧面
+            0, 1, 4,
+            1, 2, 4,
+            2, 3, 4,
+            3, 0, 4
+        ];
+
+        frustumGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+        frustumGeometry.setIndex(index);
+
+        const frustumMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
+        const frustum = new THREE.Mesh(frustumGeometry, frustumMaterial);
+        this.scene.add(frustum);
+
+        return frustum;
+    },
+    onMouseMove(event) {
+        const rect = this.$refs.threeCanvas_view.getBoundingClientRect();
+        this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+        this.raycaster.setFromCamera(this.mouse, this.camera);
+        const intersects = this.raycaster.intersectObjects(this.frustums);
+
+        if (intersects.length > 0) {
+            const frustum = intersects[0].object;
+
+            
+            if (this.hoveredFrustum !== frustum) {
+                if (this.hoveredFrustum) {
+
+                    if (this.hoveredFrustum !== this.selectedFrustum) {
+                        this.hoveredFrustum.material.color.set(0xff0000);
+                    }
+                }
+
+                if (frustum !== this.selectedFrustum) {
+                    frustum.material.color.set(0xffff00);
+                }
+                this.hoveredFrustum = frustum;
+            }
+        } else {
+
+            if (this.hoveredFrustum && this.hoveredFrustum !== this.selectedFrustum) {
+                this.hoveredFrustum.material.color.set(0xff0000);
+                this.hoveredFrustum = null;
+            }
+        }
+    },
+    onMouseClick() {
+
+        this.raycaster.setFromCamera(this.mouse, this.camera);
+        const intersects = this.raycaster.intersectObjects(this.frustums);
+
+        if (intersects.length > 0) {
+            const frustum = intersects[0].object;
+            const index = this.frustums.indexOf(frustum);
+            if (index !== -1) {
+                this.selected_idx = index;
+            }
+        }
+    },
+
+    animate() {
+        requestAnimationFrame(this.animate);
+        this.controls.update();
+        this.renderer.render(this.scene, this.camera);
+    },
+
+    showImage(url){
+        this.$emit('show-img', url);
+    }
+  },
+};
+</script>

src/components/content/old/RecResultCard.vue

@@ -51,6 +51,7 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 export default {
   props: {
     seqFrameData: Array,
+    hasImg: Boolean,
   },
   data() {
     return {