【Three.js在vue3中运行报错:‘get‘ on proxy: property ‘modelViewMatrix‘ is a read-only...

解决方法:定义全局变量,变量不可定义在vue2的data,vue3的reactive中

  const camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000)
  const scene = new THREE.Scene()
  const geometry = new THREE.BufferGeometry()
  const material = new THREE.ShaderMaterial({
    uniforms: {
      color: { value: new THREE.Color(color) },
    },
    vertexShader: `
          attribute float scale;
          void main() {
            vec4 mvPosition = modelViewMatrix * vec4( position, 2.0 );
            gl_PointSize = scale * ( 300.0 / - mvPosition.z );
            gl_Position = projectionMatrix * mvPosition;
          }
        `,
    fragmentShader: `
          uniform vec3 color;
          void main() {
            if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;
            gl_FragColor = vec4( color, 1.0 );
          }
        `,
  })
  const particles = new THREE.Points(geometry, material)

  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })

• 引入成功