更新记录

v1.0.0（2026-01-12）

实现3D翻书效果

平台兼容性

uni-app(4.83)

UniApp 3D 仿真翻页组件 (Three.js 版)

基于 Three.js 和 createScopedThreejs 实现的高性能仿真翻页组件。专为小程序 WebGL 环境深度优化，解决了响应式数据序列化带来的崩溃问题。

🚀 功能特性

• 仿真卷曲算法：基于顶点着色器 (Vertex Shader) 实现的数学仿真卷曲，支持多向触发。
• 性能优化：
  • DPR 限制：智能封顶像素比，防止中低端机型 GPU 过热卡顿。
  • 内存管理：自动销毁 WebGL 资源（Geometry, Material, Texture），确保长久运行不闪退。
  • 非响应式设计：Three.js 复杂对象脱离 Vue 追踪，彻底杜绝 JSON.stringify 报错。
• UI 封装：内置毛玻璃质感页码指示器及现代感交互按钮。

📦 安装说明

1. 环境准备：确保项目中有微信官方提供的 Three.js 适配库，建议存放在 @/components/common/threejs.js。
2. 组件引入：将 three-flip-book.vue 放置于组件目录。

🛠 API 说明

Props (属性)

Events (事件)

Methods (通过 ref 调用)

🚀 快速上手示例

<template>
  <view>
    <three-flip-book ref="flipBook" :pages="imageList" @change="onPageChange" />
  </view>
</template>

<script>
import ThreeFlipBook from '@/components/three-flip-book/three-flip-book.vue'

export default {
  components: { ThreeFlipBook },
  data() {
    return {
      imageList: [
        '[https://example.com/1.jpg](https://example.com/1.jpg)',
        '[https://example.com/2.jpg](https://example.com/2.jpg)',
        '[https://example.com/3.jpg](https://example.com/3.jpg)'
      ]
    }
  },
  methods: {
    onPageChange(index) {
      console.log('当前页面已切换至索引:', index)
    }
  }
}
</script>