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

    }

    }

  • 相关阅读:
    HTTP状态码详解
    phpcms v9调用多个栏目下文章的方法
    纯CSS3制作学生入学档案表单样式代码
    phpcmsv9 标题颜色显示问题
    Excel中利用IF和TIME函数计算出上下班状态!
    excel if判断时间段早晚班
    PHPCMS列表页伪静态
    EXCEL IF 函数 模糊查询
    如何用js实现截取一个字符串中的数字
    Elasticsearch学习之基本核心概念
  • 原文地址:https://www.cnblogs.com/deerfig/p/6730784.html
Copyright © 2011-2022 走看看