收藏
回答

3D云词图旋转如何控制旋转方向呢?

我做了一个圆形的3d云此词图,通过滑动屏幕控制云此图的旋转速度,现在不知道如何写来控制旋转方向,求一个大佬看看我的代码,教我怎么通过滑动方向来控制旋转方向
 initfunction() {
    var tagEle = [
    ]
    var arr = this.data.roast_list
    for(var index in arr){
      tagEle.push({
        title: arr[index].body,
        x0,
        y0,
        z0,
        s0,
        o1,
        f15,
        angleX0,
        angleY0
      })
    }
    for (var i = 0; i < tagEle.length; i++) {
      var fallLength = 100 //圆的焦点
     
      var k = (2 * (i + 1) - 1) / tagEle.length - 1;
      //计算按圆形旋转
      var a = Math.acos(k);
      var b = a * Math.sqrt(tagEle.length * Math.PI);
      //计算元素x,y坐标
      var numx = 120 * Math.sin(a) * Math.cos(b)
      var numy = 120 * Math.sin(a) * Math.sin(b);
      var numz = 220 * Math.cos(a);
 
      // console.log(numo)
      //计算元素缩放大小
      tagEle[i].x = numx * 2
      tagEle[i].y = numy * 2
      tagEle[i].z = numz
      tagEle[i].s = 350 / (400 - tagEle[i].z)
    }
//动画
var interBoolean = true;
    this.setData({
      timer:setInterval(() => {
        if(interBoolean == true){


          interBoolean = false
      for (var i = 0; i < tagEle.length; i++) {
        tagEle[i].s = 350 / (400 - tagEle[i].z)//字体大小
        var cos = Math.cos(angleX);//返回余弦值
        var sin = Math.sin(angleX);//返回正弦值
        var y1 = tagEle[i].y * cos - tagEle[i].z * sin;
        var z1 = tagEle[i].z * cos + tagEle[i].y * sin;
        tagEle[i].y = y1;
        tagEle[i].z = z1;
 
        var cos = Math.cos(angleY);//返回余弦值
        var sin = Math.sin(angleY);//返回正弦值
        var x1 = tagEle[i].x * cos - tagEle[i].z * sin;
        var z1 = tagEle[i].z * cos + tagEle[i].x * sin;
        tagEle[i].x = x1;
        tagEle[i].z = z1;   
      }
      this.setData({
        tagEle: tagEle
      })
      interBoolean = true
    }
    }, 25)
  })
  },
回答关注问题邀请回答
收藏

2 个回答

  • 卢霄霄
    卢霄霄
    发表于小程序端
    2021-04-01

    可以写个代码片段的话,我明早可以帮你看

    2021-04-01
    有用 1
    回复 6
    • z范凯
      z范凯
      2021-04-02
      https://developers.weixin.qq.com/s/153Y9gmy7tp5
      2021-04-02
      回复
    • 卢霄霄
      卢霄霄
      2021-04-02回复z范凯
      我下午请假了 来不及细调了,看了下你的代码,应该有个direction参数来表示滑动方向。
      fristclientX 和 fristclientY 先不要取绝对值
      fristclientX大于0,是右;小于0,是左。
      fristclientY大于0,是下;小于0,是上。
      组合起来就是8个方向。
      然后根据方向不同,计算 x y z的公式也是不一样的,
      比如你现在是默认方向是 左上,那么 line: 151 152 158 159的参数就是 angleX和angleY。那么对应的右下放下公式就是把 angleX和angleY直接改成 -angleX和-angleY。四个方向的正负号各有区别,自己摸索下吧。
      更精确的方向需要根据具体的direction值来计算angleX和angleY的值
      2021-04-02
      1
      回复
    • 卢霄霄
      卢霄霄
      2021-04-02回复z范凯
      实在不会的话 我周一回来了帮你写吧
      2021-04-02
      回复
    • z范凯
      z范凯
      2021-04-02回复卢霄霄
      好嘞,我这就去调试
      2021-04-02
      回复
    • z范凯
      z范凯
      2021-04-02回复卢霄霄
      https://developers.weixin.qq.com/s/vugffgmG70pX 完成了,fristclientX和fristclientY我本来是打算控制滚动速度了,我自己都没想到这个居然能控制滚动方向—调出来 不过懵懵的
      2021-04-02
      回复
    查看更多(1)
  • z范凯
    z范凯
    2021-04-01

    2021-04-01
    有用 1
    回复 5
    • z范凯
      z范凯
      2021-04-01
      一个球体在转动的,想通过滑动来控制方向,遇上难题了
      2021-04-01
      回复
    • z范凯
      z范凯
      2021-04-01回复z范凯
      touchStart:function(event){
          fristclientX = event.changedTouches[0].clientX;
          fristclientY = event.changedTouches[0].clientY;
          fristtime = new Date().getTime();
        },
        touchEnd:function(event){
          var time = new Date().getTime() - fristtime;
          fristclientX = Math.abs(event.changedTouches[0].clientX - fristclientX);
          fristclientY = Math.abs(event.changedTouches[0].clientY - fristclientY);
          if(time == 0){
            time = 100
          }
          if(fristclientX > fristclientY){
            angleY = fristclientX/time * 0.1
            angleX = fristclientX/time * 0.1
          }else{
            angleY = fristclientY/time * 0.1
            angleX = fristclientY/time * 0.1
          }
         // tagEle
        },
      这是控制转动速度的代码
      2021-04-01
      回复
    • z范凯
      z范凯
      2021-04-01回复z范凯
      2021-04-01
      回复
    • z范凯
      z范凯
      2021-04-01回复z范凯
      这是页面代码
      2021-04-01
      回复
    • z范凯
      z范凯
      2021-04-02回复z范凯
      代码片段-https://developers.weixin.qq.com/s/153Y9gmy7tp5
      2021-04-02
      回复
登录 后发表内容
问题标签