Vue + Three.js魔法：让3D模型在你的网页上舞动起来！

我不懂竞赛

于 2024-09-15 10:03:12 发布

阅读量1k

点赞数 26

分类专栏：职业院校技能竞赛-移动应用设计与开发文章标签： javascript vue.js 前端 3D渲染 WebGL 前端开发

本文链接：https://blog.csdn.net/Play_Sai/article/details/142280316

版权

职业院校技能竞赛-移动应用设计与开发专栏收录该内容

7 篇文章 1 订阅

订阅专栏

🌟 引言：开启你的3D网页冒险

你是否曾经梦想过在你的网页上展示栩栩如生的3D模型？想象一下，用户可以360度旋转查看你的产品，或者与复杂的3D场景互动。听起来很酷，对吧？好消息是，借助Vue.js和Three.js的强大组合，这一切都变得触手可及！

本文将带你step-by-step地探索如何将GLB格式的3D模型完美呈现在你的Vue项目中。无论你是3D渲染新手，还是寻找提升的老手，这里都有适合你的干货！

🛠️ 准备工作：搭建你的3D工作间

在开始编码之前，让我们确保所有工具都准备就绪：

安装Vue CLI（如果还没有的话）:
```
npm install -g @vue/cli
```

创建新的Vue项目:

vue create vue-threejs-3d
cd vue-threejs-3d

安装必要的依赖:
```
npm install three @types/three
```

💡 小贴士：使用Vue 3和组合式API可以让我们的代码更加简洁和易于管理！

🎨 步骤1：创建你的3D画布

首先，我们需要创建一个组件来容纳我们的3D场景。在src/components目录下创建一个新文件ThreeScene.vue：

<template>
  <div ref="sceneContainer" class="scene-container"></div>
</template>

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

const sceneContainer = ref(null);
let scene, camera, renderer, model;

// 初始化场景
const initScene = () => {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer();
  
  renderer.setSize(window.innerWidth, window.innerHeight);
  sceneContainer.value.appendChild(renderer.domElement);

  // 添加环境光
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);

  // 添加平行光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(0, 1, 0);
  scene.add(directionalLight);

  camera.position.z = 5;
};

// 加载GLB模型
const loadModel = () => {
  const loader = new GLTFLoader();
  loader.load(
    '/path/to/your/model.glb',
    (gltf) => {
      model = gltf.scene;
      scene.add(model);
    },
    (xhr) => {
      console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    (error) => {
      console.error('An error happened', error);
    }
  );
};

// 动画循环
const animate = () => {
  requestAnimationFrame(animate);
  
  if (model) {
    model.rotation.y += 0.01;
  }
  
  renderer.render(scene, camera);
};

onMounted(() => {
  initScene();
  loadModel();
  animate();
});

onUnmounted(() => {
  // 清理资源
  scene.remove(model);
  renderer.dispose();
});
</script>

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

🚀 步骤2：将3D场景集成到你的Vue应用中

现在，让我们在主应用中使用这个组件。修改你的App.vue文件：

<template>
  <div id="app">
    <h1>我的酷炫3D模型展示</h1>
    <ThreeScene />
  </div>
</template>

<script setup>
import ThreeScene from './components/ThreeScene.vue';
</script>

🌈 步骤3：添加交互性和特效

让我们为我们的3D场景添加一些交互性！我们可以添加轨道控制器让用户能够旋转和缩放模型：

首先，安装 three/examples/jsm/controls/OrbitControls:
```
npm install three/examples/jsm/controls/OrbitControls
```
然后，修改ThreeScene.vue：

<script setup>
// ... 前面的导入保持不变
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// ... 其他变量声明
let controls;

const initScene = () => {
  // ... 前面的代码保持不变
  
  // 添加轨道控制器
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true; // 添加阻尼效果
  controls.dampingFactor = 0.05;
};

const animate = () => {
  requestAnimationFrame(animate);
  
  controls.update(); // 更新控制器
  
  renderer.render(scene, camera);
};

// ... 其余代码保持不变
</script>

🎭 步骤4：优化性能和加载体验

为了提升用户体验，我们可以添加加载进度条和优化渲染性能：

添加加载进度条：

<template>
  <div>
    <div ref="sceneContainer" class="scene-container"></div>
    <div v-if="loading" class="loading-overlay">
      <div class="loading-bar" :style="{ width: `${loadingProgress}%` }"></div>
    </div>
  </div>
</template>

<script setup>
// ... 其他导入保持不变
import { ref } from 'vue';

const loading = ref(true);
const loadingProgress = ref(0);

const loadModel = () => {
  const loader = new GLTFLoader();
  loader.load(
    '/path/to/your/model.glb',
    (gltf) => {
      model = gltf.scene;
      scene.add(model);
      loading.value = false;
    },
    (xhr) => {
      loadingProgress.value = (xhr.loaded / xhr.total * 100);
    },
    (error) => {
      console.error('An error happened', error);
      loading.value = false;
    }
  );
};

// ... 其余代码保持不变
</script>

<style scoped>
/* ... 之前的样式保持不变 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #f0f0f0;
}
.loading-bar {
  height: 100%;
  background-color: #4caf50;
  transition: width 0.3s ease;
}
</style>

2.使用InstancedMesh来优化大量重复模型的渲染（如果适用）：

const createInstances = (geometry, material, count) => {
  const mesh = new THREE.InstancedMesh(geometry, material, count);
  
  for (let i = 0; i < count; i++) {
    const position = new THREE.Vector3(
      Math.random() * 10 - 5,
      Math.random() * 10 - 5,
      Math.random() * 10 - 5
    );
    const scale = Math.random() * 0.5 + 0.5;
    const rotation = Math.random() * Math.PI;
    
    const matrix = new THREE.Matrix4()
      .makeTranslation(position.x, position.y, position.z)
      .makeScale(scale, scale, scale)
      .makeRotationY(rotation);
    
    mesh.setMatrixAt(i, matrix);
  }
  
  return mesh;
};

// 在加载模型后使用
if (model) {
  const instancedMesh = createInstances(model.geometry, model.material, 1000);
  scene.add(instancedMesh);
}