vue3dLoader 旋转模型 vue2和vue3 html+js代码

以下是使用 vue3dLoader 在 Vue 2 和 Vue 3 中旋转模型的 HTML 和 JavaScript 代码示例：

Vue 2：

<template>
  <div>
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default {
  mounted() {
    const canvas = document.getElementById('canvas');

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000);
    camera.position.set(0, 0, 5);

    const renderer = new THREE.WebGLRenderer({
      antialias: true,
      canvas,
    });
    renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);

    const controls = new OrbitControls(camera, renderer.domElement);

    const loader = new GLTFLoader();
    loader.load('/path/to/model.gltf', (gltf) => {
      const model = gltf.scene;
      scene.add(model);

      function animate() {
        requestAnimationFrame(animate);

        model.rotation.y += 0.01;

        renderer.render(scene, camera);
      }

      animate();
    });
  },
};
</script>

Vue 3：

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

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { onMounted, ref } from 'vue';

export default {
  setup() {
    const canvasRef = ref(null);

    onMounted(() => {
      const canvas = canvasRef.value;

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000);
      camera.position.set(0, 0, 5);

      const renderer = new THREE.WebGLRenderer({
        antialias: true,
        canvas,
      });
      renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);

      const controls = new OrbitControls(camera, renderer.domElement);

      const loader = new GLTFLoader();
      loader.load('/path/to/model.gltf', (gltf) => {
        const model = gltf.scene;
        scene.add(model);

        function animate() {
          requestAnimationFrame(animate);

          model.rotation.y += 0.01;

          renderer.render(scene, camera);
        }

        animate();
      });
    });

    return {
      canvasRef,
    };
  },
};
</script>

请注意，这些示例代码仅旋转模型并不是完整的三维场景。如果需要更复杂的场景，还需要添加光源、阴影等。