html不正确加载，nuxt 3 on已登机

Question

我在实施NUXT 3和3J时遇到了麻烦。

<template>
  <div>
    <canvas ref="webgl" class="canvas"></canvas>
  </div>
</template>

<script setup>
import * as THREE from "three";

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
const webgl = ref(null);

var renderer;
onMounted(async () => {
  await nextTick();
  console.log();
  if (process.client) {
    const canvas = document.querySelector(".canvas");
    //const canvas = webgl.value; Silent error but does not work
    console.log(canvas);
    //Getting canvas element

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(32, 1, 0.1, 1000).translateZ(15);

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

    // Creating a renderer
    renderer.setClearColor(0x000000, 0);
    renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
    renderer.setPixelRatio(window.devicePixelRatio);

    // Avoid pixelation on resize
    window.onresize = () => {
      renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
    };

    // Creating loader for custom GLTF models
    const loader = new GLTFLoader();
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
    loader.setDRACOLoader(dracoLoader);

    const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.9);
    hemiLight.position.set(0, 0, 15);
    scene.add(hemiLight);

    let model;
    loader.load(
      // resource URL
      "/models/molecule.glb",
      // called when the resource is loaded
      function (gltf) {
        model = gltf.scene;
        model.position.set(0, -0.4, -1);
        if (model) model.rotation.x += 90;
        scene.add(model);
      },
      // called while loading is progressing
      function (xhr) {
        console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
      },
      // called when loading has errors
      function (error) {
        console.log("An error happened", error);
      }
    );
    let x = 0;

    // start the loop
    renderer.setAnimationLoop(() => {
      if (model) {
        // --- Simple Rotation Animation
        // model.rotation.y += 0.002;
        // if (model.rotation.y >= 360) model.rotation.y = 0;
        // if (model.rotation.z >= 0) model.rotation.z -= 0.002;
        // else if (model.rotation.z <= 0) model.rotation.z += 0.002;
        // else {
        //   model.rotation.z += 0.0002;
        // }
        // --- Floating Animation
        x = x + 2;
        model.position.y = Math.cos(x * 0.01) * 0.3;
        model.rotation.z = Math.sin(x * 0.01) * 0.2;
        model.rotation.x = Math.sin(x * 3.14 * 0.01) * 0.02 + 90;
      }
      renderer.render(scene, camera);
    });
  }
});

onUnmounted(() => {
  renderer.setAnimationLoop(null);
});
</script>

<style scoped>
.canvas {
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>

我使用此代码将3D模型加载到VUE组件中，该组件包装了HTML画布。然后将其动画并安装在页面上。

如果我正常加载页面，则所有内容都可以正常工作，并且显示了带有模型的动画。但是，如果我导航到另一个页面并返回（通过VUE/NUXT路由器），

我会收到以下错误：

好像HTML帆布根本不存在。即使我在安装组件后声明它……

我也尝试使用模板参考，但随后该模型没有加载，也没有错误。

哦，为了记录，我正在以SSR模式运行该应用程序。

如果您能帮助我，我将永远感激不尽。 提前致谢！