threejs在vue3中报错【TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value ...】

1. 将scene定义成全局变量.

app.config.globalProperties.$scene = ''             //mainjs中定义

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

proxy.$scene = new THREE.Scene()          //页面中使用

 

2.不用ref定义scene

let scene

scene = new THREE.Scene()

#补充#

如果requestAnimationFrame()无法让场景旋转,可以使用

let scene

let camera = ref(null)

let renderer = ref(null)

scene = new THREE.Scene()  //创建场景

//创建相机
const k = window.innerWidth / window.innerHeight
camera.value = new THREE.PerspectiveCamera(45,k,0.1,30000)

//创建渲染器
const element = document.getElementById('container')
renderer.value = new THREE.WebGLRenderer({ antialias: true, alpha: true })


const controls = new OrbitControls(camera.value, renderer.value.domElement)
controls.addEventListener('change', () => {
  renderer.value.render(scene, camera.value)
})

 =========================2024-01-23===============================

最近在使用vue3.3时候 又报这个错 

把three相关的值全都去掉ref定义

let camera = null  //相机
let scene = null  //场景
let particles = null  //粒子
let renderer = null  //渲染器
问题解决