vue引入三维模型

2025/11/11 16:24:24 来源：https://blog.csdn.net/weixin_64296810/article/details/142215839 浏览: 次关键词：vue引入三维模型

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>