效果图:
直面变弯曲核心代码:
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)