<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 图片3D展示空间</title>
<script src="CJL.0.1.min.js"></script>
<script src="Image3D.js"></script>
</head>
<body>
<style>
#idContainer{ width:600px; height:300px; border:1px solid #000;}
</style>
<div id="idContainer"> </div>
<select id="idMode">
<option value="">默认模式</option>
<option value="css3">css3</option>
<option value="zoom">zoom</option>
<option value="base">base</option>
</select>
<select id="idRadian">
<option value="">不旋转</option>
<option value="30">30度</option>
<option value="-30">-30度</option>
</select>
<input id="idEdit" type="button" value="换图" />
<input id="idFixed" type="button" value="远点固定" />
<input id="idReset" type="button" value="重置" />
<div id="t"></div>
<script>
(function(){
var imgs, i3D, mode, support, src = "images/o_n1.jpg";
function create(){
support = true;
var options = {
mzMin: -2000, mzMax: 2000,
mrMinX: -300, mrMaxX: 300, mrMinY: -150, mrMaxY: 150,
r: $$("idRadian").value * Math.PI/180,
onError: function(err){ alert(err); support = false; }
};
mode && (options.mode = mode);
i3D && i3D.dispose();
i3D = new Image3D( "idContainer", options );
imgs = [];
if ( support ) {
for(var z = -1000; z < 2000; z+=100){
add(z,-300,300); add(z,0,300); add(z,300,300);
add(z,-300,150); add(z,0,150); add(z,300,150);
add(z,-300,0); add(z,0,0); add(z,300,0);
}
}
}
function add(z,x,y){ imgs.push(i3D.add(src,{z:z,x:x,y:y})); }
$$("idMode").onchange = function(){
mode = this.value; create();
}
$$("idRadian").onchange = function(){
i3D._r = this.value * Math.PI/180; i3D.show();
}
$$("idEdit").onclick = function(){
src = src == "images/o_n1.jpg" ? "images/o_loading.gif" : "images/o_n1.jpg";
$$A.forEach(imgs,function(img){ img.src = src; img.show(); });
}
$$("idFixed").onclick = function(){
if(!i3D.fixedFar){
i3D.fixedFar = true; this.value = "近点固定";
}else{
i3D.fixedFar = false; this.value = "远点固定";
}
i3D.show();
}
$$("idReset").onclick = function(){ i3D.reset(); }
create();
})()
</script>
<br><br>
<style>
#idContainer2{ width:600px; height:500px;background: #111;}
</style>
3DRoom
<div id="idContainer2"> </div>
<script>
(function(){
var i3D = new Image3D( "idContainer2", {
mode: "base", fixedFar: true, getScale: function(z){ return 1/(1+z/300); }
});
add("Bush2.gif",{z:-200,x:-300});
add("Bush2.gif",{z:-200,x:300});
add("Bush2.gif",{z:-600,x:-300});
add("Bush2.gif",{z:-600,x:300});
add("Bush2.gif",{z:-1000,x:-300});
add("Bush2.gif",{z:-1000,x:300});
add("bim.jpg",{z:1020,scaleW:9,scaleH:.5,y:20});
add("r13.gif",{z:900});
add("r46a.gif",{z:800,x:900,y:220});
add("r8.gif",{z:800,x:-600});
add("r22.gif",{z:600});
add("r24.gif",{z:400});
add("r62.gif",{z:800,y:700});
add("r5.gif",{z:600,x:-1200,y:300});
add("r6.gif",{z:600,x:1200,y:300});
add("r54.gif",{z:100});
add("r38.gif",{z:350,x:-900});
add("r50a.gif",{z:300,x:-550});
add("r41.gif",{z:1000,x:600,y:200});
add("r48.gif",{z:300,x:900});
add("r58b.gif",{z:740,x:900,y:-20});
add("r58b.gif",{z:250,x:900,y:-20});
add("r63.gif",{z:300,x:-1000});
add("r63.gif",{z:320,x:650});
add("r63.gif",{z:980,x:1000});
function add(src,options){
var img = i3D.add( "images/o_"+src, options ).img;
img.onclick = function(){
i3D._z = -options.z | 0;
i3D._x = -options.x | 0;
i3D._y = options.y | 0;
i3D.show();
}
img.onmouseover = function(){ this.style.margin = "-1px"; this.style.border = "1px solid #666"; }
img.onmouseout = function(){ this.style.margin = "0"; this.style.border = "0"; }
}
})()
</script>
</body>
</html>
Javascript 3Droom（附所有文件+图片） JS 3D 场景
3星 · 超过75%的资源 需积分: 13 78 浏览量
2010-10-14
09:37:21
上传
评论
收藏 584KB 7Z 举报 
3Droom.7z （23个子文件） 
images 
o_Bush2.gif 43KB o_r41.gif 25KB o_r46a.gif 22KB o_r54.gif 85KB o_loading.gif 3KB o_r50a.gif 23KB
o_n1.jpg 351B o_r48.gif 51KB o_r58b.gif 7KB o_r24.gif 43KB o_r22.gif 15KB o_bim.jpg 17KB o_r8.gif 57KB o_r63.gif 8KB o_r38.gif 11KB o_r6.gif 32KB o_r5.gif 35KB o_r62.gif 12KB
Thumbs.db 52KB o_r13.gif 57KB Image3D.htm 4KB CJL.0.1.min.js 6KB Image3D.js 11KB资源评论
yaozhuce9992016-05-05谢谢，学习了- 蓝鼻子的驯鹿2019-01-30对于我参考价值不高，不是我想要的
odejun2016-10-28参考价值不高~！
