JavaScript 3D, Cube,3D 立方体

最新推荐文章于 2023-03-18 07:30:23 发布
最新推荐文章于 2023-03-18 07:30:23 发布
阅读量117 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/NONE/archive/2009/11/03/JavaScript3DCube.html
版权

这两天忙着做了一个JavaScript3D效果，完全原创!和老外的差远了！没有借鉴任何人代码!有提供源代码下载，

转载请说明出处!: http://MacFig.com 备案中 请访问 ChangeNow.cn 
没有像以前那样写很多可控参数，为了兼容性好,没有用线连接点！(好麻烦！哈哈！不过自己是可以改的！)
JavaScript3DCube原创代码下载(修正无Bug 版):http://files.cnblogs.com/NONE/JavaScript3DCube.rar
玩法:按住鼠标随便移动！
微调:按W S A D键！
注意:请使用内核为IE7以上版本(IE性能太差,或不支持Json)，或火狐,Saferi,Opera,Chrome！！！！！！否者无法观看 2010 say:其实不是不支持，是那时我技术差，是都可以支持的
(内有一Bug 正在查原因,我的老版本没有，这里的有，希望有人告诉我怎么回事,我的方法很笨,希望得到高手指点!谢谢!)BUG 已修正！！！！
我还有一个特效是12超动感按钮，哪天我有空发上来，到时来看哦！
----------------下一作品3D曲面积分模型!Maybe long time!----------------













L
L
作
H
世
界
平
和


这是代码，不看也罢，有下载！

Code
function GEBI(O)
{
return document.getElementById(O);    
}
 ///定义单层
  
       var YSO=[];
         YSO[0]=
        {
          CxZ:400,
          CyY:90, 
          CzX:90,
          R:55,
        }
//
///定义层

    /////初始化第一层
    
   var XSO=[];
   XSO[0]=
    {
         OOA:270,//初始化第一层夹角 
         IPP:[[45,0,0,0,0],[135,0,0,0,0],[225,0,0,0,0],[315,0,0,0,0]],//内部偏移角,X轴坐标,Y轴坐标,Z轴:zIndex
        
         R:100,
         Cx:YSO[0].CzX,
         Cy:0,
         Cz:0,
        
    }
    /////初始化第二层夹角
      XSO[1]=
    {
         OOA:90,//初始化第二层夹角
         IPP:[[315,0,0,0,0],[225,0,0,0,0],[135,0,0,0,0],[45,0,0,0,0]],//与相反层，角对称相反内部偏移角
         R:100,
         Cx:YSO[0].CzX,
         Cy:0,
         Cz:0,
    }
    //..
///旋转分析
var mouse=
{
    nX:0,
    nY:0,
    aA:0,
    oX:0,
    oY:0,
    dX:-1,
    dY:-1,
}
var kN=0;
document.onkeydown=function (e)
{
    e=e||window.event;    
    kN=e.keyCode;    
   s();
   kN=-1;
}/**/
document.onmousedown=function(e)
{
                     e=e||window.event;    
                    mouse.oX=e.clientX||e.x;
                    mouse.oY=e.clientY||e.y;
                    mouse.aA=1;
}
document.onmouseup=function()
{
               mouse.aA=0;    
                
}
document.onmousemove=function(e)
            {
                if(mouse.aA==1)
                {    
                    e=e||window.event;                
                    mouse.nX=e.clientX||e.x;
                    mouse.nY=e.clientY||e.y;
    if(mouse.nX>mouse.oX)
    {
       mouse.dX=1;
    }
    else if(mouse.nX<mouse.oX)
    {
        mouse.dX=0;
    }
    if(mouse.nY>mouse.oY)
    {
       mouse.dY=1;
    }
    else if(mouse.nY<mouse.oY)
    {
      mouse.dY=0;
    }
    
    s();
    
    
    mouse.dX=-1;
    mouse.dY=-1;
    mouse.oX=mouse.nX;
    mouse.oY=mouse.nY;
                }
    
            }
            
            function s()
            {
            mA();
            gAC();
            c();
            iACP();    
            }
//角度修正
function mA()
{
    ///修正第一层夹角
    if(mouse.dY==1||kN==38)
    {
        XSO[0].OOA+=0.9999;
        XSO[1].OOA+=0.9999;
        
    }
    else if(mouse.dY==0||kN==40)
    {
        XSO[0].OOA-=0.9999;
        XSO[1].OOA-=0.9999;
    }
        XSO[0].OOA=XSO[0].OOA%360+360;
        XSO[1].OOA=XSO[1].OOA%360+360;
    ///修正第二层夹角
    if(mouse.dX==1||kN==39)
    {        
    
      lC(0,1);
    
      lC(1,1);
    }
    else if(mouse.dX==0||kN==37)
    {
        
       lC(0,0);
    
       lC(1,0);
    }
}

function lC(X,D)
{
    for(var IPNo in XSO[X].IPP)
            {
                if(D==1)
                {
                    if(X==0)
                    {
                         XSO[X].IPP[IPNo][0]-=1;
                    }
                    else if(X==1)
                    {
                        XSO[X].IPP[IPNo][0]+=1;
                    }
                }else if(D==0)
                {
                    if(X==0)
                    {
                         XSO[X].IPP[IPNo][0]+=1;
                    }
                    else if(X==1)
                    {
                        XSO[X].IPP[IPNo][0]-=1;
                    }
                }
            }
}

//得出绝对坐标
var r =Math.PI/180;
function gAC()
{
for(var XSNo in XSO)
{
    XSO[XSNo].Cy=YSO[0].CyY+YSO[0].R*Math.sin(r*XSO[XSNo].OOA);
}
for(var XSNo in XSO)
{
    XSO[XSNo].Cz=YSO[0].CxZ+YSO[0].R*Math.cos(r*XSO[XSNo].OOA);
}

    //获得第一层上内部点点的坐标未进行扭曲，与屏幕平行
    
    for(var IPNo in XSO[0].IPP )
    {
        XSO[0]. IPP[IPNo][1]=XSO[0].Cx+XSO[0].R*Math.cos(r*XSO[0].IPP[IPNo][0])
    }
    for(var IPNo in XSO[0].IPP )
    {
        XSO[0]. IPP[IPNo][2]=XSO[0].Cy+XSO[0].R*Math.sin(r*XSO[0].IPP[IPNo][0])
    }

     //获得第二层内部点的坐标未进行扭曲，
    
    for(var IPNo in XSO[0].IPP )
    {
        XSO[1]. IPP[IPNo][1]=XSO[1].Cx+XSO[1].R*Math.cos(r*XSO[1].IPP[IPNo][0])
    }
    for(var IPNo in XSO[0].IPP )
    {
        XSO[1]. IPP[IPNo][2]=XSO[1].Cy+XSO[1].R*Math.sin(r*XSO[1].IPP[IPNo][0])
    }

   
    for(var XSONo in XSO)
    {
        tXA(XSO[XSONo]);
    }
    
}

    ///Y
    function tXA(XSON)//兼容新原因无法提取方法使之更简短,提取后只有IE8支持,纳闷中!!
    {
        /// 捕捉1 象限
    if(XSON.Cy>=YSO[0].CyY&&XSON.Cz>YSO[0].CxZ)
    {
    
        for(var IPNo in XSON.IPP)
        {
            if(XSON.IPP[IPNo][2]>=XSON.Cy)//:[[30,0,0,0],[120,0,0,0],[210,0,0,0],[300,0,0,0]],)
            {
                XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+90))
                XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+90))
                
            }
            else if(XSON.IPP[IPNo][2]<XSON.Cy)
            {
                XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+270))
                XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+270))
            }
        }
      
    }
    /// 捕捉 3象限
    else if(XSON.Cy<=YSO[0].CyY&&XSON.Cz<YSO[0].CxZ)
    {

        for(var IPNo in XSON.IPP)
        {
            if(XSON.IPP[IPNo][2]>=XSON.Cy)//:[[30,0,0,0],[120,0,0,0],[210,0,0,0],[300,0,0,0]],)
            {
                
                XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+270))
                XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+270))
            }
            else if(XSON.IPP[IPNo][2]<XSON.Cy)
            {
                XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+90))
                XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+90))    
            }
        }
    }
    ///捕捉2 象限
    else if(XSON.Cy>YSO[0].CyY&&XSON.Cz<=YSO[0].CxZ)
    {
        for(var IPNo in XSON.IPP)
        {
            if(XSON.IPP[IPNo][2]>=XSON.Cy)//:[[30,0,0,0],[120,0,0,0],[210,0,0,0],[300,0,0,0]],)
            {
                XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+180))
                XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+180))
                //alert(XSON.IPP[IPNo][3]);    
            }
            else if(XSON.IPP[IPNo][2]<XSON.Cy)
            {
                XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*(XSON.OOA%90))
                XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*(XSON.OOA%90))
            }
        }  
    }
    ///捕捉4 象限
    else if(XSON.Cy<YSO[0].CyY&&XSON.Cz>=YSO[0].CxZ)
    {
        for(var IPNo in XSON.IPP)
        {
            if(XSON.IPP[IPNo][2]>=XSON.Cy)
            {
                
                
                XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*(XSON.OOA%90))
                XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*(XSON.OOA%90))
                
            }
            else if(XSON.IPP[IPNo][2]<XSON.Cy)
            {
                XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+180))
                XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+180))
            }
        }  
    }
    }
    
    //收缩
    function c()
    {
        
        for(var XSONo in XSO)
        {
            for(var IPNo in XSO[XSONo]. IPP)
            {
                    XSO[XSONo]. IPP[IPNo][4]=(XSO[0].IPP[IPNo][3]/20);
            }
        }

    }
    
    //载入空间载体

var p = new Array(8);
function iO()
{
    for(var PNo=0;PNo <p.length;PNo++)
    {
   p[PNo]=GEBI("D"+PNo);
    }
        s();

    
    
}

function iACP()
{
    

for(var PNo=0;PNo <p.length/2;PNo++)
{
        p[PNo].style.left=XSO[0].IPP[PNo][1]+"px";
        p[PNo].style.top=XSO[0].IPP[PNo][2]+"px";
        p[PNo].style.zIndex=XSO[0].IPP[PNo][3];
        p[PNo].style.fontSize= XSO[0]. IPP[PNo][4]+"px";
         
}
for(var PNo=4;PNo <p.length;PNo++)
{
        p[PNo].style.left=XSO[1].IPP[PNo-4][1]+"px";
        p[PNo].style.top=XSO[1].IPP[PNo-4][2]+"px";
        p[PNo].style.zIndex=XSO[1].IPP[PNo-4][3];
        p[PNo].style.fontSize= XSO[1]. IPP[PNo-4][4]+"px";
            
}

}

window.onload=iO;

转载于:https://www.cnblogs.com/NONE/archive/2009/11/03/JavaScript3DCube.html

bangjin6735
关注
css3+javascript实现旋转3D立方体
鞠培中的专栏
08-09 1200
css3的新特性之一就是增加了3D转换，
利用CSS3制作简单的3d半透明立方体图片展示
12-13
`.cube`将作为立方体的容器，而舞台（#stage）设置了`perspective`属性，这决定了观察者距离3D对象的远近，从而影响3D效果的透视感。 ```html <div class="cube"> <!-- 各个侧面的图片 --> ``` 接着，我们来...
cubeTransitionjs是一款超酷3D立方体页面切换过渡动画jQuery插件
08-10
cubeTransition.js是一款超酷3D立方体页面切换过渡动画jQuery插件。该插件通过CSS 3D transforms 和 CSS Animations来制作平滑的立方体过渡动画特效
p5.js 3D图形-立方体
weixin_39415598的博客
03-18 497
theme: smartblue 本文正在参加「金石计划」 本文简介 带尬猴，我嗨德育处主任 前面写了几篇 p5.js 文章 都还没涉及到3D图形，但其实 p5.js 是提供了基础的3D图形的。 本文就从最简单的立方体讲起，并做几个小demo和各位工友一起掌握立方体的用法。 jcode 立方体的基础用法 在 p5.js 里使用 box() 方法可以创建立方体。 基础语法说明 ...
用纯粹的Javascript做出的3D立方旋转效果
newsonglin的专栏
10-20 863
 用纯粹的Javascript做出的3D立方旋转效果:http://maettig.com/code/javascript/3d_dots.html震惊！ 贴源码在此收藏：html>head>title>Rotating 3D Cube in JavaScripttitle>style type="text/css">body{    backgro
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
09-28
这个"cube"div是3D立方体的主体，内部有六个分别代表立方体六个面的类为"face"的div。每个"face"都有不同的文本内容，例如"One face"、"Up, down, left, right"等，以便我们识别各个面。通过给这些div分配不同的...
CSS 3D立方体制作
09-25
上述代码中，`.cube`是包含立方体所有面的容器，而`.topFace`、`.leftFace`、`.rightFace`是立方体的三个面。由于实际操作中只需要定义三个面，因此可以使用CSS的变换将它们各自变换到相应的位置。 2. **CSS样式...
纯CSS3 3D旋转立方体动画
11-24
通过这种方式，我们就能创建一个纯CSS3的3D旋转立方体动画，无需JavaScript或其他复杂的图形库。这个技术在网页设计中广泛应用，如交互式按钮、动态导航菜单、视觉特效等方面，大大提升了用户体验和网页的视觉吸引力...
html3D立方体魔方
最新发布
08-03
在这个案例中，`Cube.js`文件包含了实现3D立方体魔方的核心逻辑。JavaScript通过WebGL API与浏览器的图形处理单元（GPU）通信，绘制并操纵3D模型。WebGL是一个基于OpenGL标准的JavaScript API，用于在任何兼容的Web...
javascript实现的三维正方体(兼容ie7,ff)
12-11
通过更新变换矩阵来记录转动(函数remx()). 利用矩阵计算出转动后的正方体顶点坐标, 把各个顶点的空间坐标按”近大远小”转换成平面坐标(函数p2d()), 用正方体各个面的法向量的z坐标判断该面是否可见, 用高为1px的div层模拟画出四边形(函数gra2htm()). 鼠标拖曳的代码用别人的代码修改的. Cube [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
包含31款充满少女气息的滤镜，适合美食、静物、清新人像等。先全套转换为3D LUTs(.3dl/cube)文件，PS/PR/AE3DL CUBE LUT.zip
05-27
Foodie包含31款充满少女气息的滤镜，适合美食、静物、清新人像等。现全套转换为3D LUTs(.3dl/cube)文件，PS/PR/AE/FCPX可用。
three.js入门——画一个3D正方体
weixin_33932129的博客
11-17 448
three.js 是一款WebGL框架，WebGL可以让我们在canvas上实现3D效果。实现3D效果在国内来说还算是比较新的东西，可供查阅的资料也不多。这篇文章仅是一个入门篇，介绍如何绘制一个3D正方体。介绍完毕，首先奉上实现的效果图： 这就是实现的效果图，还是挺有立体感的吧？ 绘制前的准备 写代码前，要先下载最新的three.js框架...
立方体html与js特效,css3 transform及原生js实现鼠标拖动3D立方体旋转的示例分析
weixin_32723617的博客
06-09 462
css3 transform及原生js实现鼠标拖动3D立方体旋转的示例分析发布时间：2021-04-21 14:08:12来源：亿速云阅读：90作者：小新这篇文章将为大家详细讲解有关css3 transform及原生js实现鼠标拖动3D立方体旋转的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。js的作用是什么1、能够嵌入动态文本于HTML页面。2、对浏览...
立方体
weixin_33743661的博客
01-23 152
转载于:https://www.cnblogs.com/wwwljcom/p/10311134.html
3D three.js（1）怎么写一个3D旋转的正方体
weixin_39818813的博客
10-31 846
效果如图所示：本篇暂未用到three.js，但是能学到一些基础的3D知识！先记住xyz轴的展示和画法：rotate:左手法则___伸出左手，大拇指指向正轴方向，四个手指的指向即是旋转正向，但务必记住是左手！
HTML立方体插件——JSCube v1.7
weixin_34061482的博客
03-03 181
　　JSCube是一个立方体插件，完全用JS和CSS实现，支持所有主流浏览器。通过它可以创建一个立方体，并将6个HTML元素贴在其面上，支持旋转和缩放。 　　与其他类似特效不同，本程序可以把任意HTML元素贴在立方体上，而不仅仅局限图片，所以无论是flash还是canvas，都是无法做到的。 　　 　　当前最新版本：1.7。更新日志： 　　1.0：基本立方体的模型。 　　1.1：支持任意...
【WebGL-iTwin.js】实战篇(一)：使用itwin.js画一个立方体
sunqian的博客
12-13 893
用itwin.js画一个彩色立方体
three.js学习笔记（1）如何创建一个场景
weixin_39531576的博客
08-28 392
three.js，显而易见，three即3D，js为JavaScript，如果要建立一个3d效果的页面，那么three.js是一个很好地选择，如下图 three.js的简单模型如下图，基础要素如下，包含虚拟场景，虚拟相机，执行渲染操作，投影 直接上代码 这样就可以创建一个基础的3d场景了 ...
Unity3D JavaScript教程：移动与光照控制
2. 用户输入处理: 例如，为了实现用户在场景中的简单移动，教程指导创建了一个平面对象和立方体，并使用PointLight模拟光照。玩家通过移动平面对象来调整摄像机（主相机）的位置。`Input.GetAxis()`函数用于获取用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值