大家好，我是itboy。
作为一个开发者，当你看到一些炫酷的效果时，但没有找到一个简单明了的步骤或无从下手时，这篇文章就是写给你的。
开始之前：
确保你已经安装16.0或更高版本的Node.js，熟悉命令行，并了解Vue的基础知识，以及使用项目脚手架工具create-vue
我们的步骤：
- 创建一个Vue项目
- 安装依赖Three.js
- 为Three.js创建Vue组件
- 导入使用具有Three.js的组件
创建一个Vue项目:
npm init vue@latest
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示，如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。
进入新创建的文件夹：
cd my-project
安装依赖项：
npm install
npm run dev
- 如果一切正常，您可以导航到：
http://localhost:5173/你会看到一个vue应用程序
安装Three.js：
npm i three
为Three.js创建Vue组件：
在src下components文件夹中创建Three.vue组件，在创建的文件中复制以下代码。
我们在组件里做了什么？
- 导入Three.js
- 创建场景
- 初始化相机
- 初始化渲染器
- 使用ref作为Three.js场景的挂载点
- 初始化立方体模型
- 沿x/y轴旋转,实现运行动画
import * as THREE from "three";
import { onMounted, ref } from "vue";
let refContent = ref("null");
onMounted(() => {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// document.body.appendChild( renderer.domElement );
// 使用ref作为Three.js场景的挂载点，而不是document.body
refContent.value && refContent.value.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
});
导入使用具有Three.js的组件：
在打开文件：
/src/App.vue
导入您创建的组件，并在文件的顶部添加：
import Three from './Three';
在应用程序组件中使用您的组件：
<Three />
如果一切如预期，你应该在浏览器中看到以下内容：
感谢您的阅读
