当前位置：首页 > article >正文

vue引入三维模型

article 2024/11/16 18:30:30

vue引入三维模型

1. 安装 Three.js

2. 创建一个 Vue 组件来加载 3D 模型

3. 加载三维模型

4. 调整布局和模型

🎈边走、边悟🎈迟早会好

在 Vue 3 中引入三维模型，通常可以借助 Three.js 这一 3D 渲染库。Three.js 提供了方便的 API 来加载、显示和操作 3D 模型。下面是一个在 Vue 3 中引入 Three.js 并加载 3D 模型的基本步骤。

1. 安装 Three.js

首先，确保在项目中安装了 three 依赖：

npm install three

2. 创建一个 Vue 组件来加载 3D 模型

接下来，创建一个 Vue 组件，比如 ThreeModel.vue，并在其中引入 Three.js。

<template>
  <div ref="container" class="three-container"></div>
</template>

<script>
import * as THREE from 'three';

export default {
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      // 获取容器
      const container = this.$refs.container;

      // 创建场景
      const scene = new THREE.Scene();

      // 创建相机
      const camera = new THREE.PerspectiveCamera(
        75,
        container.clientWidth / container.clientHeight,
        0.1,
        1000
      );
      camera.position.z = 5;

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(renderer.domElement);

      // 添加一个简单的立方体
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      // 动画循环
      const animate = () => {
        requestAnimationFrame(animate);

        // 旋转立方体
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      };
      animate();
    },
  },
};
</script>

<style scoped>
.three-container {
  width: 100%;
  height: 100%;
}
</style>

3. 加载三维模型

Three.js 支持多种 3D 模型格式（如 .obj、.gltf、.fbx 等）。通常使用 GLTFLoader 或其他加载器来加载这些模型。以 GLTFLoader 为例，首先需要安装 GLTFLoader：

npm install three/examples/jsm/loaders/GLTFLoader

然后在组件中加载模型：

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

export default {
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      const container = this.$refs.container;

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        container.clientWidth / container.clientHeight,
        0.1,
        1000
      );
      camera.position.z = 5;

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(renderer.domElement);

      // 加载 3D 模型
      const loader = new GLTFLoader();
      loader.load('/path/to/your/model.gltf', (gltf) => {
        scene.add(gltf.scene);
      });

      const animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };
      animate();
    },
  },
};
</script>