vue3 + three.js 解决报错Uncaught TypeError: ‘get‘ on proxy: property ‘xxx‘ is a read-only and non-conf..

项目场景：

公司项目采用vue3+three，今天做页面截图 ，图片下载产生了一个问题

---

问题描述

翻译过来
属性“modelViewMatrix”是代理目标上的一个只读且不可配置的数据属性，但代理没有返回它的实际值(预期为“#”，但得到了“#”)

    screenShots(name:any){
        const s = 15;
        let tempCamera =new OrthographicCamera(-s, s, -s * (this.h / this.w), s * (this.h / this.w), 0, 10000000)
        tempCamera.lookAt(0, 0, 0);
        let image = new Image();
        
        let renderer:WebGLRenderer|null = new WebGLRenderer()
        renderer.setSize(this.w, this.h); 
        renderer.render(this.scene, tempCamera);
        //图片转base64地址 这里可以选择png格式jpeg格式
        let imgData = renderer.domElement.toDataURL("image/png");
         //使用后需要销毁不然会换画面，显示当前的renderer
        renderer = null;
        image.src = imgData;
        image.style.display = 'none'
        document.body.appendChild(image);
        console.log(image);
        
        Download(name,imgData)
    }

renderer.render(this.scene, tempCamera);

注意这里,this.scene是一个proxy对象

这个modelViewMatrix是个私有属性可能无法读取到

解决方案：

依情况而定

1.不做代理

直接用var 声明，

<script>
//导入
var scene = new Scene();

export default defineComponent({
  name: "xxxx",
  data() {
    //XXXX
  },

  methods: {
  	//XXXXX
  },
});
</script>

2.浅拷贝

方式很多
比如：使用 json.Stringify()

const scene = JSON.parse(JSON.stringify(this.scene));
 renderer.render(scene, tempCamera);

3.toRaw

 renderer.render(toRaw(this.scene), tempCamera);

本质就是用原对象，不要用代理过的