1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
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
}
|
