2차원 공간에서 3차원 효과를 시뮬레이션하려면 3차원 좌표를 2차원 좌표로 변환해야 합니다. 가장 기본적인 기초 중 하나는 멀리 있는 물체일수록 크기가 작아지고, 좌표가 소실점에 가까워진다는 것입니다.
원근 공식:
Scale = fl / (fl z);
Scale은 크기 비율(0.0과 1.0 사이)이며 fl은 관찰 지점에서 이미징 표면까지의 거리이며 일반적으로 이 값은 다음과 같습니다. 고정된 경우 z는 물체의 3차원 공간에서 z축입니다.
이 코드를 작성하기 전에 저는 제가 쓰는 것을 설명하기 위해 객체 지향을 사용하는 것을 좋아합니다. 예를 들어 장면은 공간이며, 객체는 객체입니다. 객체는 x입니다. , y 및 z의 3차원에서는 장면에 원하는 수의 객체를 삽입할 수 있으며 객체는 좌표 값을 기반으로 장면의 특정 위치에 표시됩니다. 물체의 위치.
일부 데모의 경우 마우스 움직임과 스크롤 휠을 사용하여 제어하세요.
효과 1
]
효과 2
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]
[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]
<script>
void function(window){
var document = window.document;
var debug = document.getElementById('debug');
function ObjtoStr(obj){
var arr = [];
for(var i in obj){
if(isNaN(obj[i])) continue;
arr.push(i + ':' + obj[i]);
}
return arr.join('; ');
}
function getElementOffset(element){
var left = 0, top = 0;
do{
left += element.offsetLeft;
top += element.offsetTop;
}while(element = element.offsetParent);
return {
left:left,
top:top
};
}
function getMouseOffset(event){
return {
x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft),
y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop)
};
}
function addEventListener(element,type,fun){
if(element.addEventListener){
element.addEventListener(type,function(event){
fun(event);
},false);
}else{
element.attachEvent('on'+type,function(){
fun(window.event);
});
}
}
function extend(subClass,supClass){
var fun = function(){},
prototype = subClass.prototype;
fun.prototype = supClass.prototype;
subClass.prototype = new fun();
for(var i in prototype){
subClass.prototype[i] = prototype[i];
}
subClass.$supClass = supClass;
subClass.prototype.$supClass = function(){
var supClass = arguments.callee.caller.$supClass;
if(typeof supClass == 'function'){
supClass.apply(this,arguments);
this.$supClass = supClass;
}
};
subClass.prototype.constructor = subClass;
return subClass;
}
/**
* WH类，高宽
*/
function WH(w,h){
this.w = w;
this.h = h;
}
WH.prototype = {
clone:function(){
return new WH(this.w,this.h);
}
};
/**
* xyz坐标类
*
*/
function XYZ(x,y,z){
this.x = x;
this.y = y;
this.z = z;
}
XYZ.prototype = {
clone:function(){
return new XYZ(this.x,this.y,this.z);
}
};
/**
* 场景类
*/
function Scene(options){
//属性
//dom
this.element = null;
//场景距离
this.fl = 500;
this.wh = null;
//基准z轴
this.baseZ = 0;
//中心消失点坐标
this.cX = 0;
this.cY = 0;
//中心消失点便宜
this.cXl = 0;
this.cYl = 0;
//偏移系数
this.ce = 1;
this.ThingList = [];
this.setOption(options);
this.init();
}
Scene.prototype = {
setOption:function(options){
for(var i in options){
switch(i){
case 'element':
this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i];
break;
}
}
},
init:function(){
if(!this.element) throw new Error(90,'not box');
this.wh = new WH(this.element.clientWidth,this.element.clientHeight);
this.bindEvent();
},
addThing:function(/* Thing */ thing){
this.ThingList.push(thing);
this.calcPosition(thing);
this.element.appendChild(thing.getElement(this));
},
//计算位置及大小
calcPosition:function(/*Thing*/ thing){
this.cX = this.element.clientWidth/2;
this.cY = this.element.clientHeight/2;
scale = this.fl/(this.fl + thing.xyz.z+this.baseZ);
if(scale <= 0){
thing.element.style.display = 'none';
return ;
}else{
thing.element.style.display = '';
}
thing.element.style.width = thing.wh.w * scale + 'px';
thing.element.style.height = thing.wh.h * scale + 'px';
thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px';
thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px';
thing.element.style.zIndex = Math.round(scale*1000);
if(thing.isOpacity){
thing.element.style.opacity = Math.min(scale*4.5,1);
thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')';
}
},
bindEvent:function(){
var self = this;
addEventListener(this.element,'mousemove',function(event){
self.onMouseMove(event);
});
var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel';
addEventListener(this.element,mousewheel,function(event){
self.onMouseWheel(event);
});
},
//在场景内移动事件
onMouseMove:function(event){
//场景的页面坐标
var po = getElementOffset(this.element);
//鼠标光标的页面坐标
var ev = getMouseOffset(event);
//场景内坐标
var x = ev.x-po.left;
var y = ev.y-po.top;
//中间消失点的坐标偏移差
this.cXl = (this.element.clientWidth/2 - x) * this.ce;
this.cYl = (this.element.clientHeight/2 - y) * this.ce;
this.reDraw();
},
onMouseWheel:function(event){
var code = event.wheelDelta || -event.detail;
if(code > 0){
this.baseZ -= 200;
}else{
this.baseZ += 200;
}
this.reDraw();
},
reDraw:function(){
for(var i=0 ; i<this.ThingList.length;i++){
this.calcPosition(this.ThingList[i]);
}
}
};
/**
* 物件抽象类
*/
function Thing(options){
this.scene = null;
this.wh = new WH(10,10);
this.xyz = new XYZ(10,10,0);
this.element = null;
this.isOpacity = true;
this.setOption(options);
this.init();
}
Thing.prototype = {
setOption:function(options){
for(var i in options){
switch(i){
case 'wh':
case 'xyz':
case 'isOpacity':
this[i] = options[i];
break;
default:
break;
}
}
},
init:function(){
this.element = this.draw();
this.element.style.position = 'absolute';
this.element.style.width = this.wh.w + 'px';
this.element.style.height = this.wh.h + 'px';
},
draw:function(){
throw new Error(998,'method do not realize!');
},
getElement:function(/*Scene*/ scene){
this.scene = scene;
return this.element;
}
};
function Diam(options){
this.$supClass(options);
}
Diam.prototype = {
draw:function(){
var img = document.createElement('img');
loadimg = img.cloneNode(true);
loadimg.onload = function(){
self.wh = new WH(this.width,this.height);
}
img.src = [
'/upload/201201/20120105103758227.jpg',
'/upload/201201/20120105103801969.jpg',
'/upload/201201/20120105103801207.jpg',
'/upload/201201/20120105103801956.jpg',
'/upload/201201/20120105103801732.jpg',
'/upload/201201/20120105103801346.jpg',
'/upload/201201/20120105103801362.jpg'
][Math.round(Math.random()*6)];
return img;
}
};
extend(Diam,Thing);
function Sky(options){
this.$supClass(options);
}
Sky.prototype = {
draw:function(){
var img = document.createElement('img');
img.src = [
'/upload/201201/20120105103801314.jpg',
'/upload/201201/20120105103803325.jpg',
'/upload/201201/20120105103803314.jpg',
'/upload/201201/20120105103803146.jpg'
][Math.round(Math.random()*3)];
return img;
}
};
extend(Sky,Thing);
var scene = new Scene({
'element':'box'
});
for(var i= 0 ; i < 50 ;i++){
scene.addThing(new Diam({
wh:new WH(100,100),
xyz:new XYZ(Math.random() * document.body.clientWidth,Math.random() *document.body.clientHeight,Math.random() *8000)
}));
}
scene.addThing(new Sky({
wh:new WH(160000,120000),
xyz:new XYZ(-80000,-60000,54000),
isOpacity:false
}));
}(window);
</script>[Ctrl A 모두 선택 참고: <script>
void function(window){
var document = window.document;
var debug = document.getElementById('debug');
function ObjtoStr(obj){
var arr = [];
for(var i in obj){
if(isNaN(obj[i])) continue;
arr.push(i + ':' + obj[i]);
}
return arr.join('; ');
}
function getElementOffset(element){
var left = 0, top = 0;
do{
left += element.offsetLeft;
top += element.offsetTop;
}while(element = element.offsetParent);
return {
left:left,
top:top
};
}
function getMouseOffset(event){
return {
x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft),
y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop)
};
}
function addEventListener(element,type,fun){
if(element.addEventListener){
element.addEventListener(type,function(event){
fun(event);
},false);
}else{
element.attachEvent('on'+type,function(){
fun(window.event);
});
}
}
function extend(subClass,supClass){
var fun = function(){},
prototype = subClass.prototype;
fun.prototype = supClass.prototype;
subClass.prototype = new fun();
for(var i in prototype){
subClass.prototype[i] = prototype[i];
}
subClass.$supClass = supClass;
subClass.prototype.$supClass = function(){
var supClass = arguments.callee.caller.$supClass;
if(typeof supClass == 'function'){
supClass.apply(this,arguments);
this.$supClass = supClass;
}
};
subClass.prototype.constructor = subClass;
return subClass;
}
/**
* WH类，高宽
*/
function WH(w,h){
this.w = w;
this.h = h;
}
WH.prototype = {
clone:function(){
return new WH(this.w,this.h);
}
};
/**
* xyz坐标类
*
*/
function XYZ(x,y,z){
this.x = x;
this.y = y;
this.z = z;
}
XYZ.prototype = {
clone:function(){
return new XYZ(this.x,this.y,this.z);
}
};
/**
* 场景类
*/
function Scene(options){
//属性
//dom
this.element = null;
//场景距离
this.fl = 500;
this.wh = null;
//基准z轴
this.baseZ = 0;
//中心消失点坐标
this.cX = 0;
this.cY = 0;
//中心消失点便宜
this.cXl = 0;
this.cYl = 0;
//偏移系数
this.ce = 5;
this.ThingList = [];
this.setOption(options);
this.init();
}
Scene.prototype = {
setOption:function(options){
for(var i in options){
switch(i){
case 'element':
this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i];
break;
}
}
},
init:function(){
if(!this.element) throw new Error(90,'not box');
this.wh = new WH(this.element.clientWidth,this.element.clientHeight);
this.bindEvent();
},
addThing:function(/* Thing */ thing){
this.ThingList.push(thing);
this.calcPosition(thing);
this.element.appendChild(thing.getElement(this));
},
//计算位置及大小
calcPosition:function(/*Thing*/ thing){
this.cX = this.element.clientWidth/2;
this.cY = this.element.clientHeight/2;
scale = this.fl/(this.fl + thing.xyz.z+this.baseZ);
if(scale <= 0){
thing.element.style.display = 'none';
return ;
}else{
thing.element.style.display = '';
}
thing.element.style.width = thing.wh.w * scale + 'px';
thing.element.style.height = thing.wh.h * scale + 'px';
thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px';
thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px';
thing.element.style.zIndex = Math.round(scale*1000);
if(thing.isOpacity){
thing.element.style.opacity = Math.min(scale*4.5,1);
thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')';
}
},
bindEvent:function(){
var self = this;
addEventListener(this.element,'mousemove',function(event){
self.onMouseMove(event);
});
var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel';
addEventListener(this.element,mousewheel,function(event){
self.onMouseWheel(event);
});
},
//在场景内移动事件
onMouseMove:function(event){
//场景的页面坐标
var po = getElementOffset(this.element);
//鼠标光标的页面坐标
var ev = getMouseOffset(event);
//场景内坐标
var x = ev.x-po.left;
var y = ev.y-po.top;
//中间消失点的坐标偏移差
this.cXl = (this.element.clientWidth/2 - x) * this.ce;
this.cYl = (this.element.clientHeight/2 - y) * this.ce;
this.reDraw();
},
onMouseWheel:function(event){
var code = event.wheelDelta || -event.detail;
if(code > 0){
this.baseZ -= 200;
}else{
this.baseZ += 200;
}
this.reDraw();
},
reDraw:function(){
for(var i=0 ; i<this.ThingList.length;i++){
this.calcPosition(this.ThingList[i]);
}
}
};
/**
* 物件抽象类
*/
function Thing(options){
this.scene = null;
this.wh = new WH(10,10);
this.xyz = new XYZ(10,10,0);
this.element = null;
this.isOpacity = true;
this.setOption(options);
this.init();
}
Thing.prototype = {
setOption:function(options){
for(var i in options){
switch(i){
case 'wh':
case 'xyz':
case 'isOpacity':
this[i] = options[i];
break;
default:
break;
}
}
},
init:function(){
this.element = this.draw();
this.element.style.position = 'absolute';
this.element.style.width = this.wh.w + 'px';
this.element.style.height = this.wh.h + 'px';
},
draw:function(){
throw new Error(998,'method do not realize!');
},
getElement:function(/*Scene*/ scene){
this.scene = scene;
return this.element;
}
};
function Diam(options){
this.$supClass(options);
}
Diam.prototype = {
draw:function(){
var img = document.createElement('img');
loadimg = img.cloneNode(true);
loadimg.onload = function(){
self.wh = new WH(this.width,this.height);
}
img.src = [
'/upload/201201/20120105103758227.jpg',
'/upload/201201/20120105103801969.jpg',
'/upload/201201/20120105103801207.jpg',
'/upload/201201/20120105103801956.jpg',
'/upload/201201/20120105103801732.jpg',
'/upload/201201/20120105103801346.jpg',
'/upload/201201/20120105103801362.jpg'
][Math.round(Math.random()*6)];
return img;
}
};
extend(Diam,Thing);
function Sky(options){
this.$supClass(options);
}
Sky.prototype = {
draw:function(){
var img = document.createElement('img');
img.src = [
'/upload/201201/20120105103801314.jpg',
'/upload/201201/20120105103803325.jpg',
'/upload/201201/20120105103803314.jpg',
'/upload/201201/20120105103803146.jpg'
][Math.round(Math.random()*3)];
return img;
}
};
extend(Sky,Thing);
var scene = new Scene({
'element':'box'
});
for(var i= 0,x,z ; i < 50 ;i++){
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500;
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500;
scene.addThing(new Diam({
wh:new WH(100,100),
xyz:new XYZ(x,y,3000)
}));
}
for(var i= 0,x,z ; i < 50 ;i++){
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500;
z = (Math.cos(Math.PI*2*(i/50)) * 1000)+3000;
scene.addThing(new Diam({
wh:new WH(100,100),
xyz:new XYZ(x,document.body.clientHeight/2+200,z)
}));
}
scene.addThing(new Sky({
wh:new WH(160000,120000),
xyz:new XYZ(-80000,-60000,54000),
isOpacity:false
}));
}(window);
</script>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <script>
void function(window){
/**
* by Od 2011/12/25
*/
var document = window.document;
var debug = document.getElementById('debug');
function ObjtoStr(obj){
var arr = [];
for(var i in obj){
if(isNaN(obj[i])) continue;
arr.push(i + ':' + obj[i]);
}
return arr.join('; ');
}
function getElementOffset(element){
var left = 0, top = 0;
do{
left += element.offsetLeft;
top += element.offsetTop;
}while(element = element.offsetParent);
return {
left:left,
top:top
};
}
function getMouseOffset(event){
return {
x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft),
y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop)
};
}
function addEventListener(element,type,fun){
if(element.addEventListener){
element.addEventListener(type,function(event){
fun(event);
},false);
}else{
element.attachEvent('on'+type,function(){
fun(window.event);
});
}
}
function extend(subClass,supClass){
var fun = function(){},
prototype = subClass.prototype;
fun.prototype = supClass.prototype;
subClass.prototype = new fun();
for(var i in prototype){
subClass.prototype[i] = prototype[i];
}
subClass.$supClass = supClass;
subClass.prototype.$supClass = function(){
var supClass = arguments.callee.caller.$supClass;
if(typeof supClass == 'function'){
supClass.apply(this,arguments);
this.$supClass = supClass;
}
};
subClass.prototype.constructor = subClass;
return subClass;
}
/**
* WH类，高宽
*/
function WH(w,h){
this.w = w;
this.h = h;
}
WH.prototype = {
clone:function(){
return new WH(this.w,this.h);
}
};
/**
* xyz坐标类
*
*/
function XYZ(x,y,z){
this.x = x;
this.y = y;
this.z = z;
}
XYZ.prototype = {
clone:function(){
return new XYZ(this.x,this.y,this.z);
}
};
/**
* 场景类
*/
function Scene(options){
//属性
//dom
this.element = null;
//场景距离
this.fl = 500;
this.wh = null;
//基准z轴
this.baseZ = 0;
//中心消失点坐标
this.cX = 0;
this.cY = 0;
//中心消失点便宜
this.cXl = 0;
this.cYl = 0;
//偏移系数
this.ce = 1;
this.ThingList = [];
this.setOption(options);
this.init();
}
Scene.prototype = {
setOption:function(options){
for(var i in options){
switch(i){
case 'element':
this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i];
break;
}
}
},
init:function(){
if(!this.element) throw new Error(90,'not box');
this.wh = new WH(this.element.clientWidth,this.element.clientHeight);
this.bindEvent();
},
addThing:function(/* Thing */ thing){
this.ThingList.push(thing);
this.calcPosition(thing);
this.element.appendChild(thing.getElement(this));
},
//计算位置及大小
calcPosition:function(/*Thing*/ thing){
this.cX = this.element.clientWidth/2;
this.cY = this.element.clientHeight/2;
scale = this.fl/(this.fl + thing.xyz.z+this.baseZ);
if(scale <= 0){
thing.element.style.display = 'none';
return ;
}else{
thing.element.style.display = '';
}
thing.element.style.width = thing.wh.w * scale + 'px';
thing.element.style.height = thing.wh.h * scale + 'px';
thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px';
thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px';
thing.element.style.zIndex = Math.round(scale*1000);
thing.element.style.opacity = Math.min(scale*4.5,1);
thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')';
},
bindEvent:function(){
var self = this;
addEventListener(this.element,'mousemove',function(event){
self.onMouseMove(event);
});
var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel';
addEventListener(this.element,mousewheel,function(event){
self.onMouseWheel(event);
});
setInterval(function(){
self.onEnterFrame();
},40);
},
//在场景内移动事件
onMouseMove:function(event){
//场景的页面坐标
var po = getElementOffset(this.element);
//鼠标光标的页面坐标
var ev = getMouseOffset(event);
//场景内坐标
var x = ev.x-po.left;
var y = ev.y-po.top;
//中间消失点的坐标偏移差
this.cXl = (this.element.clientWidth/2 - x) * this.ce;
this.cYl = (this.element.clientHeight/2 - y) * this.ce;
this.reDraw();
},
onMouseWheel:function(event){
var code = event.wheelDelta || -event.detail;
if(code > 0){
this.baseZ -= 200;
}else{
this.baseZ += 200;
}
this.reDraw();
},
onEnterFrame:function(){
var thing;
for(var i=0; i<this.ThingList.length;i++){
thing = this.ThingList[i];
if(thing.isstatic) continue;
if(thing.xyz.y+1 >this.wh.h){
thing.xyz.y = 0;
}else{
thing.xyz.y += 20;
}
this.calcPosition(thing);
}
},
reDraw:function(){
for(var i=0 ; i<this.ThingList.length;i++){
this.calcPosition(this.ThingList[i]);
}
}
};
/**
* 物件抽象类
*/
function Thing(options){
this.scene = null;
this.wh = null;
this.xyz = new XYZ(10,10,0);
this.element = null;
this.isstatic = false;
this.setOption(options);
this.init();
}
Thing.prototype = {
setOption:function(options){
for(var i in options){
switch(i){
case 'wh':
case 'xyz':
case 'isstatic':
this[i] = options[i];
break;
default:
break;
}
}
},
init:function(){
this.element = this.draw();
this.element.style.position = 'absolute';
this.element.style.width = this.wh.w + 'px';
this.element.style.height = this.wh.h + 'px';
},
draw:function(){
throw new Error(998,'method do not realize!');
},
getElement:function(/*Scene*/ scene){
this.scene = scene;
return this.element;
}
};
function Snowflake(options){
this.$supClass(options);
}
Snowflake.prototype = {
draw:function(){
var img = document.createElement('img'),self = this;
loadimg = img.cloneNode(true);
loadimg.onload = function(){
//self.wh = new WH(this.width,this.height);
}
img.src = loadimg.src = [
'/upload/201201/20120105103804884.gif',
'/upload/201201/20120105103804792.gif',
'/upload/201201/20120105103804222.gif',
'/upload/201201/20120105103804213.gif',
'/upload/201201/20120105103804180.gif',
'/upload/201201/20120105103804588.gif'
][Math.round(Math.random()*5)];
return img;
}
};
extend(Snowflake,Thing);
var scene = new Scene({
'element':'box'
});
function tree(options){
this.$supClass(options);
}
tree.prototype = {
draw:function(){
var img = document.createElement('img'),self = this;
img.src = '/upload/201201/20120105103804497.gif';
return img;
}
};
extend(tree,Thing);
for(var i= 0,x,z ; i < 100 ;i++){
scene.addThing(new Snowflake({
wh:new WH(50,50),
xyz:new XYZ(Math.round(Math.random()*document.body.clientWidth),Math.round(Math.random()*document.body.clientHeight),Math.round(Math.random()*6000-1000))
}));
}
for(var i= 0,x,z ; i < 80 ;i++){
scene.addThing(new tree({
wh:new WH(500,800),
isstatic:true,
xyz:new XYZ(Math.round(Math.random()*document.body.clientWidth),Math.round(document.body.clientHeight),Math.round(Math.random()*6000-1000))
}));
}
for(var i= 0,x,z ; i < 80 ;i++){
scene.addThing(new tree({
wh:new WH(500,800),
isstatic:true,
xyz:new XYZ(Math.round(Math.random()*document.body.clientWidth*20),Math.round(document.body.clientHeight),Math.round(Math.random()*4000+3000))
}));
}
for(var i= 0,x,z ; i < 80 ;i++){
scene.addThing(new tree({
wh:new WH(500,800),
isstatic:true,
xyz:new XYZ(Math.round(Math.random()*-document.body.clientWidth*20),Math.round(document.body.clientHeight),Math.round(Math.random()*4000+3000))
}));
}
for(var i= 0,x,z ; i < 80 ;i++){
scene.addThing(new tree({
wh:new WH(500,800),
isstatic:true,
xyz:new XYZ(Math.round(Math.random()*-document.body.clientWidth*10),Math.round(document.body.clientHeight),Math.round(Math.random()*4000+1000))
}));
}
}(window);
</script>]<script>
void function(window){
var document = window.document;
var debug = document.getElementById('debug');
function ObjtoStr(obj){
var arr = [];
for(var i in obj){
if(isNaN(obj[i])) continue;
arr.push(i + ':' + obj[i]);
}
return arr.join('; ');
}
function getElementOffset(element){
var left = 0, top = 0;
do{
left += element.offsetLeft;
top += element.offsetTop;
}while(element = element.offsetParent);
return {
left:left,
top:top
};
}
function getMouseOffset(event){
return {
x:(event.pageX || event.clientX + document.body.scrollLeft - document.body.clientLeft),
y:(event.pageY || event.clientY + document.body.scrollTop - document.body.clientTop)
};
}
function addEventListener(element,type,fun){
if(element.addEventListener){
element.addEventListener(type,function(event){
fun(event);
},false);
}else{
element.attachEvent('on'+type,function(){
fun(window.event);
});
}
}
function extend(subClass,supClass){
var fun = function(){},
prototype = subClass.prototype;
fun.prototype = supClass.prototype;
subClass.prototype = new fun();
for(var i in prototype){
subClass.prototype[i] = prototype[i];
}
subClass.$supClass = supClass;
subClass.prototype.$supClass = function(){
var supClass = arguments.callee.caller.$supClass;
if(typeof supClass == 'function'){
supClass.apply(this,arguments);
this.$supClass = supClass;
}
};
subClass.prototype.constructor = subClass;
return subClass;
}
/**
* WH类，高宽
*/
function WH(w,h){
this.w = w;
this.h = h;
}
WH.prototype = {
clone:function(){
return new WH(this.w,this.h);
}
};
/**
* xyz坐标类
*
*/
function XYZ(x,y,z){
this.x = x;
this.y = y;
this.z = z;
}
XYZ.prototype = {
clone:function(){
return new XYZ(this.x,this.y,this.z);
}
};
/**
* 场景类
*/
function Scene(options){
//属性
//dom
this.element = null;
//场景距离
this.fl = 500;
this.wh = null;
//基准z轴
this.baseZ = 0;
//中心消失点坐标
this.cX = 0;
this.cY = 0;
//中心消失点便宜
this.cXl = 0;
this.cYl = 0;
//偏移系数
this.ce = 9;
this.ThingList = [];
this.setOption(options);
this.init();
}
Scene.prototype = {
setOption:function(options){
for(var i in options){
switch(i){
case 'element':
this[i] = typeof options[i] == 'string' ? document.getElementById(options[i]) : options[i];
break;
}
}
},
init:function(){
if(!this.element) throw new Error(90,'not box');
this.wh = new WH(this.element.clientWidth,this.element.clientHeight);
this.bindEvent();
},
addThing:function(/* Thing */ thing){
this.ThingList.push(thing);
this.calcPosition(thing);
this.element.appendChild(thing.getElement(this));
},
//计算位置及大小
calcPosition:function(/*Thing*/ thing){
this.cX = this.element.clientWidth/2;
this.cY = this.element.clientHeight/2;
scale = this.fl/(this.fl + thing.xyz.z+this.baseZ);
if(scale <= 0){
thing.element.style.display = 'none';
return ;
}else{
thing.element.style.display = '';
}
thing.element.style.width = thing.wh.w * scale + 'px';
thing.element.style.height = thing.wh.h * scale + 'px';
thing.element.style.top = (this.cY + ((thing.xyz.y+this.cYl-this.cY) * scale)) + 'px';
thing.element.style.left = (this.cX + ((thing.xyz.x+this.cXl-this.cX) * scale)) + 'px';
thing.element.style.zIndex = Math.round(scale*1000);
if(thing.isOpacity){
thing.element.style.opacity = Math.min(scale*4.5,1);
thing.element.style.filter = 'alpha(opacity='+(Math.min(scale*4.5,1) * 100)+')';
}
},
bindEvent:function(){
var self = this;
addEventListener(this.element,'mousemove',function(event){
self.onMouseMove(event);
});
var mousewheel = navigator.userAgent.indexOf('Firefox') > 0 ? 'DOMMouseScroll' : 'mousewheel';
addEventListener(this.element,mousewheel,function(event){
self.onMouseWheel(event);
});
},
//在场景内移动事件
onMouseMove:function(event){
//场景的页面坐标
var po = getElementOffset(this.element);
//鼠标光标的页面坐标
var ev = getMouseOffset(event);
//场景内坐标
var x = ev.x-po.left;
var y = ev.y-po.top;
//中间消失点的坐标偏移差
this.cXl = (this.element.clientWidth/2 - x) * this.ce;
this.cYl = (this.element.clientHeight/2 - y) * this.ce;
this.reDraw();
},
onMouseWheel:function(event){
var code = event.wheelDelta || -event.detail;
if(code > 0){
this.baseZ -= 200;
}else{
this.baseZ += 200;
}
this.reDraw();
},
reDraw:function(){
for(var i=0 ; i<this.ThingList.length;i++){
this.calcPosition(this.ThingList[i]);
}
}
};
/**
* 物件抽象类
*/
function Thing(options){
this.scene = null;
this.wh = new WH(10,10);
this.xyz = new XYZ(10,10,0);
this.element = null;
this.isstats = false;
this.isOpacity = true;
this.setOption(options);
this.init();
}
Thing.prototype = {
setOption:function(options){
for(var i in options){
switch(i){
case 'wh':
case 'xyz':
case 'isOpacity':
this[i] = options[i];
break;
default:
break;
}
}
},
init:function(){
this.element = this.draw();
this.element.style.position = 'absolute';
this.element.style.width = this.wh.w + 'px';
this.element.style.height = this.wh.h + 'px';
},
draw:function(){
throw new Error(998,'method do not realize!');
},
getElement:function(/*Scene*/ scene){
this.scene = scene;
return this.element;
}
};
function Diam(options){
this.$supClass(options);
}
Diam.prototype = {
draw:function(){
var img = document.createElement('img');
loadimg = img.cloneNode(true);
loadimg.onload = function(){
self.wh = new WH(this.width,this.height);
}
img.src = [
'/upload/201201/20120105103758227.jpg',
'/upload/201201/20120105103801969.jpg',
'/upload/201201/20120105103801207.jpg',
'/upload/201201/20120105103801956.jpg',
'/upload/201201/20120105103801732.jpg',
'/upload/201201/20120105103801346.jpg',
'/upload/201201/20120105103801362.jpg'
][Math.round(Math.random()*6)];
return img;
}
};
extend(Diam,Thing);
function Sky(options){
this.$supClass(options);
}
Sky.prototype = {
draw:function(){
var img = document.createElement('img');
img.src = [
'/upload/201201/20120105103801314.jpg',
'/upload/201201/20120105103803325.jpg',
'/upload/201201/20120105103803314.jpg',
'/upload/201201/20120105103803146.jpg'
][Math.round(Math.random()*3)];
return img;
}
};
extend(Sky,Thing);
var scene = new Scene({
'element':'box'
});
for(var i= 20,x,z ; i < 40 ;i++){
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500;
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500;
scene.addThing(new Diam({
wh:new WH(100,100),
xyz:new XYZ(x,y,3000)
}));
}
for(var i=11,x,z ; i < 31 ;i++){
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+1680;
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500;
scene.addThing(new Diam({
wh:new WH(100,100),
xyz:new XYZ(x,y,3000)
}));
}
for(var i=9,x,z ; i < 40 ;i++){
x = i*50 -890;
y = i*60 + 200;
scene.addThing(new Diam({
wh:new WH(100,100),
xyz:new XYZ(x,y,3000)
}));
}
for(var i=9,x,z ; i < 40 ;i++){
x = i*-50 +3090;
y = i*60 + 200;
scene.addThing(new Diam({
wh:new WH(100,100),
xyz:new XYZ(x,y,3000)
}));
}
for(var i= 20,x,z ; i < 40 ;i++){
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500;
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500;
scene.addThing(new Diam({
wh:new WH(100,100),
xyz:new XYZ(x,y,5000)
}));
}
for(var i=11,x,z ; i < 31 ;i++){
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+1680;
y = (Math.cos(Math.PI*2*(i/50)) * 1000)+500;
scene.addThing(new Diam({
wh:new WH(100,100),
xyz:new XYZ(x,y,5000)
}));
}
for(var i=9,x,z ; i < 40 ;i++){
x = i*50 -890;
y = i*60 + 200;
scene.addThing(new Diam({
wh:new WH(100,100),
xyz:new XYZ(x,y,5000)
}));
}
for(var i=9,x,z ; i < 40 ;i++){
x = i*-50 +3090;
y = i*60 + 200;
scene.addThing(new Diam({
wh:new WH(100,100),
xyz:new XYZ(x,y,5000)
}));
}
scene.addThing(new Sky({
wh:new WH(160000,120000),
xyz:new XYZ(-80000,-60000,54000),
isOpacity:false
}));
/*
for(var i= 0,x,z ; i < 50 ;i++){
x = (Math.sin(Math.PI*2*(i/50)) * 1000)+500;
z = (Math.cos(Math.PI*2*(i/50)) * 1000)+3000;
scene.addThing(new Diam({
wh:new WH(100,100),
xyz:new XYZ(x,document.body.clientHeight/2+200,z)
}));
}*/
}(window);
</script>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
