很高兴为您介绍一个基于
Vue 3和Three.js的
项目实例。
这个
项目是一个可视化的3D
项目，使用了
Vue 3和Three.js来实现。它包含了一些常用的功能，如场景、灯光、摄像机初始化，模型和天空盒的加载，以及鼠标点击和悬浮的事件交互。
您可以在以下链接中预览这个
项目：[
项目预览地址](https://stevenfeng.cn/threejs-
demo/)
在这个
项目中，主要使用了
Vue 3的组件化开发方式来封装Three.js的API。其中，场景的初始化和渲染使用了一个名为`Viewer`的组件。这个组件包含了一些基础功能，如场景的创建、灯光的添加、摄像机的初始化等。
以下是一个简单的示例代码，展示了如何在
Vue 3中使用Three.js来创建一个场景：
```
vue
<template>
<div ref="container"></div>
</template>
<script>
import { ref, onMounted } from '
vue';
import * as THREE from 'three';
export default {
name: 'Viewer',
setup() {
const container = ref(null);
let scene, camera, renderer;
onMounted(() => {
// 创建场景
scene = new THREE.Scene();
// 创建相机
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
container.value.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);
// 渲染场景
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
});
return {
container,
};
},
};
</script>
<style>
#container {
width: 100%;
height: 100%;
}
</style>
```
这个示例代码创建了一个名为`Viewer`的
Vue组件，它在页面上渲染一个包含一个立方体的Three.js场景。在`setup`函数中，我们使用了
Vue 3的`ref`和`onMounted`来获取DOM元素的引用和在组件挂载后执行的回调函数。
在回调函数中，我们创建了一个Three.js的场景、相机和渲染器，并将渲染器的输出添加到组件的DOM元素中。然后，我们创建了一个立方体，并将其添加到场景中。最后，我们使用`requestAnimationFrame`来实现动画效果，不断更新立方体的旋转角度并渲染场景。
这只是一个简单的示例，实际的
项目中可能会涉及更多的功能和复杂的场景。您可以根据自己的需求来扩展和修改这个示例。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
370
