var wall_rotation = {} wall_rotation[FRONT] = PI wall_rotation[BACK] = 0 wall_rotation[LEFT] = HALF_PI wall_rotation[RIGHT] = -HALF_PI var scenery = new function(){ var base = this; base.mouse = new mouse () base.init = function(){ var urls = [ "http://www.donedwardsart.com/upload/2008-4-18_resting%20wood%20duck.jpg", "http://cdn.dailypainters.com/paintings/_four_quackers__baby_duck_oil_painting_by_texas_ar_3d3162fd43295d059068ae1c204367e3.jpg", "http://2.bp.blogspot.com/-apEunnES6wU/UGdc6skZqzI/AAAAAAAAB3k/D6yO6llpFcg/s1600/Sunny+Side+Duck.JPG", "http://imagecache.artistrising.com/artwork/lrg//5/559/5UD2000A.jpg", "http://media-cache-ec0.pinimg.com/736x/fc/a7/31/fca731130ffb964a434fb90edecd22c3.jpg", ] var loader = new Loader(function(){ base.load(loader.images) }) loader.preloadImages(urls) } base.load = function(images){ images.forEach(function(img){ img.width = 300 img.height = ~~(300 * img.naturalHeight/img.naturalWidth) }) clipper.rooms.forEach(function(room){ room.walls.forEach(function(wall){ new_image(wall, choice(images)) }) }) } function new_image (wall, img) { var x, z if (! wall.fits(img)) return var mx_img = new MX.Image({ src: img.src, x: 0, y: clipper.rooms[wall.room].height/2 - img.height/2 - 20, z: 0, scale: 300/img.naturalWidth, rotationY: 0, backface: false, }) var center = wall.center_for(img) mx_img.move({ x: center.a, z: center.b, rotationY: wall_rotation[ wall.side ] }) scene.add(mx_img) // https://s3.amazonaws.com/luckyplop/f5b2c20e602cdfc86383910f294dcf23d91fa956.png var x = 0, y = 0, z = 0, bounds // should be proportional to distance from wall var cursor_amp = 1.5 var dragging = false base.mouse.bind_el(mx_img.el) base.mouse.tube.on("down", function(e, cursor){ if (e.target != mx_img.el) return; dragging = true x = mx_img.x y = mx_img.y z = mx_img.z mx_img.el.style.pointerEvents = "none" bounds = wall.bounds_for(img) }) base.mouse.tube.on("enter", function(e, new_wall, cursor){ if (! dragging) return if (new_wall.uid == wall.uid) return if (! new_wall.fits(img)) return bounds = new_wall.bounds_for(img) center = new_wall.center_for(img, cursor.x.magnitude()) mx_img.move({ x: center.a, z: center.b, rotationY: wall_rotation[ new_wall.side ] }) cursor.x.invert() wall = new_wall }) base.mouse.tube.on("drag", function(e, cursor){ if (! dragging) return mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp ) switch (wall.side) { case FRONT: mx_img.x = bounds.x.clamp( x + cursor.x.magnitude()*cursor_amp ) break case BACK: mx_img.x = bounds.x.clamp( x - cursor.x.magnitude()*cursor_amp ) break case LEFT: mx_img.z = bounds.x.clamp( z - cursor.x.magnitude()*cursor_amp ) break case RIGHT: mx_img.z = bounds.x.clamp( z + cursor.x.magnitude()*cursor_amp ) break } }) base.mouse.tube.on("up", function(e, cursor){ dragging = false mx_img.el.style.pointerEvents = "auto" }) } return base }