threejs在vue3中报错TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only

Posted 2023-02-16 环岛公路

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)
)