html5 处理图片问题，如何 [扭曲] 一个图片？

[tanranran]

求助大佬，要实现一个产品展示的功能，假如原始图片如图所示：

现在给一张图片过来，怎么把图片做成包围杯子的效果？如图所示

[Aoang]

…这是扭曲？………

css 图层叠加应该可以做到。
js 也行。
html 做不到，起码 html5 不行。甚至，html10 也不行…

[tanranran]

@Aoang 谢谢大佬回复,css 图层叠加可以做到,但是杯子的边缘不好处理啊,目前想到的解决方案是 three.js,但是学习成本太高...所以,想到 V2 咨询下大佬们的意见.

[dixeran]

webgl 这个方向吧，css 能扭曲的样式不多

[WildCat]

实在不行 web assembly 😅

[tanranran]

@WildCat web assembly,太高端了,感觉最靠谱的还是 three.js

[tanranran]

@dixeran 是的,目前来看 webgl 感觉最合适了.three.js

[MinonHeart]

这个还是 PS 生成两个图层实在

[MinonHeart]

用 webgl 底图要是渲染出来的模型可以，一张图的话估计不行

[tanranran]

@MinonHeart 两个图层是一定的