vue项目中 预览lottie动画、3D模型

1.预览lottie动画
安装：npm i lottie-web
html:<div id="canvas"></div>
主要代码：

if (this.lot) {
        this.lot["destroy"]();//销毁lottie
      }
      this.lot = lottie.loadAnimation({
          container: document.getElementById("canvas"),
          renderer: "svg",
          loop: true,
          autoplay: false,
          // animationData: animationJsonData,
          path: row.url
        });
        // 开始播放动画
        this.lot.play();

2.预览glb模型
安装：npm install three@0.122.0注意版本，模型全黑或全白，可能是版本问题
html:<div id="canvas"></div>

    //生成场景
      const scene = new THREE.Scene();
      //设置相机
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.x = 2;
      camera.position.y = 0;
      camera.position.z = 2;
      //设置渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(200, 120);
      //把背景的颜色设置为白色，否则会看不到模型。
      renderer.setClearColor(0xa0a0a0);
      document.getElementById('canvas').appendChild(renderer.domElement);
      const loader = new GLTFLoader();

      loader.load(
        url,
        (gltf) => {
          const model = gltf.scene;
          gltf.scene.traverse(function (child) {
            if (child.isMesh) {
              child.material.emissive = child.material.color; 
              child.material.emissiveMap = child.material.map;
            }
          })
          model.position.set(0, 0, 0);
          model.scale.set(0.1, 0.1, 0.1);
          scene.add(model);
        },
        //加载过程调用
        undefined,
        //加载错误时调用
        undefined,
        (error) => {
          console.error("An error occurred while loading the model:", error);
        }
      );
      const controls = new OrbitControls(camera, renderer.domElement);
      controls.update();
      //键盘控制相机移动
      function animate() {
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
        controls.update();
      }
      //开始动画
      animate()