three.js在Vue3中proxy问题

<script setup>
// 导入Vue组合API
import { onMounted, reactive, toRaw } from 'vue'
// 导入three
import * as THREE from 'three'
// 声明需要的参数
const content = reactive({
  // 声明场景对象Scene
  scene: null,
  // 声明网格模型mesh
  mesh: null,
})
//! 开始threejs的渲染步骤
const box = () => {
  // 创建场景对象Scene
  content.scene = new THREE.Scene()
  // 把创建场景对象 转换为普通对象格式
  const scene = toRaw(content.scene)
  // 网格模型对象Mesh
  content.mesh = new THREE.Mesh()
  // 把创建网格模型对象 转换为普通对象格式
  const mesh = toRaw(content.mesh)
}
onMounted(() => {
  box()
})

</script>

<template>
  <div>
    <div ref="stateDom" />
    <!-- 在模板中, 如果是class类中的Vue响应式数据，需要使用.value -->
    <LoaDing :loadingNumber="Three?.loadingNumber.value" />
  </div>
</template>
<script setup lang="ts">
// 导入Vue3的API
import { ref, onMounted, onBeforeUnmount, shallowRef } from 'vue'
// 导入three.js的构造函数
import { CreatedCanvas } from './components/car_render'

// 获取Dom
const stateDom = ref()
// 通过shallowRef()浅层响应式代理three.js数据
const Three = shallowRef<CreatedCanvas>()

onMounted(() => {
  // 创建three.js实例
  Three.value = new CreatedCanvas(stateDom.value)
  // 传递页面Dom 绘制three.js
  Three.value.createScene()
})

onBeforeUnmount(() => {
  // 销毁three.js实例
  Three.value?.dispose()
})
</script>

<script lang="ts">
export default {
  name: 'BydCar'
}
</script>
<style lang="scss" scoped></style>

<script setup>
// 导入Vue组合API
import { onMounted, shallowReactive, toRaw } from 'vue'
// 导入three
import * as THREE from 'three'
// 声明需要的参数
const content = shallowReactive({
  // 声明场景对象Scene
  scene: null,
  // 声明网格模型mesh
  mesh: null,
})
//! 开始threejs的渲染步骤
const box = () => {
  // 创建场景对象Scene
  content.scene = new THREE.Scene()
  // 网格模型对象Mesh
  content.mesh = new THREE.Mesh()
}
onMounted(() => {
  box()
})

</script>