`three.js` 实现 3D 卡片的水平旋转效果

wsl394049743

于 2024-08-10 23:00:07 发布

阅读量797

点赞数 19

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/wsl3465205046/article/details/141097996

版权

在 Vue 3 中使用 three.js 实现 3D 卡片的水平旋转效果涉及多个步骤，包括设置 three.js 环境、创建卡片模型、实现旋转效果和与 Vue 组件集成。以下是一个详细的实现步骤和示例代码：

1. 项目设置

首先，确保你已经在 Vue 3 项目中安装了 three.js。你可以使用以下命令安装它：

npm install three

2. 创建 Vue 组件

在你的 Vue 3 项目中，创建一个 Vue 组件来包含 three.js 逻辑。假设你创建一个名为 ThreeCard.vue 的组件。

2.1 创建 `ThreeCard.vue` 文件

<template>
  <div ref="container" class="three-container"></div>
</template>

<script>
import * as THREE from 'three';
import { onMounted, onBeforeUnmount, ref } from 'vue';

export default {
  name: 'ThreeCard',
  setup() {
    const container = ref(null);
    let scene, camera, renderer, cardMesh, clock;

    // Initialize the scene
    const init = () => {
      // Create the scene
      scene = new THREE.Scene();

      // Create and position the camera
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

      // Create the renderer and add it to the container
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      container.value.appendChild(renderer.domElement);

      // Create a card geometry and material
      const geometry = new THREE.PlaneGeometry(2, 3);
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
      cardMesh = new THREE.Mesh(geometry, material);
      scene.add(cardMesh);

      // Initialize the clock
      clock = new THREE.Clock();

      // Handle window resize
      window.addEventListener('resize', onWindowResize);

      // Start the animation loop
      animate();
    };

    // Handle window resize
    const onWindowResize = () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    };

    // Animation loop
    const animate = () => {
      requestAnimationFrame(animate);

      // Rotate the card horizontally
      const delta = clock.getDelta();
      cardMesh.rotation.y += delta * 0.5; // Adjust the rotation speed as needed

      renderer.render(scene, camera);
    };

    // Cleanup on unmount
    onBeforeUnmount(() => {
      if (renderer) {
        renderer.dispose();
      }
      window.removeEventListener('resize', onWindowResize);
    });

    // Initialize when the component is mounted
    onMounted(() => {
      init();
    });

    return {
      container,
    };
  },
};
</script>

<style scoped>
.three-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>

3. 解释代码

初始化:
- scene: 创建一个 THREE.Scene 实例。
- camera: 创建一个 THREE.PerspectiveCamera 实例并设置其位置。
- renderer: 创建一个 THREE.WebGLRenderer 实例并将其附加到组件的 container 元素中。
创建卡片:
- geometry: 使用 THREE.PlaneGeometry 创建一个平面几何体，表示卡片。
- material: 使用 THREE.MeshBasicMaterial 创建一个基本的材质，并将其应用于卡片。
- cardMesh: 创建一个 THREE.Mesh 实例，将几何体和材质结合，并将其添加到场景中。
动画循环:
- animate: 使用 requestAnimationFrame 创建一个动画循环。每帧更新 cardMesh 的水平旋转角度。
事件处理:
- onWindowResize: 处理窗口大小变化，确保渲染器和相机适配新窗口大小。
清理:
- onBeforeUnmount: 组件卸载前清理事件监听和渲染器。

4. 在 Vue 应用中使用组件

在你的主应用组件或其他组件中引入和使用 ThreeCard.vue：

<template>
  <div id="app">
    <ThreeCard />
  </div>
</template>

<script>
import ThreeCard from './components/ThreeCard.vue';

export default {
  name: 'App',
  components: {
    ThreeCard,
  },
};
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  margin-top: 60px;
}
</style>

总结

通过以上步骤，你可以在 Vue 3 中使用 three.js 实现一个简单的 3D 卡片水平旋转效果。你可以根据需要调整旋转速度、卡片尺寸和颜色等参数，或者进一步扩展功能，比如添加更多的交互或动态效果。在 Vue 3 中使用 three.js 实现 3D 卡片的水平旋转效果涉及多个步骤，包括设置 three.js 环境、创建卡片模型、实现旋转效果和与 Vue 组件集成。以下是一个详细的实现步骤和示例代码：