vue3.0 three.js项目实例

很高兴为您介绍一个基于Vue 3和Three.js的项目实例。

这个项目是一个可视化的3D项目，使用了Vue 3和Three.js来实现。它包含了一些常用的功能，如场景、灯光、摄像机初始化，模型和天空盒的加载，以及鼠标点击和悬浮的事件交互。

您可以在以下链接中预览这个项目：[项目预览地址](https://stevenfeng.cn/threejs-demo/)

在这个项目中，主要使用了Vue 3的组件化开发方式来封装Three.js的API。其中，场景的初始化和渲染使用了一个名为`Viewer`的组件。这个组件包含了一些基础功能，如场景的创建、灯光的添加、摄像机的初始化等。

以下是一个简单的示例代码，展示了如何在Vue 3中使用Three.js来创建一个场景：

<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`来实现动画效果，不断更新立方体的旋转角度并渲染场景。

这只是一个简单的示例，实际的项目中可能会涉及更多的功能和复杂的场景。您可以根据自己的需求来扩展和修改这个示例。