Three.js 3d 轮播图，圆形轨迹

最新推荐文章于 2025-11-30 11:31:44 发布

原创最新推荐文章于 2025-11-30 11:31:44 发布 · 2.9k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#threejs #3d #轮播图

Three.js 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了使用Three.js实现3D轮播图中直面到曲面的几何转换方法，以及利用时间变量控制物体旋转的动画效果。通过核心代码片段展示如何计算顶点位置变化，实现从矩形到弯曲形状的转变，并运用数学函数控制物体沿特定轨迹旋转。

效果图：

gif

直面变弯曲核心代码：

    geometry = new THREE.BoxGeometry(100, 100, 5, 600, 1);
		//  需要长：280，高300 平分6分，60度，中间有间隙取50度，通过公式，为L=n× π× r/180，L=α× r。其中n是圆心角度数，r是半径，L是圆心角弧长得 r=320,n=50,弧度=280，
			geometry.vertices.forEach(function(item) {
				item.z += Math.sqrt(120*120 - item.x * item.x) - 120;
			});

旋转核心代码：

	function render() {
				if(timerStop==false){
					var t2 = ( Date.now() /1000 );
					var t=(t2-t1)+offsetT;
					var tt=Math.PI*2/360*t
					var c=360/timeRunAll;
					group.rotation.y = 	-tt*c
					timeStopNum++;
					if(parseInt(360/timeRunAll*t)%anglePartOne==0&&timeStopNum>10){
						timerStop=true;
						offsetT=t;
						setTimeout(function () {
							timerStop=false;
							timeStopNum=0;
							t1=(Date.now() /1000)
						},timeStay)
					}
				}
				renderer.render(scene, camera);
			}

gitee 源码地址：threejs-Image-loader-transition: 3d 轮播图，圆形轨迹 (gitee.com)

下载后本地启动需要启服务参考这个：VScode怎么开启本地服务器及本地调试？ - 简书 (jianshu.com)