UIから3Dオブジェクトの操作をできるように、もしくはシーンのヒエラルキーグラフを表示するために、VueのdataにObject3Dの参照を持たせると、レンダリングのFPSが激落ちしてしまいました。

結論

three.jsオブジェクトの参照をVueのdataなどで持ってはいけません。プリミティブな値をコピーするか、Object.sealなどを使って、変更不可にしてください。

原因考察

Vue v2のdataはオブジェクトの参照を持つと、変更をリアクティブに検知できるようにプロキシオブジェクトでラップします。このとき、すでに持っているプロパティは全てgetter/setter化され、プロパティの取得時は内部的にメソッドコールに変化します。そして、それは再起的に実行されます。

UI操作する上ではこれでも良いかもしれませんが、レンダリングの一連の作業は16ms以内に、ヒエラルキーを辿ってさまざまなプロパティを読み書きして描画に必要な情報を計算し、GPUの描画を終わらせる必要があります。プロパティ1つ1つの読み込みは軽微かもしれませんが、あらゆるプロパティが関数化されると、関数呼び出しのオーバヘッドが積もって描画速度がガタ落ちします。

また、Vueにリアクティブ化されたオブジェクトは、そのコンポーネントがアンマウントされた後も元には戻らないため、リロードするかヒエラルキーを再生成するまでずっと重いままになってしまいます。

3D系のデータをUIで持たせる時は、意図しないオリジナルのオブジェクト変更に気をつけましょう。