vue2 更新视图如何做到不重载？

[kingship]

大佬您好，我想实现点击单个对象添加listItem，但当更新threeDData后，画布回重载回初始状态，请问如何做到不重载？

<template>
  <div>
    <vue3dLoader :height="500" :filePath="['/static/scene.gltf']" @click="onClick" @load="onLoader"
      @mousemove="onMouseMove" :intersectRecursive="true">
    </vue3dLoader>
    <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }" :data-source="threeDData">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-card :title="item.title">
          Card content
        </a-card>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import { vue3dLoader } from "vue-3d-loader";
import * as THREE from 'three'

export default {
  components: {
    vue3dLoader,
    THREE,
  },
  data() {
    return {
      visible: false,
      visiblePop: false,
      currentObject: null,
      threeDData: [],
    }
  },

  methods: {
    onMouseMove(event, intersected) {
      if (intersected) {
        intersected.object.parent.children.forEach((item) => {
          item.material.color.set(0xc8c8c8);
        })
        intersected.object.material.color.set(0x8f8f8f);
        this.currentObject = intersected.object.name
      }
    },

    onClick(event, intersected) {
      let app = this
      if (intersected.object.name == app.currentObject) {
        app.threeDData.push({ 'title': app.currentObject })
      }
    },

    onLoader(object) {
      object.traverse(function (child) {
        if (child) {
          //每个储位单独赋予一个基础材质                                   
          child.material = new THREE.MeshStandardMaterial({ color: 0xc8c8c8 });
        }
      })
    },

  },
}
</script>

[JaneYork]

大佬您好，我想实现点击单个对象添加listItem，但当更新threeDData后，画布回重载回初始状态，请问如何做到不重载？

<template>
  <div>
    <vue3dLoader :height="500" :filePath="['/static/scene.gltf']" @click="onClick" @load="onLoader"
      @mousemove="onMouseMove" :intersectRecursive="true">
    </vue3dLoader>
    <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }" :data-source="threeDData">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-card :title="item.title">
          Card content
        </a-card>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import { vue3dLoader } from "vue-3d-loader";
import * as THREE from 'three'

export default {
  components: {
    vue3dLoader,
    THREE,
  },
  data() {
    return {
      visible: false,
      visiblePop: false,
      currentObject: null,
      threeDData: [],
    }
  },

  methods: {
    onMouseMove(event, intersected) {
      if (intersected) {
        intersected.object.parent.children.forEach((item) => {
          item.material.color.set(0xc8c8c8);
        })
        intersected.object.material.color.set(0x8f8f8f);
        this.currentObject = intersected.object.name
      }
    },

    onClick(event, intersected) {
      let app = this
      if (intersected.object.name == app.currentObject) {
        app.threeDData.push({ 'title': app.currentObject })
      }
    },

    onLoader(object) {
      object.traverse(function (child) {
        if (child) {
          //每个储位单独赋予一个基础材质                                   
          child.material = new THREE.MeshStandardMaterial({ color: 0xc8c8c8 });
        }
      })
    },

  },
}
</script>

最后更么解决的？

[JaneYork]

@kingship 另外求助下，点击模型某个位置弹窗显示接口数据怎么实现呢？ 怎么确定点击了哪里呢