一、安装 Three.js 与 Vue.js
要创建 3D 场景，我们需要使用 Three.js 库。它是用于创建和呈现 3D 图像的 JavaScript 库。我们还需要使用 Vue.js，因为它提供了一些很好的方式来管理我们的应用程序状态。首先，在我们的项目中安装这两个库：
npm i three vue-threejs现在，我们可以创建我们的 Vue.js 组件来开始构建我们的场景。
二、创建 Three.js 场景和渲染器
要创建 Three.js 场景，我们需要使用下面的代码：
import { Scene, PerspectiveCamera, WebGLRenderer } from 'three';
export default {
name: 'ThreeRenderer',
data() {
return {
scene: null,
camera: null,
renderer: null,
width: null,
height: null,
};
},
mounted() {
this.init();
this.animate();
},
methods: {
init() {
const width = this.$el.clientWidth;
const height = this.$el.clientHeight;
const scene = new Scene();
const camera = new PerspectiveCamera(
75,
width / height,
0.1,
1000,
);
const renderer = new WebGLRenderer();
renderer.setSize(width, height);
this.$el.appendChild(renderer.domElement);
this.scene = scene;
this.camera = camera;
this.renderer = renderer;
this.width = width;
this.height = height;
},
animate() {
requestAnimationFrame(this.animate);
this.renderer.render(this.scene, this.camera);
},
},
};
这将创建一个 Three.js 场景、相机和渲染器，并将渲染器附加到 Vue.js 组件中的元素上。我们可以使用 animate 方法来确保每个帧都进行渲染。
三、添加 3D 模型
在场景中添加 3D 模型比较简单。我们只需要将模型文件下载到我们的项目中，然后使用 Three.js 的加载器来加载模型并将其添加到场景中：
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// ...
methods: {
// ...
loadModel() {
const loader = new GLTFLoader();
loader.load('/path/to/your/model.gltf', (gltf) => {
this.scene.add(gltf.scene);
});
},
},
mounted() {
// ...
this.loadModel();
},
在这个例子中，我们使用了 GLTFLoader 来加载 3D 模型。我们可以使用这个方法来加入新的内容到场景中。
四、使用 Three.js 来交互
要使用 Three.js 来处理用户输入和交互，我们可以将其添加到我们使用的事件监听器中：
mounted() {
// ...
this.$el.addEventListener('mousedown', this.onDocumentMouseDown);
},
methods: {
// ...
onDocumentMouseDown(event) {
event.preventDefault();
// 获取鼠标的x和y坐标
const mouse = new Vector2();
mouse.x = (event.clientX / this.width) * 2 - 1;
mouse.y = -(event.clientY / this.height) * 2 + 1;
// 射线计算
const raycaster = new Raycaster();
raycaster.setFromCamera(mouse, this.camera);
// 获取相交的对象
const intersects = raycaster.intersectObjects(this.scene.children);
// 处理相交的对象
if (intersects.length > 0) {
const object = intersects[0].object;
console.log(`Intersected ${object.name}`);
}
},
},
在这个例子中，我们使用了 Three.js 中的射线计算来确定场景中的哪个对象被用户点击。另外，我们还使用了事件监听器来处理在场景中的鼠标事件。
五、绑定 Vue.js 状态和 Three.js 属性
在我们的 Vue.js 应用程序中，我们可以使用 v-bind 指令来将 Vue.js 组件的状态绑定到 Three.js 属性。例如，我们可以使用下面的代码将相机的位置绑定到 Vue.js 组件的属性：
<template>
<div v-bind:style="{ 'height': '300px' }" v-on:resize="onResize"></div>
</template>
<script>
// ...
data() {
return {
// ...
camera: null,
};
},
methods: {
onResize() {
const width = this.$el.clientWidth;
const height = this.$el.clientHeight;
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
this.width = width;
this.height = height;
},
},
</script>
在这个例子中，我们将组件的大小绑定到视窗的大小。我们可以使用相同的模式来将其他属性绑定到 Vue.js 组件的状态上。
六、总结
在这篇文章中，我们学习了如何使用 Three.js 和 Vue.js 创建交互式的 3D 场景。我们了解到了如何创建场景、相机和渲染器，如何将 3D 模型添加到场景中，以及如何使用 Three.js 来监听用户交互。最后，我们还讨论了如何将 Vue.js 应用程序的状态绑定到 Three.js 属性。
