three.js学习-曲面展示列表_threejs曲面

最近接到一个比较奇怪的需求，需要在浏览器中以3D曲面的形式展示商品图片，并且图片的大小存在两种规格，大图的宽高皆为小图的两倍，而且大图的位置随机，类似于下图：

尝试过各种方案，踩了各种坑之后，发现只有three.js比较符合需求，最终效果如下：

在线预览地址(服务器小水管，偶尔会连不上，多刷新几次)。

github: PersonalWebsite/curvedSurface.vue at main · onefantasy/PersonalWebsite (github.com)

目录

0. 技术栈
1. 需求分析
2. 页面初始化
3. three.js初始化
4. 计算坐标
5. 图片与坐标对应

技术栈

vue3 + three.js + Tailwindcss + Mock.js

需求分析

难点在于要使列表元素弯曲，单纯的使用css比较难以实现，至少本人没有找到什么好方案。

如果换一个思路去思考，我们只需要让其看上去弯曲就行，不需要真的让列表元素弯曲，利用一点障眼法，也能达到差不多的效果。

这里借鉴了定积分的基本思想，只需要让每一列的商品图片都按照一定的角度弯曲，那么整体看上去就像是一个曲面；列数越多，弯曲的角度越小，那么就越接近一个曲面；列数趋近于无限，角度趋近于无限小，那么最终结果就无限趋近于一个曲面。

然而在实际开发中，不可能真的趋近于无限，所以取一个差不多的列数即可。

页面初始化

先初始化页面，包括获取数据。

1. 创建html容器，大小需要先规定好，因为后续计算坐标需要用到容器的宽高，需要充满页面的话，可以直接设置成width:100vw;height:100vh;。

<div
  ref="container"
  class="relative h-full w-full"
 />
1
2
3