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 ({ use_offset: false }) base.init = function(){ var urls = [ "http://okfocus.s3.amazonaws.com/office/ducks/duck1.jpg", "http://okfocus.s3.amazonaws.com/office/ducks/duck2.jpg", "http://okfocus.s3.amazonaws.com/office/ducks/duck3.jpg", "http://okfocus.s3.amazonaws.com/office/ducks/duck4.jpg", "http://okfocus.s3.amazonaws.com/office/ducks/duck5.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, null) 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 bounds = wall.bounds_for(img) document.body.classList.add("dragging") }) 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) // if (this.side & FRONT_BACK) { // major_axis = this.rect.x // minor_axis = this.rect.y // } // else { // major_axis = this.rect.y // minor_axis = this.rect.x // } x = center.a z = center.b cursor.a = cursor.b mx_img.move({ x: center.a, z: center.b, rotationY: wall_rotation[ new_wall.side ] }) 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 document.body.classList.remove("dragging") }) } return base }