`

用js实现的3D特效

阅读更多
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>3dtest2</title>
<script language="JavaScript"><!--
// abc

var d = document;

var isNav, isIE, isNS6;
if(d.layers) {isNav = 1;}
else if(d.all) {isIE = 1;}
else if (d.getElementByID) {isNS6 = 1;}

if(!isIE) {
        alert("this experiment requires IE, as it uses VML");
        }

function mousemove(e) {
        if (isIE) {
                mx = window.event.clientX;
                my = window.event.clientY;
                }
        else {
                mx = e.pageX;
                my = e.pageY;
                }
        }        
if (isNav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mousemove;

// vertex definitions:        x,y,z,xp,yp

var b1 = new Array(-40,40,-40,0,0);
var b2 = new Array(-40,40,40,0,0);
var b3 = new Array(40,40,40,0,0);
var b4 = new Array(40,40,-40,0,0);
var b5 = new Array(-40,-40,-40,0,0);
var b6 = new Array(-40,-40,40,0,0);
var b7 = new Array(40,-40,40,0,0);
var b8 = new Array(40,-40,-40,0,0);

function project(vert, obj) {
        vert[3] = Math.floor((vert[0] * dist) / (vert[2] + dist + 40));
        vert[4] = Math.floor((vert[1] * dist) / (vert[2] + dist + 40));
        }

function xrotate(vert, deg) {
        cos1 = costable[deg];
        sin1 = sintable[deg];
        y = vert[1];
        z = vert[2];
        vert[1] = (cos1*y) - (sin1*z);
        vert[2] = (sin1*y) + (cos1*z);
        }

function yrotate(vert, deg) {
        cos1 = costable[deg];
        sin1 = sintable[deg];
        x = vert[0];
        z = vert[2];
        vert[0] = (cos1*x) + (sin1*z);
        vert[2] = (cos1*z) - (sin1*x);
        }

function zrotate(vert, deg) {
        cos1 = costable[deg];
        sin1 = sintable[deg];
        x = vert[0];
        y = vert[1];
        vert[0] = (cos1*x) - (sin1*y);
        vert[1] = (sin1*x) + (cos1*y);
        }        

var dist = 90;
var mx = 100,my = 100;
var p1,p2,p3,p4,p5,p6,p7,p8;
var xcenter, ycenter;

var sintable = new Array(360);
var costable = new Array(360);

function startup() {
        for(i=-360;i<=360;i++) {
                costable[i] = Math.cos(i*0.017454);
                sintable[i] = Math.sin(i*0.017454);
                }
        main();
        }        

function amod(vert, lyr, img, xr, yr, zr) {
        project(vert);
        xrotate(vert,yr);
        yrotate(vert,xr);
        //zrotate(vert,zr);
        }


/*
      b2--b3       
     /   / |       
   b1--b4  |       
   |  b6--b7
   | /   /
   b5--b8

*/

var v1path, v2path, v3path, v4path;
var scrtch = 0;

function swip() {
        if(scrtch == "1") {
                scrtch = 0;
                c1.path = "m";
                c2.path = "m";
                c3.path = "m";
                c4.path = "m";
                }
        else {
                scrtch = 1;
                }
        }

function main() {
        if(scrtch == "1") {
                c1.path = v1path;
                c2.path = v2path;
                c3.path = v3path;
                c4.path = v4path;
                }
                
        xr = -Math.floor((mx-350)/80);
        if(xr > 6) {xr = 6};
        yr = Math.floor((my-250)/80);
        if(yr > 6) {yr = 6};
        zr = 0;

        for(i=1;i<=8;i++) {
                eval("amod(b"+i+",p"+i+",'i"+i+"', xr, yr, zr)");
                }

        v1path = "m "+b1[3]+","+b1[4]+" l "+b2[3]+","+b2[4]+" "+b3[3]+","+b3[4]+" "+b4[3]+","+b4[4]+" x e";
        v2path = "m "+b5[3]+","+b5[4]+" l "+b6[3]+","+b6[4]+" "+b7[3]+","+b7[4]+" "+b8[3]+","+b8[4]+" x e";
        v3path = "m "+b1[3]+","+b1[4]+" l "+b2[3]+","+b2[4]+" "+b6[3]+","+b6[4]+" "+b5[3]+","+b5[4]+" x e";
        v4path = "m "+b3[3]+","+b3[4]+" l "+b4[3]+","+b4[4]+" "+b8[3]+","+b8[4]+" "+b7[3]+","+b7[4]+" x e";
        
        v1.path = v1path;
        v2.path = v2path;
        v3.path = v3path;
        v4.path = v4path;
        
        setTimeout('main()','20');
        }
//--></script>
<style type="text/css">
v\:*{behavior:url(#default#VML);}
body {font-family: verdana, arial; font-size:10px; color:white;}
input, select, .cb {background-color: #BB0000; padding:3px;font-family:verdana, helvetica, arial; font-size:10px; border: 0 solid; border-color: #C0E0C0; color:#FFFFFF;}
a:link, a:visited, a:active {font-family: verdana, arial; font-size:10px; color:white;}
a:hover {font-family: verdana, arial; font-size:10px; color:red;}

</style>
</head>
<body onload="startup();" bgcolor="#000000">
<v:shape id="c1" filled="false" strokecolor="#ff8888" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l x e"/></v:shape> 
<v:shape id="c2" filled="false" strokecolor="#ff8888" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l x e"/></v:shape> 
<v:shape id="c3" filled="false" strokecolor="#ff8888" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l x e"/></v:shape> 
<v:shape id="c4" filled="false" strokecolor="#ff8888" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l x e"/></v:shape> 
<v:shape id="v1" filled="false" strokecolor="white" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l 100,100 200,50 x e"/></v:shape> 
<v:shape id="v2" filled="false" strokecolor="white" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l 100,100 200,50 x e"/></v:shape> 
<v:shape id="v3" filled="false" strokecolor="white" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l 100,100 200,50 x e"/></v:shape> 
<v:shape id="v4" filled="false" strokecolor="white" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l 100,100 200,50 x e"/></v:shape> 
<div style="position:absolute; top:75px; left:122px; width:200;" align="justify"> 
  <br>
<br>
  <select onchange="dist = Math.floor(this.value);">
        <option value="40">super high</option>
        <option value="50">high</option>
        <option value="90" selected>normal</option>
        <option value="200">low</option>
        <option value="10000">super low</option>
</select>
</div>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>

 

 

来自:http://www.alixixi.com/Dev/HTML/jsrun/zh/2008/2008070580377.html

分享到:
评论

相关推荐

    用js实现的3D特效.rar

    在IT行业中,JavaScript(简称JS)是...通过研究这两个文件,我们可以更深入地学习和理解如何利用JavaScript实现3D特效。对于初学者来说,这是一个极好的学习资源,而对于有经验的开发者,它也可能提供新的灵感和技巧。

    JS实现3D蜂巢特效,炫酷网页效果

    JS实现3D蜂巢特效,炫酷网页效果 JS实现3D蜂巢特效,炫酷网页效果 JS实现3D蜂巢特效,炫酷网页效果 JS实现3D蜂巢特效,炫酷网页效果 JS实现3D蜂巢特效,炫酷网页效果 JS实现3D蜂巢特效,炫酷网页效果 JS实现3D蜂巢...

    js实现3D烟花特效,视觉盛宴,自带爆炸音效,浪漫表白代码,程序员必看!

    js实现3D烟花特效,视觉盛宴,自带爆炸音效,浪漫表白代码,程序员必看! js实现3D烟花特效,视觉盛宴,自带爆炸音效,浪漫表白代码,程序员必看! js实现3D烟花特效,视觉盛宴,自带爆炸音效,浪漫表白代码,程序员...

    JS交互式3D相册切换模糊特效.zip

    在本资源"JS交互式3D相册切换模糊特效.zip"中,主要包含了一个使用JavaScript实现的3D相册切换效果,它具有可调整的图片数量和模糊度特性。这个功能丰富的代码库允许用户在网页上创建一种动态、立体且视觉效果独特的...

    js实现的3d效果(很炫+转载)

    JavaScript,简称JS,是一种广泛用于Web开发的轻量级...通过学习以上知识,并结合"3d_js"文件中的示例,开发者可以逐步掌握JavaScript实现3D效果的技术。不断实践和探索,可以创造出更多令人惊叹的3D交互式网页应用。

    网页模板——基于threejs实现3D爆炸碎片轮播图特效.zip

    【标题】中的“网页模板——基于threejs实现3D爆炸碎片轮播图特效”表明这是一个使用Web技术,特别是three.js库来创建的3D视觉效果。Three.js是JavaScript的一个库,专为在Web浏览器中创建和展示三维图形设计。这个...

    基于WebGL实现3D图片特效

    `js`目录下的JavaScript文件,很可能是实现3D图片特效的代码。这些文件可能包括了WebGL的初始化,模型加载,鼠标事件处理,以及3D变换等关键逻辑。 最后,`css`目录中的样式表文件,负责控制网页的布局和视觉样式,...

    3D球体标签云特效,JavaScript CSS实现.rar

    在IT行业中,JavaScript和CSS是前端开发中的两个关键...如果你对这些技术有所了解,可以通过下载源码进行研究,逐步剖析代码,理解每个部分的作用,这样不仅可以学习到如何创建3D特效,还可以提高你的前端开发技能。

    JS带模糊效果交互式3D相册切换特效.zip

    CSS3允许我们创建丰富的、动态的布局和动画,其中transform和transition属性是实现3D转换的关键。WebGL则是一个JavaScript API,用于在浏览器中进行3D图形渲染,无需插件支持。在这个特效中,WebGL可能被用来创建...

    基于threejs实现3D爆炸碎片轮播图特效.zip

    【标题】中的“基于threejs实现3D爆炸碎片轮播图特效”表明这是一个关于使用Three.js库在前端开发中创建3D动态效果的项目。Three.js是一个JavaScript库,它为Web浏览器提供了丰富的3D图形渲染功能,使得开发者无需...

    JS 实现3D立体效果的首页轮播图

    总的来说,使用JavaScript实现3D立体轮播图是一个结合了前端技术、视觉设计和用户体验的综合项目。通过理解并实践这些知识点,开发者不仅可以创造出独特的网页效果,还能提升自己的JavaScript编程和CSS3使用技能。

    用js实现的3D特效特效代码

    总结来说,用JavaScript实现3D特效涉及到WebGL的基本原理,Three.js库的使用,以及3D图形学的相关概念。通过掌握这些知识,开发者可以创建出令人惊叹的互动3D体验,为网页和应用程序增添深度和动态性。

    基于three.js实现的炫酷3D线条背景动画特效

    【标题】"基于three.js实现的炫酷3D线条背景动画特效"介绍的是一个使用JavaScript库three.js创建的视觉效果,这种效果通过在Canvas上绘制3D线条来为网页增添动感和吸引力。three.js是一个强大的开源框架,专门用于在...

    史上最牛JS 3D特效

    此js 的效果可以再平面呈现出3D 的特效。有兴趣的朋友可以下载下来学习学习。的确很牛! 脚本是纯 JS 代码。用平面实现了 立体效果。很震撼。

    javascript 3D 特效.zip

    在“javascript 3D 特效.zip”这个压缩包中,包含了一些示例,展示了如何利用JavaScript实现图表的多样变换效果,如块状、条状、横向和纵向的3D展示。这些效果可以极大地提升数据可视化的吸引力和用户体验。 首先,...

    整理1500个JS特效源码

    在这个名为"1500个JS特效源码"的资源中,包含了丰富的JavaScript特效示例,涵盖了网页设计中的多种常见效果。 首先,我们要了解JS特效在网页开发中的重要性。JavaScript可以处理用户输入、控制多媒体、进行动画制作...

    js特效 javascript特效 javascript美观 js美观

    对于更高级的3D特效,JavaScript可以结合WebGL API,实现在浏览器中直接渲染3D图形,创建出引人入胜的视觉体验。 9. **数据可视化** JavaScript库如D3.js可以帮助开发者将复杂的数据转换为易于理解的图表和图形,...

    js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看!

    js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看! js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看! js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看! js实现海洋中水母...

    js css3实现3D骰子特效.zip

    在IT行业中,JavaScript和CSS...总结来说,利用JavaScript和CSS3实现3D骰子特效是一项结合了编程逻辑、3D视觉效果和用户交互的挑战。通过理解这些技术并熟练应用,开发者可以创建出更多富有创意和吸引力的Web应用效果。

    JavaScript3D特效集锦

    JavaScript3D特效集锦是一个汇集了多种利用JavaScript实现的3D视觉效果的资源库,它展示了JavaScript在网页交互和图形渲染方面的强大能力。这个集合涵盖了从基础到高级的各种3D技术,包括图片和文字的3D展示方式。...

Global site tag (gtag.js) - Google Analytics