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);
			}

 

發佈了46 篇原創文章 · 獲贊 44 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章