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

    }

    }

  • 相关阅读:
    二、魔法函数
    Metaclasses
    一、python中的一切皆对象
    三、鸭子类型
    SQL进行排序、分组、统计的10个新技巧
    输入地址栏可以编辑页面的js
    项目开发中常用JS表单取值方法
    [导入]通用的分页存储过程
    107个常用Javascript语句
    [导入]事务处理
  • 原文地址:https://www.cnblogs.com/deerfig/p/6730784.html
Copyright © 2011-2022 走看看