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.init = function(){ var url = "https://s3.amazonaws.com/luckyplop/f5b2c20e602cdfc86383910f294dcf23d91fa956.png" var img = new Image () img.onload = function(){ base.load(img) } img.src = url if (img.complete) base.load(img) } base.load = 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, img) }) }) } function new_image (wall, img) { var x, z if (wall.side & FRONT_BACK && wall.rect.x.length() < img.width) { return } if (wall.side & LEFT_RIGHT && wall.rect.y.length() < img.width) { return } switch (wall.side) { case FRONT: x = wall.rect.x.a + wall.rect.x.length()/2 z = wall.rect.y.a + 10 break case BACK: x = wall.rect.x.b - wall.rect.x.length()/2 z = wall.rect.y.b - 10 break case LEFT: x = wall.rect.x.a + 10 z = wall.rect.y.a + wall.rect.y.length()/2 break case RIGHT: x = wall.rect.x.b - 10 z = wall.rect.y.b - wall.rect.y.length()/2 break } var mx_img = new MX.Image({ src: img.src, x: x, y: 70, z: z, scale: 300/img.naturalWidth, rotationY: wall_rotation[ wall.side ], backface: false, }) scene.add(mx_img) // https://s3.amazonaws.com/luckyplop/f5b2c20e602cdfc86383910f294dcf23d91fa956.png var x = 0, y = 0, z = 0, ry = 3 * PI/4 my_mouse = new mouse ({ el: mx_img.el }) my_mouse.tube.on("down", function(e, cursor){ console.log("down") x = mx_img.x y = mx_img.y z = mx_img.z }) my_mouse.tube.on("drag", function(e, cursor){ console.log("drag") mx_img.y = y - cursor.y.magnitude() switch (wall.side) { case FRONT: mx_img.x = x + cursor.x.magnitude() break case BACK: mx_img.x = x - cursor.x.magnitude() break case LEFT: mx_img.z = z - cursor.x.magnitude() break case RIGHT: mx_img.z = z + cursor.x.magnitude() break } }) my_mouse.tube.on("up", function(e, cursor){ }) } return base }