zoukankan      html  css  js  c++  java
  • 3D标签云

    一、圆的坐标表达式

    for(var i = 0;i < len;i++){

    degree = (2*(k+1)-1)/len - 1;
    a = Math.acos(degree);//这样取得弧度数生成的点在球体上式均匀分布的
    b = a*Math.sqrt(len*Math.PI);

    x = radiu * Math.sin(a) * Math.cos(b);
    y = radiu * Math.sin(a) * Math.sin(b);
    z = radiu * Math.cos(a);

    label_item[k].style.transform = "translateZ("+z+"px) translateX("+x+"px) translateY("+y+"px)";//设置x,y,z坐标

    }

    //x轴旋转

    //核心代码

     {

    y' = y*cos(θ) - z*sin(θ);

    z' = z*cos(θ) + y*sin(θ);

    }
    function rotateX(elements,degreeX){
    var label_item = elements;
    var degree = degreeX;
    // console.log(getSpeed())
    var cos = Math.cos(degree);
    var sin = Math.sin(degree);
    var x, y,z;
    for(var i = 0;i < label_item.length;i++){
    x = label_item[i].dataset.x;
    y = label_item[i].dataset.y;
    z = label_item[i].dataset.z;
    var y1 = y*cos - z*sin;
    var z1 = z*cos + y*sin;
    label_item[i].dataset.y = y1;
    label_item[i].dataset.z = z1;
    if(label_item[i].dataset.z < 0){
    label_item[i].style.opacity = '0.5';
    label_item[i].style.fontSize = '4px';
    }else{
    label_item[i].style.fontSize = '14px';
    }
    if(z > 0){
    label_item[i].style.opacity = "1";
    }else{
    label_item[i].style.opacity = "0.5";
    }
    label_item[i].style.transform = "translateZ("+z1+"px) translateX("+x+"px) translateY("+y1+"px) rotateX(0deg)";

    }
    }

    //y轴旋转

    //核心代码

    {

    x' = x*cos(θ) - z*sin(θ);

    z' = z*cos(θ) + x*sin(θ);

    }
    function rotateY(elements,degreeY){
    var label_item = elements;
    var degree = degreeY;
    var cos = Math.cos(degree);
    var sin = Math.sin(degree);
    var x, y,z;
    for(var i = 0;i < label_item.length;i++){
    x = label_item[i].dataset.x;
    y = label_item[i].dataset.y;
    z = label_item[i].dataset.z;
    var x1 = x*cos - z*sin;
    var z1 = z*cos + x*sin;
    label_item[i].dataset.x = x1;
    label_item[i].dataset.z = z1;
    if(label_item[i].dataset.z < 0){
    label_item[i].style.opacity = '0.5';
    label_item[i].style.fontSize = '4px';
    }else{
    label_item[i].style.fontSize = '14px';
    }
    if(z > 0){
    label_item[i].style.opacity = "1";
    }else{
    label_item[i].style.opacity = "0.5";
    }
    label_item[i].style.transform = "translateZ("+z1+"px) translateX("+x1+"px) translateY("+y+"px) rotateX(0deg)";

    }

    }

  • 相关阅读:
    [Linux] Linux文件系统目录描述简介
    面试题07 二叉树两节点的最低公共祖先 [树]
    [C++] Stack / queue / priority_queue
    c#中byte[]和string的转换
    smartassembly 使用方法
    关于 Expression Blend 4安装是出现的“意见安排重启您的计算机”的解决方法
    php图片压缩
    我的dota之路
    OO系统设计师之路设计模型系列(1)软件架构和软件框架[从老博客搬家至此]
    const用法详解
  • 原文地址:https://www.cnblogs.com/deerfig/p/6730784.html
Copyright © 2011-2022 走看看