【腾讯云Cloud Studio实战训练营】用Vue+Vite快速构建完成交互式3D小故事

以下是使用Vue和Vite创建一个简单的3D互动小故事的代码示例。这个示例使用了Three.js来创建3D场景，并且包含了基本的Vue组件结构。

首先，确保你已经安装了Node.js和npm。

1. 创建一个新的Vue项目：

npm init vue@latest

2. 在项目中安装Vite和Three.js：

npm install
npm install three

3. 在main.js中引入Three.js并设置场景：

import { Scene, PerspectiveCamera, WebGLRenderer } from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
const scene = new Scene();
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new WebGLRenderer();
const controls = new OrbitControls(camera, renderer.domElement);
 
camera.position.z = 5;
 
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate();

4. 创建一个Vue组件来管理3D对象：

<template>
  <div ref="threeContainer"></div>
</template>
 
<script>
import { Mesh, SphereGeometry, MeshBasicMaterial, PointLight } from 'three';
 
export default {
  mounted() {
    const container = this.$refs.threeContainer;
    const mesh = new Mesh(
      new SphereGeometry(1, 32, 32),
      new MeshBasicMaterial({ color: 0xffff00 })
    );
 
    scene.add(mesh);
    scene.add(new PointLight(0xffffff));
 
    camera.updateProjectionMatrix();
    renderer.render(scene, camera);
 
    container.appendChild(renderer.domElement);
    controls.update();
  }
}
</script>
 
<style>
/* 样式可以根据需要添加，确保Three.js创建的canvas全屏 */
html, body {
  margin: 0;
  height: 100%;
}
</style>

5. 在App.vue中引入你的3D组件：

<template>
  <ThreeDComponent />
</template>
 
<script>
import ThreeDComponent from './components/ThreeDComponent.vue';
 
export default {
  components: {
    ThreeDComponent
  }
}
</script>

6. 运行你的Vue项目：

npm run dev

这个简单的例子展示了如何在Vue应用中集成Three.js来创建一个基本的3D场景。你可以根据需要添加更多的3D对象、交互和故事元素。