你最近是不是被这个粒子手势圣诞树刷屏了?
这被科技拉满的仪式感,能手势交互、满是粒子的全息特效圣诞树,绝对让你在朋友圈脱颖而出!
操作超级简单,上梯子进官网gemini.google.com,没有梯子也行,结尾也打包了两套代码开箱即食。工具选择Canvas,然后输入提示词(prompt)等待Gemini帮你写代码就可以了。这个过程少不了要多battle几次才能得到自己想要的效果。
prompt:
请用Three.js给我做一个3D圣诞树效果,并且可以用手势进行交互。要求如下:
1.视觉风格要求:
几何堆叠:这棵树不要用发光粒子,而是要由大量的3D实体几何体组成。主要是球体(Spheres)和立方体(Cubes)混合在一起。
材质质感:物体表面要有金属光泽(PBR材质),看起来像金球和礼物盒,需要有光源照亮它们产生反光。颜色分布:
球体:主要是发光的土豪金色和红色。立方体:土豪金色和深绿色混合。
树顶:树的顶端有一个黄色的菱形/八面体作为装饰。
排版:页面顶部使用衬线体(SerifFont)居中显示"MERRY CHRISTMAS"。3D圣诞树效果需要有美感和艺术感,圣诞树需要有金色的光芒。
技术实现要求:
3.支持上传最多15张照片,照片作为圣诞树的装饰品随机分布在圣诞树周边。
4.手势可以对圣诞树进行交互,手掌张开圣诞树3D实体几何体向四周扩散并旋转,比OK手势展示当前转到的照片。再握拳3D实体几何体聚集拼成"MERRYCHRISTMAS"字样,再张开再聚集成圣诞树形态。
5.打开网站,自动播放关于圣诞节的背景音乐
为了性能,请务必使用THREE.InstancedMesh来渲染这些大量的几何体,否则浏览器会卡。让整棵树缓慢自转。
