目次

• modelViewMatrix is a read-only

modelViewMatrix is a read-only

Vue3でTHREE.jsを使っていたところ↓のようなエラーが出ました。

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 (expected '#<Matrix4>' but got '#<Matrix4>')

Vue2では動いてたプログラムがVue3にすると動かなくなりました。
どうもTHREE.jsのレンダラーのrender()でエラーが出ているようです。

ググってみると解決法を見つけました。
どうもVue3ではVue2と違う新しいリアクティブシステムを使っているらしくこれがTHREE.jsと相性が悪いようです。
THREE.jsに関わっているコードをVue3からリアクティブシステムから切り離すとこの問題は解決します。

具体的にはVue3のコンポーネントのdata()内のTHREE.jsに関わる変数を消して、変数をmounted()などで作成するという手法です。
今回のケースではTHREE.jsのコードはGameという独自クラス内で定義していました。
そしてdata()内に定義したgame変数にインスタンスを入れて使っていました。

具体的には↓のようにです。

    data () {
        return {
            game: new Game(),
        }
    },

これをやめてコードを↓のように変更しました。

    data () {
        return {
        }
    },
    mounted () {
        this.game = new Game()
    }

data()内でオブジェクトを定義するのをやめてmounted()でthisにオブジェクトを代入しています。

このようにするとエラーは出なくなりました。

data()に定義した変数はVue3の管理下に置かれるようなので実行時に変数を動的に作成してその管理下から逃れるという感じでしょうか。
なにはともあれ解決してよかったです。