html3D创意相册附源码

} else this.visible = false;

return true;

}

return {

// — load data ----

load : function (data) {

window.addEventListener(‘load’, function () {

ge1doot.loadJS(

“js/imageTransform3D.js”,

init, data

);

}, false);

}

}

})().load({

imgdata:[

// north

{img:‘imgs/1.jpg’, x:-1000, y:0, z:1500, nx:0, nz:1},

{img:‘imgs/2.jpg’, x:0, y:0, z:1500, nx:0, nz:1},

{img:‘imgs/3.jpg’, x:1000, y:0, z:1500, nx:0, nz:1},

// east

{img:‘imgs/4.jpg’, x:1500, y:0, z:1000, nx:-1, nz:0},

{img:‘imgs/5.jpg’, x:1500, y:0, z:0, nx:-1, nz:0},

{img:‘imgs/6.jpg’, x:1500, y:0, z:-1000, nx:-1, nz:0},

// south

{img:‘imgs/7.jpg’, x:1000, y:0, z:-1500, nx:0, nz:-1},

{img:‘imgs/8.jpg’, x:0, y:0, z:-1500, nx:0, nz:-1},

{img:‘imgs/9.jpg’, x:-1000, y:0, z:-1500, nx:0, nz:-1},

// west

{img:‘imgs/10.jpg’, x:-1500, y:0, z:-1000, nx:1, nz:0},

{img:‘imgs/11.jpg’, x:-1500, y:0, z:0, nx:1, nz:0},

{img:‘imgs/12.jpg’, x:-1500, y:0, z:1000, nx:1, nz:0}

],

structure:[

{

// wall

fill: {r:255, g:255, b:255, light:1},

x: [-1001,-490,-490,-1001],

z: [-500,-500,-500,-500],

y: [500,500,-500,-500]

},{

// wall

fill: {r:255, g:255, b:255, light:1},

x: [-501,2,2,-500],

z: [-500,-500,-500,-500],

y: [500,500,-500,-500]

},{

// wall

fill: {r:255, g:255, b:255, light:1},

x: [0,502,502,0],

z: [-500,-500,-500,-500],

y: [500,500,-500,-500]

},{

// wall

fill: {r:255, g:255, b:255, light:1},

x: [490,1002,1002,490],

z: [-500,-500,-500,-500],

y: [500,500,-500,-500]

},{

// shadow

fill: {r:0, g:0, b:0, a:0.2},

x: [-420,420,420,-420],

z: [-500,-500,-500,-500],

y: [150, 150,-320,-320]

},{

// shadow

fill: {r:0, g:0, b:0, a:0.2},

x: [-20,20,20,-20],

z: [-500,-500,-500,-500],

y: [250, 250,150,150]

},{

// shadow

fill: {r:0, g:0, b:0, a:0.2},

x: [-20,20,20,-20],

z: [-500,-500,-500,-500],

y: [-320, -320,-500,-500]

},{

// shadow

fill: {r:0, g:0, b:0, a:0.2},

x: [-20,20,10,-10],

z: [-500,-500,-100,-100],

y: [-500, -500,-500,-500]

},{

// base

fill: {r:32, g:32, b:32},

x: [-50,50,50,-50],

z: [-150,-150,-50,-50],

y: [-500,-500,-500,-500]

},{

// support

fill: {r:16, g:16, b:16},

x: [-10,10,10,-10],

z: [-100,-100,-100,-100],

y: [300,300,-500,-500]

},{

// frame

fill: {r:255, g:255, b:255},

x: [-320,-320,-320,-320],

z: [0,-20,-20,0],

y: [-190,-190,190,190]

},{

// frame

fill: {r:255, g:255, b:255},

x: [320,320,320,320],

z: [0,-20,-20,0],

y: [-190,-190,190,190]

},

{img:true},

{

// ceilingLight

fill: {r:255, g:128, b:0},

x: [-50,50,50,-50],

z: [450,450,550,550],

y: [500,500,500,500]

},{

// groundLight

fill: {r:255, g:128, b:0},

x: [-50,50,50,-50],

z: [450,450,550,550],

y: [-500,-500,-500,-500]

}

],

options:{

imagesPath: “”

}

});

你的浏览器不支持HTML5画布技术，请使用谷歌浏览器。

js文件目录：

ge1doot.js

var ge1doot = ge1doot || {

json: null,

screen: null,

pointer: null,

camera: null,

loadJS: function (url, callback, data) {

if (typeof url == “string”) url = [url];

var load = function (src) {

var script = document.createElement(“script”);

if (callback) {

if (script.readyState){

script.onreadystatechange = function () {

if (script.readyState == “loaded” || script.readyState == “complete”){

script.onreadystatechange = null;

if (–n === 0) callback(data || false);

}

}

} else {

script.onload = function() {

if (–n === 0) callback(data || false);

}

}

}

script.src = src;

document.getElementsByTagName(“head”)[0].appendChild(script);

}

for (var i = 0, n = url.length; i < n; i++) load(url[i]);

}

}

// ===== html/canvas container =====

ge1doot.Screen = function (setup) {

ge1doot.screen = this;

this.elem = document.getElementById(setup.container) || setup.container;

this.ctx = this.elem.tagName == “CANVAS” ? this.elem.getContext(“2d”) : false;

this.style = this.elem.style;

this.left = 0;

this.top = 0;

this.width = 0;

this.height = 0;

this.cursor = “default”;

this.setup = setup;

this.resize = function () {

var o = this.elem;

this.width = o.offsetWidth;