3D JS 效果案例

最新推荐文章于 2023-04-20 16:21:42 发布

魔拉宝

最新推荐文章于 2023-04-20 16:21:42 发布

阅读量1k

点赞数

分类专栏：特效代码文章标签： function path class div c html

本文链接：https://blog.csdn.net/jeefchen/article/details/4094933

版权

特效代码专栏收录该内容

109 篇文章 1 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>...</title>
<style>
* { font-size:12px; font-weight:normal; font-family:Arial; padding:0px; margin:0px; }
body { border-style:none; overflow:hidden; background-color:black; /*#3A6EA5;*/ padding:0px; margin:0px; }
.chr { position:absolute; }
.block { position:absolute; text-align:center; font-size:20px; font-weight:bold; }
#out { position:absolute; right:0px; top:0px; font-size:24px; height:30px; line-height:30px; padding:0px 20px; color:white; }
</style>
<script>
var glbObj, sIndex;
var x0, y0, z0, d0, r0;
var step = 0.02;
var frames_count = 0;
function move(x, y, z){
var k, x, y, d, c;
this.x = x;
this.y = y;
this.z = z;
k = (z0-z) / z0;
c = parseInt(k*160).toString(16);
if(c.length<2)c = "0"+c;
this.style.fontSize = d0 * k;
this.style.left = x * k + x0;
this.style.top = y * k + y0;
this.style.color = c + c + c;
this.style.zIndex = z0 - z;
}
function createString(str){
var obj, chr;
obj = document.createElement("div");
for(var i=0; i<str.length; i++){
  chr = document.createElement("div");
  chr.move = move;
  chr.style.position = "absolute";
  chr.innerText = str.charAt(i);
  obj.appendChild(chr);
}
return(obj);
}
window.onload = function(){
var obj;

x0 = window.document.body.clientWidth / 2;
y0 = window.document.body.clientHeight / 2;
z0 = 600;
d0 = 30;
r0 = 90;

obj = createString((new Array(50)).join(unescape("%u2022")));
document.body.appendChild(obj);
for(var i=0; i<obj.childNodes.length; i++){
  obj.childNodes[i].move(Math.cos(i/4.5)*r0,i,Math.sin(i/4.5)*r0);
}
glbObj = obj;

setTimeout(rotate);
setInterval(out_put, 1000);
ymouse = y0-90;
xmouse = x0;
}
function rotate(){
var chr, angle, r;
for(var i=0; i<glbObj.childNodes.length; i++){
  chr = glbObj.childNodes[i];
  angle = Math.atan(chr.z/chr.x)+(chr.x<0?Math.PI:0) + step;
  //r = Math.sqrt(chr.x*chr.x + chr.z*chr.z);
  chr.move(Math.cos(angle)*r0,chr.y,Math.sin(angle)*r0);
}
frames_count++;
setTimeout(rotate);
}
function out_put(){
document.getElementById("out").innerHTML = "刷新率：" + frames_count + " 帧/秒";
frames_count = 0;
}
</script>
<div id="out"></div>
</head>
<body>
</body>
</html>

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

// 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;

        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 οnlοad="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 οnchange="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>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>radiated</title>
<meta>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
  overflow: hidden;
}
body {
  margin: 0px;
  padding: 0px;
  background: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor:crosshair;
}
.alpha {
  filter: alpha(opacity=20);
  -moz-opacity:0.2;
  opacity:0.2;
  left: -1000px;
  position: absolute;
}
</style>
<script type="text/javascript">
var cx;
var cy;
var lx;
var ly;
var vx;
var vy;
var k = 0;
var e = 0;
var M = 0;

var dim = 256;
///
function LensFlare(){
M--;
if(M<0)k-=2,e+=.5;
vx = cx - lx + ((M<0)?Math.cos(k/Math.PI/180) * e:0);
vy = cy - ly + ((M<0)?Math.sin(k/Math.PI/180) * e:0);
len = Math.sqrt(vx*vx+vy*vy);
AnimLens("p1",1,1,0,0,1);
AnimLens("p2",.5,2,0,0,1);
AnimLens("p3",.25,3,0,0,1);
AnimLens("p4",1,8,0,0,1);
AnimLens("p5",.5,-2,0,0,1);
AnimLens("p6",.25,-4,0,0,1);
AnimLens("p7",.2,-5.5,0,0,1);
AnimLens("p8",3.375,-1,40,120,1.33);
setTimeout("LensFlare();",16);
}
function AnimLens(Lens,iScale,dist,x,y,r){
vxv = vx / dist;
vyv = vy / dist;
d   = dim * iScale;
with(document.getElementById(Lens).style){
  top    = Math.round(vyv - ((d / r) * .5) + cy + y)+'px';
  left   = Math.round(vxv - (d * .5) + cx + x)+'px'
  width = Math.round(d)+'px'
  height = Math.round(d / r)+'px'
}
}
function resize() {
cx = document.body.offsetWidth * .5;
cy = document.body.offsetHeight * .5;
}
onresize = resize;
document.onmousemove = function(e){
if (window.event) e = window.event;
lx = (e.x || e.clientX);
ly = (e.y || e.clientY);
M = 50;
e = 0;
}
onload = function() {
resize();
lx = cx / 2;
ly = cy / 2;
LensFlare();
}
</script>
</head>
<body>
<div id=img style="position: absolute;">
<img id="p8" src="mars2.jpg" style="position:absolute;left:-1000px">
<img id="p1" class="alpha" src="lf2.gif">
<img id="p2" class="alpha" src="lf1.gif">
<img id="p3" class="alpha" src="lf3.gif">
<img id="p4" class="alpha" src="lf2.gif">
<img id="p5" class="alpha" src="lf1.gif">
<img id="p6" class="alpha" src="lf1.gif">
<img id="p7" class="alpha" src="lf3.gif">
</div>
</body>
</html>

魔拉宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D JS 效果案例

... * { font-size:12px; font-weight:normal; font-family:Arial; padding:0px; margin:0px; } body { border-style:none; overflow:hidden; background-color:black; /*#3A6EA5;*/ padding:0px; margin:0px; } .
复制链接

扫一扫