// PRELOAD PANO AND BUTTON IMAGES var img = new Image(); img.src = 'static/webapp/images/blank.png'; // WRITE VR SCENES FOR ALL HIGHLIGHTS // SCENE LOADER function load_scene_42() { // DATA HOME_SCENE = load_scene_42; BACK_SCENE = load_scene_42; NEXT_SCENE = load_scene_42; PREV_SCENE = load_scene_42; CURRENT_SCENE = load_scene_42; SCENE_TITLE = '01 | Prellenkirchen wine cellars'; SCENE_NUMBER = '01'; SCENE_LEVEL = 1; $("#breadcrumbs-vr h1").text(SCENE_TITLE); $("#number-button").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '.png'); $("#number-button-active").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '-active.png'); PANO_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01.jpg'; PRELOAD_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01.jpg'; // SETTINGS PANO_ALPHA = 0; CAMERA_FOV = 70; AUDIO_FILE = 'static/webapp/dummy.mp3'; ROTATE_OBJECT = null; ROTATE_ALPHA = 0; LIGHT_INTENSITY_HEMI = 0.9; LIGHT_INTENSITY_SPOT = 0.5; CONTROLS_DOWN = -12.0; ANGLE_CONTROLS_FIXED = 70; INVERT_CONTROLS = false; var pano_radius = 480; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js // HIGHLIGHT IMAGE var map_w = 1600; var map_h = 1600; var default_scale_x = 0.55; // for 1600px width var default_scale_y = 0.4; // for 1200px height // adjust width to apect ratio of image var scale_x = default_scale_x / ( 1600/1200 * map_h/map_w ); // fix the height var scale_y = default_scale_y; // move closer by scaling x var pano_scale_x = 0.75; // adjust zoom and move controls UP CAMERA_FOV = 25; CONTROLS_DOWN = -46.0; ANGLE_CONTROLS_FIXED = 75; var pano_radius = 480; var button_radius = 400; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js var alpha_0 = -Math.PI/4*scale_x; var alpha_t = Math.PI/2*scale_x; var beta_0 = Math.PI/2 - Math.PI/4*scale_y; var beta_t = Math.PI/2*scale_y; var map = new THREE.TextureLoader().load( PANO_IMAGE, function() { postLoadScene(); } ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: false } ); var pano = new THREE.Mesh(new THREE.SphereGeometry(pano_radius, 32, 32, alpha_0, alpha_t, beta_0, beta_t), material); pano.scale.x = -1 * pano_scale_x; pano.position.x = 0; pano.position.y = 0; pano.position.z = 0; pano.rotation.y = PANO_ALPHA / 180.0 * Math.PI; scene.add(pano); objects.push(pano); textures.push( map ); materials.push(material); PANO_OBJECT = pano; PANO_OBJECT.POST_LOAD_IMAGE = undefined; PANO_MODE = 'FLAT'; // DETAIL BUTTONS var radius = 400; var button_size = 50 * Math.pow(CAMERA_FOV / 70, 1.125); // adjust for zoom level var c = [597, 701]; var alpha = ( c[0] - map_w / 2 ) / map_w * alpha_t; var beta = ( c[1] - map_h / 2 ) / map_h * beta_t var z = button_radius * Math.sin( alpha ) - button_size / 2; var y = - button_radius * Math.sin( beta ) + button_size / 2; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5) * pano_scale_x; gamma = Math.PI/2 - alpha; // RENDER BUTTON var scale = 0.875 + 1.0/6 * Math.pow(CAMERA_FOV / 70, 1.125); // adjust for zoom level var target = load_scene_43; var marker_image = 'media/carnuntum/_generated/43/marker-en-icon-title.png'; var tilt = 0; var w = 50 * 1.5; var h = 50 * 1.5; var tilt = 0; var w = 50 * 0.65; var h = 50 * 0.65; var w_label = 160*0.65; var h_label = 80*0.65; var space = 10; // MARKER var map = new THREE.TextureLoader().load( marker_image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( w*scale, h*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( tilt / 180.0 * Math.PI ) ); object.position.x = x; object.position.y = y; object.position.z = z; object.rotation.y = gamma; scene.add( object ); objects.push( object ); textures.push( map ); materials.push(material); object.detail_button = true; object.zoom_button = false; object.navigate_target = target; object.label = 'Prellenkirchen wine cellars'; object.button_type = 'D'; // BUTTON TEXT var radius = 400; var button_size = 50 * Math.pow(CAMERA_FOV / 70, 1.125); // adjust for zoom level var c = [1105, 811]; var alpha = ( c[0] - map_w / 2 ) / map_w * alpha_t; var beta = ( c[1] - map_h / 2 ) / map_h * beta_t var z = button_radius * Math.sin( alpha ) - button_size / 2; var y = - button_radius * Math.sin( beta ) + button_size / 2; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5) * pano_scale_x; gamma = Math.PI/2 - alpha; // RENDER BUTTON var scale = 0.875 + 1.0/6 * Math.pow(CAMERA_FOV / 70, 1.125); // adjust for zoom level var target = load_scene_44; var marker_image = 'media/carnuntum/_generated/44/marker-en-icon-title.png'; var tilt = 0; var w = 50 * 1.5; var h = 50 * 1.5; var tilt = 0; var w = 50 * 0.65; var h = 50 * 0.65; var w_label = 160*0.65; var h_label = 80*0.65; var space = 10; // MARKER var map = new THREE.TextureLoader().load( marker_image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( w*scale, h*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( tilt / 180.0 * Math.PI ) ); object.position.x = x; object.position.y = y; object.position.z = z; object.rotation.y = gamma; scene.add( object ); objects.push( object ); textures.push( map ); materials.push(material); object.detail_button = true; object.zoom_button = false; object.navigate_target = target; object.label = 'Prince’s animal park'; object.button_type = 'D'; // BUTTON TEXT var radius = 400; var button_size = 50 * Math.pow(CAMERA_FOV / 70, 1.125); // adjust for zoom level var c = [1216, 435]; var alpha = ( c[0] - map_w / 2 ) / map_w * alpha_t; var beta = ( c[1] - map_h / 2 ) / map_h * beta_t var z = button_radius * Math.sin( alpha ) - button_size / 2; var y = - button_radius * Math.sin( beta ) + button_size / 2; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5) * pano_scale_x; gamma = Math.PI/2 - alpha; // RENDER BUTTON var scale = 0.875 + 1.0/6 * Math.pow(CAMERA_FOV / 70, 1.125); // adjust for zoom level var target = load_scene_45; var marker_image = 'media/carnuntum/_generated/45/marker-en-icon-title.png'; var tilt = 0; var w = 50 * 1.5; var h = 50 * 1.5; var tilt = 0; var w = 50 * 0.65; var h = 50 * 0.65; var w_label = 160*0.65; var h_label = 80*0.65; var space = 10; // MARKER var map = new THREE.TextureLoader().load( marker_image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( w*scale, h*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( tilt / 180.0 * Math.PI ) ); object.position.x = x; object.position.y = y; object.position.z = z; object.rotation.y = gamma; scene.add( object ); objects.push( object ); textures.push( map ); materials.push(material); object.detail_button = true; object.zoom_button = false; object.navigate_target = target; object.label = 'Wine cellar district, Edelstal'; object.button_type = 'D'; // BUTTON TEXT var radius = 400; var button_size = 50 * Math.pow(CAMERA_FOV / 70, 1.125); // adjust for zoom level var c = [651, 128]; var alpha = ( c[0] - map_w / 2 ) / map_w * alpha_t; var beta = ( c[1] - map_h / 2 ) / map_h * beta_t var z = button_radius * Math.sin( alpha ) - button_size / 2; var y = - button_radius * Math.sin( beta ) + button_size / 2; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5) * pano_scale_x; gamma = Math.PI/2 - alpha; // RENDER BUTTON var scale = 0.875 + 1.0/6 * Math.pow(CAMERA_FOV / 70, 1.125); // adjust for zoom level var target = load_scene_46; var marker_image = 'media/carnuntum/_generated/46/marker-en-icon-title.png'; var tilt = 0; var w = 50 * 1.5; var h = 50 * 1.5; var tilt = 0; var w = 50 * 0.65; var h = 50 * 0.65; var w_label = 160*0.65; var h_label = 80*0.65; var space = 10; // MARKER var map = new THREE.TextureLoader().load( marker_image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( w*scale, h*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( tilt / 180.0 * Math.PI ) ); object.position.x = x; object.position.y = y; object.position.z = z; object.rotation.y = gamma; scene.add( object ); objects.push( object ); textures.push( map ); materials.push(material); object.detail_button = true; object.zoom_button = false; object.navigate_target = target; object.label = 'Römerquelle'; object.button_type = 'D'; // BUTTON TEXT var radius = 400; var button_size = 50 * Math.pow(CAMERA_FOV / 70, 1.125); // adjust for zoom level var c = [191, 463]; var alpha = ( c[0] - map_w / 2 ) / map_w * alpha_t; var beta = ( c[1] - map_h / 2 ) / map_h * beta_t var z = button_radius * Math.sin( alpha ) - button_size / 2; var y = - button_radius * Math.sin( beta ) + button_size / 2; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5) * pano_scale_x; gamma = Math.PI/2 - alpha; // RENDER BUTTON var scale = 0.875 + 1.0/6 * Math.pow(CAMERA_FOV / 70, 1.125); // adjust for zoom level var target = load_scene_47; var marker_image = 'media/carnuntum/_generated/47/marker-en-icon-title.png'; var tilt = 0; var w = 50 * 1.5; var h = 50 * 1.5; var tilt = 0; var w = 50 * 0.65; var h = 50 * 0.65; var w_label = 160*0.65; var h_label = 80*0.65; var space = 10; // MARKER var map = new THREE.TextureLoader().load( marker_image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( w*scale, h*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( tilt / 180.0 * Math.PI ) ); object.position.x = x; object.position.y = y; object.position.z = z; object.rotation.y = gamma; scene.add( object ); objects.push( object ); textures.push( map ); materials.push(material); object.detail_button = true; object.zoom_button = false; object.navigate_target = target; object.label = 'Spitzerberg'; object.button_type = 'D'; // BUTTON TEXT var radius = 400; var button_size = 50 * Math.pow(CAMERA_FOV / 70, 1.125); // adjust for zoom level var c = [558, 969]; var alpha = ( c[0] - map_w / 2 ) / map_w * alpha_t; var beta = ( c[1] - map_h / 2 ) / map_h * beta_t var z = button_radius * Math.sin( alpha ) - button_size / 2; var y = - button_radius * Math.sin( beta ) + button_size / 2; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5) * pano_scale_x; gamma = Math.PI/2 - alpha; // RENDER BUTTON var scale = 0.875 + 1.0/6 * Math.pow(CAMERA_FOV / 70, 1.125); // adjust for zoom level var target = load_scene_48; var marker_image = 'media/carnuntum/_generated/48/marker-en-icon-title.png'; var tilt = 0; var w = 50 * 1.5; var h = 50 * 1.5; var tilt = 0; var w = 50 * 0.65; var h = 50 * 0.65; var w_label = 160*0.65; var h_label = 80*0.65; var space = 10; // MARKER var map = new THREE.TextureLoader().load( marker_image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( w*scale, h*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( tilt / 180.0 * Math.PI ) ); object.position.x = x; object.position.y = y; object.position.z = z; object.rotation.y = gamma; scene.add( object ); objects.push( object ); textures.push( map ); materials.push(material); object.detail_button = true; object.zoom_button = false; object.navigate_target = target; object.label = 'Prellenkirchen wind farm'; object.button_type = 'D'; // BUTTON TEXT // PANORAMA // CAMERA var height = 0; var radius = 1; var angle = 0; var camera_target = new THREE.Vector3(0,0,0); camera_target.x = radius * Math.cos(angle / 180.0 * Math.PI); camera_target.y = height; camera_target.z = radius * Math.sin(angle / 180.0 * Math.PI); camera.lookAt( new THREE.Vector3(camera_target.x*100, 0, camera_target.z*100) ); camera.position.set(-camera_target.x, 0, -camera_target.z); camera.fov = CAMERA_FOV; // 3D MODELS // STEREO IMAGE (see apply_stereo() for supported modes) PANO_OBJECT.stereo_mode = 'undefined'; apply_stereo(); } // SCENE LOADER function load_scene_43() { // DATA HOME_SCENE = load_scene_42; BACK_SCENE = load_scene_42; NEXT_SCENE = load_scene_42; PREV_SCENE = load_scene_42; CURRENT_SCENE = load_scene_43; SCENE_TITLE = '01 | Prellenkirchen wine cellars'; SCENE_NUMBER = '01'; SCENE_LEVEL = 2; $("#breadcrumbs-vr h1").text(SCENE_TITLE); $("#number-button").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '.png'); $("#number-button-active").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '-active.png'); PANO_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01-detail-01.jpg'; PRELOAD_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01-detail-01.jpg'; // SETTINGS PANO_ALPHA = 0; CAMERA_FOV = 70; AUDIO_FILE = 'media/carnuntum/vc_kellergasse/audio/en/highlight-01-detail-01.mp3'; ROTATE_OBJECT = null; ROTATE_ALPHA = 0; LIGHT_INTENSITY_HEMI = 0.9; LIGHT_INTENSITY_SPOT = 0.5; CONTROLS_DOWN = -12.0; ANGLE_CONTROLS_FIXED = 70; INVERT_CONTROLS = false; var pano_radius = 480; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js // HIGHLIGHT IMAGE var map_w = 1600; var map_h = 1600; var default_scale_x = 0.55; // for 1600px width var default_scale_y = 0.4; // for 1200px height // adjust width to apect ratio of image var scale_x = default_scale_x / ( 1600/1200 * map_h/map_w ); // fix the height var scale_y = default_scale_y; // move closer by scaling x var pano_scale_x = 0.75; // adjust zoom and move controls UP CAMERA_FOV = 25; CONTROLS_DOWN = -46.0; ANGLE_CONTROLS_FIXED = 75; var pano_radius = 480; var button_radius = 400; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js var alpha_0 = -Math.PI/4*scale_x; var alpha_t = Math.PI/2*scale_x; var beta_0 = Math.PI/2 - Math.PI/4*scale_y; var beta_t = Math.PI/2*scale_y; var map = new THREE.TextureLoader().load( PANO_IMAGE, function() { postLoadScene(); } ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: false } ); var pano = new THREE.Mesh(new THREE.SphereGeometry(pano_radius, 32, 32, alpha_0, alpha_t, beta_0, beta_t), material); pano.scale.x = -1 * pano_scale_x; pano.position.x = 0; pano.position.y = 0; pano.position.z = 0; pano.rotation.y = PANO_ALPHA / 180.0 * Math.PI; scene.add(pano); objects.push(pano); textures.push( map ); materials.push(material); PANO_OBJECT = pano; PANO_OBJECT.POST_LOAD_IMAGE = undefined; PANO_MODE = 'FLAT'; // DETAIL BUTTONS // PANORAMA // CAMERA var height = 0; var radius = 1; var angle = 0; var camera_target = new THREE.Vector3(0,0,0); camera_target.x = radius * Math.cos(angle / 180.0 * Math.PI); camera_target.y = height; camera_target.z = radius * Math.sin(angle / 180.0 * Math.PI); camera.lookAt( new THREE.Vector3(camera_target.x*100, 0, camera_target.z*100) ); camera.position.set(-camera_target.x, 0, -camera_target.z); camera.fov = CAMERA_FOV; // 3D MODELS // STEREO IMAGE (see apply_stereo() for supported modes) PANO_OBJECT.stereo_mode = 'undefined'; apply_stereo(); } // SCENE LOADER function load_scene_44() { // DATA HOME_SCENE = load_scene_42; BACK_SCENE = load_scene_42; NEXT_SCENE = load_scene_42; PREV_SCENE = load_scene_42; CURRENT_SCENE = load_scene_44; SCENE_TITLE = '01 | Prince’s animal park'; SCENE_NUMBER = '01'; SCENE_LEVEL = 2; $("#breadcrumbs-vr h1").text(SCENE_TITLE); $("#number-button").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '.png'); $("#number-button-active").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '-active.png'); PANO_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01-detail-02.jpg'; PRELOAD_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01-detail-02.jpg'; // SETTINGS PANO_ALPHA = 0; CAMERA_FOV = 70; AUDIO_FILE = 'media/carnuntum/vc_kellergasse/audio/en/highlight-01-detail-02.mp3'; ROTATE_OBJECT = null; ROTATE_ALPHA = 0; LIGHT_INTENSITY_HEMI = 0.9; LIGHT_INTENSITY_SPOT = 0.5; CONTROLS_DOWN = -12.0; ANGLE_CONTROLS_FIXED = 70; INVERT_CONTROLS = false; var pano_radius = 480; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js // HIGHLIGHT IMAGE var map_w = 2048; var map_h = 1238; var default_scale_x = 0.55; // for 1600px width var default_scale_y = 0.4; // for 1200px height // adjust width to apect ratio of image var scale_x = default_scale_x / ( 1600/1200 * map_h/map_w ); // fix the height var scale_y = default_scale_y; // move closer by scaling x var pano_scale_x = 0.75; // adjust zoom and move controls UP CAMERA_FOV = 25; CONTROLS_DOWN = -46.0; ANGLE_CONTROLS_FIXED = 75; var pano_radius = 480; var button_radius = 400; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js var alpha_0 = -Math.PI/4*scale_x; var alpha_t = Math.PI/2*scale_x; var beta_0 = Math.PI/2 - Math.PI/4*scale_y; var beta_t = Math.PI/2*scale_y; var map = new THREE.TextureLoader().load( PANO_IMAGE, function() { postLoadScene(); } ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: false } ); var pano = new THREE.Mesh(new THREE.SphereGeometry(pano_radius, 32, 32, alpha_0, alpha_t, beta_0, beta_t), material); pano.scale.x = -1 * pano_scale_x; pano.position.x = 0; pano.position.y = 0; pano.position.z = 0; pano.rotation.y = PANO_ALPHA / 180.0 * Math.PI; scene.add(pano); objects.push(pano); textures.push( map ); materials.push(material); PANO_OBJECT = pano; PANO_OBJECT.POST_LOAD_IMAGE = undefined; PANO_MODE = 'FLAT'; // DETAIL BUTTONS // PANORAMA // CAMERA var height = 0; var radius = 1; var angle = 0; var camera_target = new THREE.Vector3(0,0,0); camera_target.x = radius * Math.cos(angle / 180.0 * Math.PI); camera_target.y = height; camera_target.z = radius * Math.sin(angle / 180.0 * Math.PI); camera.lookAt( new THREE.Vector3(camera_target.x*100, 0, camera_target.z*100) ); camera.position.set(-camera_target.x, 0, -camera_target.z); camera.fov = CAMERA_FOV; // 3D MODELS // STEREO IMAGE (see apply_stereo() for supported modes) PANO_OBJECT.stereo_mode = 'undefined'; apply_stereo(); } // SCENE LOADER function load_scene_45() { // DATA HOME_SCENE = load_scene_42; BACK_SCENE = load_scene_42; NEXT_SCENE = load_scene_42; PREV_SCENE = load_scene_42; CURRENT_SCENE = load_scene_45; SCENE_TITLE = '01 | Wine cellar district, Edelstal'; SCENE_NUMBER = '01'; SCENE_LEVEL = 2; $("#breadcrumbs-vr h1").text(SCENE_TITLE); $("#number-button").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '.png'); $("#number-button-active").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '-active.png'); PANO_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01-detail-03.jpg'; PRELOAD_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01-detail-03.jpg'; // SETTINGS PANO_ALPHA = 0; CAMERA_FOV = 70; AUDIO_FILE = 'media/carnuntum/vc_kellergasse/audio/en/highlight-01-detail-03.mp3'; ROTATE_OBJECT = null; ROTATE_ALPHA = 0; LIGHT_INTENSITY_HEMI = 0.9; LIGHT_INTENSITY_SPOT = 0.5; CONTROLS_DOWN = -12.0; ANGLE_CONTROLS_FIXED = 70; INVERT_CONTROLS = false; var pano_radius = 480; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js // HIGHLIGHT IMAGE var map_w = 1600; var map_h = 1600; var default_scale_x = 0.55; // for 1600px width var default_scale_y = 0.4; // for 1200px height // adjust width to apect ratio of image var scale_x = default_scale_x / ( 1600/1200 * map_h/map_w ); // fix the height var scale_y = default_scale_y; // move closer by scaling x var pano_scale_x = 0.75; // adjust zoom and move controls UP CAMERA_FOV = 25; CONTROLS_DOWN = -46.0; ANGLE_CONTROLS_FIXED = 75; var pano_radius = 480; var button_radius = 400; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js var alpha_0 = -Math.PI/4*scale_x; var alpha_t = Math.PI/2*scale_x; var beta_0 = Math.PI/2 - Math.PI/4*scale_y; var beta_t = Math.PI/2*scale_y; var map = new THREE.TextureLoader().load( PANO_IMAGE, function() { postLoadScene(); } ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: false } ); var pano = new THREE.Mesh(new THREE.SphereGeometry(pano_radius, 32, 32, alpha_0, alpha_t, beta_0, beta_t), material); pano.scale.x = -1 * pano_scale_x; pano.position.x = 0; pano.position.y = 0; pano.position.z = 0; pano.rotation.y = PANO_ALPHA / 180.0 * Math.PI; scene.add(pano); objects.push(pano); textures.push( map ); materials.push(material); PANO_OBJECT = pano; PANO_OBJECT.POST_LOAD_IMAGE = undefined; PANO_MODE = 'FLAT'; // DETAIL BUTTONS // PANORAMA // CAMERA var height = 0; var radius = 1; var angle = 0; var camera_target = new THREE.Vector3(0,0,0); camera_target.x = radius * Math.cos(angle / 180.0 * Math.PI); camera_target.y = height; camera_target.z = radius * Math.sin(angle / 180.0 * Math.PI); camera.lookAt( new THREE.Vector3(camera_target.x*100, 0, camera_target.z*100) ); camera.position.set(-camera_target.x, 0, -camera_target.z); camera.fov = CAMERA_FOV; // 3D MODELS // STEREO IMAGE (see apply_stereo() for supported modes) PANO_OBJECT.stereo_mode = 'undefined'; apply_stereo(); } // SCENE LOADER function load_scene_46() { // DATA HOME_SCENE = load_scene_42; BACK_SCENE = load_scene_42; NEXT_SCENE = load_scene_42; PREV_SCENE = load_scene_42; CURRENT_SCENE = load_scene_46; SCENE_TITLE = '01 | Römerquelle'; SCENE_NUMBER = '01'; SCENE_LEVEL = 2; $("#breadcrumbs-vr h1").text(SCENE_TITLE); $("#number-button").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '.png'); $("#number-button-active").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '-active.png'); PANO_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01-detail-04.jpg'; PRELOAD_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01-detail-04.jpg'; // SETTINGS PANO_ALPHA = 0; CAMERA_FOV = 70; AUDIO_FILE = 'media/carnuntum/vc_kellergasse/audio/en/highlight-01-detail-04.mp3'; ROTATE_OBJECT = null; ROTATE_ALPHA = 0; LIGHT_INTENSITY_HEMI = 0.9; LIGHT_INTENSITY_SPOT = 0.5; CONTROLS_DOWN = -12.0; ANGLE_CONTROLS_FIXED = 70; INVERT_CONTROLS = false; var pano_radius = 480; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js // HIGHLIGHT IMAGE var map_w = 1600; var map_h = 1600; var default_scale_x = 0.55; // for 1600px width var default_scale_y = 0.4; // for 1200px height // adjust width to apect ratio of image var scale_x = default_scale_x / ( 1600/1200 * map_h/map_w ); // fix the height var scale_y = default_scale_y; // move closer by scaling x var pano_scale_x = 0.75; // adjust zoom and move controls UP CAMERA_FOV = 25; CONTROLS_DOWN = -46.0; ANGLE_CONTROLS_FIXED = 75; var pano_radius = 480; var button_radius = 400; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js var alpha_0 = -Math.PI/4*scale_x; var alpha_t = Math.PI/2*scale_x; var beta_0 = Math.PI/2 - Math.PI/4*scale_y; var beta_t = Math.PI/2*scale_y; var map = new THREE.TextureLoader().load( PANO_IMAGE, function() { postLoadScene(); } ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: false } ); var pano = new THREE.Mesh(new THREE.SphereGeometry(pano_radius, 32, 32, alpha_0, alpha_t, beta_0, beta_t), material); pano.scale.x = -1 * pano_scale_x; pano.position.x = 0; pano.position.y = 0; pano.position.z = 0; pano.rotation.y = PANO_ALPHA / 180.0 * Math.PI; scene.add(pano); objects.push(pano); textures.push( map ); materials.push(material); PANO_OBJECT = pano; PANO_OBJECT.POST_LOAD_IMAGE = undefined; PANO_MODE = 'FLAT'; // DETAIL BUTTONS // PANORAMA // CAMERA var height = 0; var radius = 1; var angle = 0; var camera_target = new THREE.Vector3(0,0,0); camera_target.x = radius * Math.cos(angle / 180.0 * Math.PI); camera_target.y = height; camera_target.z = radius * Math.sin(angle / 180.0 * Math.PI); camera.lookAt( new THREE.Vector3(camera_target.x*100, 0, camera_target.z*100) ); camera.position.set(-camera_target.x, 0, -camera_target.z); camera.fov = CAMERA_FOV; // 3D MODELS // STEREO IMAGE (see apply_stereo() for supported modes) PANO_OBJECT.stereo_mode = 'undefined'; apply_stereo(); } // SCENE LOADER function load_scene_47() { // DATA HOME_SCENE = load_scene_42; BACK_SCENE = load_scene_42; NEXT_SCENE = load_scene_42; PREV_SCENE = load_scene_42; CURRENT_SCENE = load_scene_47; SCENE_TITLE = '01 | Spitzerberg'; SCENE_NUMBER = '01'; SCENE_LEVEL = 2; $("#breadcrumbs-vr h1").text(SCENE_TITLE); $("#number-button").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '.png'); $("#number-button-active").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '-active.png'); PANO_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01-detail-05.jpg'; PRELOAD_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01-detail-05.jpg'; // SETTINGS PANO_ALPHA = 0; CAMERA_FOV = 70; AUDIO_FILE = 'media/carnuntum/vc_kellergasse/audio/en/highlight-01-detail-05.mp3'; ROTATE_OBJECT = null; ROTATE_ALPHA = 0; LIGHT_INTENSITY_HEMI = 0.9; LIGHT_INTENSITY_SPOT = 0.5; CONTROLS_DOWN = -12.0; ANGLE_CONTROLS_FIXED = 70; INVERT_CONTROLS = false; var pano_radius = 480; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js // HIGHLIGHT IMAGE var map_w = 1600; var map_h = 1600; var default_scale_x = 0.55; // for 1600px width var default_scale_y = 0.4; // for 1200px height // adjust width to apect ratio of image var scale_x = default_scale_x / ( 1600/1200 * map_h/map_w ); // fix the height var scale_y = default_scale_y; // move closer by scaling x var pano_scale_x = 0.75; // adjust zoom and move controls UP CAMERA_FOV = 25; CONTROLS_DOWN = -46.0; ANGLE_CONTROLS_FIXED = 75; var pano_radius = 480; var button_radius = 400; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js var alpha_0 = -Math.PI/4*scale_x; var alpha_t = Math.PI/2*scale_x; var beta_0 = Math.PI/2 - Math.PI/4*scale_y; var beta_t = Math.PI/2*scale_y; var map = new THREE.TextureLoader().load( PANO_IMAGE, function() { postLoadScene(); } ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: false } ); var pano = new THREE.Mesh(new THREE.SphereGeometry(pano_radius, 32, 32, alpha_0, alpha_t, beta_0, beta_t), material); pano.scale.x = -1 * pano_scale_x; pano.position.x = 0; pano.position.y = 0; pano.position.z = 0; pano.rotation.y = PANO_ALPHA / 180.0 * Math.PI; scene.add(pano); objects.push(pano); textures.push( map ); materials.push(material); PANO_OBJECT = pano; PANO_OBJECT.POST_LOAD_IMAGE = undefined; PANO_MODE = 'FLAT'; // DETAIL BUTTONS // PANORAMA // CAMERA var height = 0; var radius = 1; var angle = 0; var camera_target = new THREE.Vector3(0,0,0); camera_target.x = radius * Math.cos(angle / 180.0 * Math.PI); camera_target.y = height; camera_target.z = radius * Math.sin(angle / 180.0 * Math.PI); camera.lookAt( new THREE.Vector3(camera_target.x*100, 0, camera_target.z*100) ); camera.position.set(-camera_target.x, 0, -camera_target.z); camera.fov = CAMERA_FOV; // 3D MODELS // STEREO IMAGE (see apply_stereo() for supported modes) PANO_OBJECT.stereo_mode = 'undefined'; apply_stereo(); } // SCENE LOADER function load_scene_48() { // DATA HOME_SCENE = load_scene_42; BACK_SCENE = load_scene_42; NEXT_SCENE = load_scene_42; PREV_SCENE = load_scene_42; CURRENT_SCENE = load_scene_48; SCENE_TITLE = '01 | Prellenkirchen wind farm'; SCENE_NUMBER = '01'; SCENE_LEVEL = 2; $("#breadcrumbs-vr h1").text(SCENE_TITLE); $("#number-button").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '.png'); $("#number-button-active").attr('src', 'static/webapp/images/number-' + SCENE_NUMBER + '-active.png'); PANO_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01-detail-06.jpg'; PRELOAD_IMAGE = 'media/carnuntum/vc_kellergasse/images/highlight-01-detail-06.jpg'; // SETTINGS PANO_ALPHA = 0; CAMERA_FOV = 70; AUDIO_FILE = 'media/carnuntum/vc_kellergasse/audio/en/highlight-01-detail-06.mp3'; ROTATE_OBJECT = null; ROTATE_ALPHA = 0; LIGHT_INTENSITY_HEMI = 0.9; LIGHT_INTENSITY_SPOT = 0.5; CONTROLS_DOWN = -12.0; ANGLE_CONTROLS_FIXED = 70; INVERT_CONTROLS = false; var pano_radius = 480; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js // HIGHLIGHT IMAGE var map_w = 1600; var map_h = 1600; var default_scale_x = 0.55; // for 1600px width var default_scale_y = 0.4; // for 1200px height // adjust width to apect ratio of image var scale_x = default_scale_x / ( 1600/1200 * map_h/map_w ); // fix the height var scale_y = default_scale_y; // move closer by scaling x var pano_scale_x = 0.75; // adjust zoom and move controls UP CAMERA_FOV = 25; CONTROLS_DOWN = -46.0; ANGLE_CONTROLS_FIXED = 75; var pano_radius = 480; var button_radius = 400; FOCAL_LENGTH = 480 / 2; // see StereoEffect.js var alpha_0 = -Math.PI/4*scale_x; var alpha_t = Math.PI/2*scale_x; var beta_0 = Math.PI/2 - Math.PI/4*scale_y; var beta_t = Math.PI/2*scale_y; var map = new THREE.TextureLoader().load( PANO_IMAGE, function() { postLoadScene(); } ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: false } ); var pano = new THREE.Mesh(new THREE.SphereGeometry(pano_radius, 32, 32, alpha_0, alpha_t, beta_0, beta_t), material); pano.scale.x = -1 * pano_scale_x; pano.position.x = 0; pano.position.y = 0; pano.position.z = 0; pano.rotation.y = PANO_ALPHA / 180.0 * Math.PI; scene.add(pano); objects.push(pano); textures.push( map ); materials.push(material); PANO_OBJECT = pano; PANO_OBJECT.POST_LOAD_IMAGE = undefined; PANO_MODE = 'FLAT'; // DETAIL BUTTONS // PANORAMA // CAMERA var height = 0; var radius = 1; var angle = 0; var camera_target = new THREE.Vector3(0,0,0); camera_target.x = radius * Math.cos(angle / 180.0 * Math.PI); camera_target.y = height; camera_target.z = radius * Math.sin(angle / 180.0 * Math.PI); camera.lookAt( new THREE.Vector3(camera_target.x*100, 0, camera_target.z*100) ); camera.position.set(-camera_target.x, 0, -camera_target.z); camera.fov = CAMERA_FOV; // 3D MODELS // STEREO IMAGE (see apply_stereo() for supported modes) PANO_OBJECT.stereo_mode = 'undefined'; apply_stereo(); } // SET CURRENT SCENE AND TITLE CURRENT_SCENE = load_scene_42; $(document).ready(function() { SCENE_TITLE = "01 | Prellenkirchen wine cellars"; $("#breadcrumbs-vr h1").text(SCENE_TITLE); }); // DEFINE MAP IMAGE MAP_FILE = 'media/carnuntum/vc_kellergasse/maps/map-01.jpg'; // CONTROL BUTTONS function update_controls(current_camera) { var radius = 130.0; var cam_target = current_camera.getWorldDirection(); var angle = Math.atan(cam_target.x / cam_target.z); var azimuth = Math.atan( Math.pow(Math.pow(cam_target.x, 2.0) + Math.pow(cam_target.z, 2.0), 0.5) / cam_target.y); update_controls_height(); if (INVERT_CONTROLS) { azimuth = -azimuth; } var beta = Math.abs(azimuth/Math.PI*180); if (beta < ANGLE_CONTROLS_FIXED) { var scale = 0.6 + (ANGLE_CONTROLS_FIXED - beta) / (ANGLE_CONTROLS_FIXED - 60) * 0.5; scale = Math.min(scale, 1.1); } else { var scale = 0.6; } scale = scale * Math.pow(camera.fov / 70, 1.125); // adjust for zoom level if (beta < ANGLE_CONTROLS_FIXED) { var opacity = (ANGLE_CONTROLS_FIXED - beta) / (ANGLE_CONTROLS_FIXED - 60); CONTROLS_ACTIVE = true; } else { var opacity = 0.0; CONTROLS_ACTIVE = false; } if (MODE == "MONO" && DISABLE_CONTROLS_MONO) { var opacity = 0.0; radius = 10000; CONTROLS_ACTIVE = false; } if (cam_target.z < 0.0) { angle = - Math.PI + angle; } NUMBER_BUTTON.scale.x = NUMBER_BUTTON.scale.y = NUMBER_BUTTON.scale.z = scale; NUMBER_BUTTON.material.materials[5].opacity = opacity; NUMBER_BUTTON.material.materials[5].map.offset.x = ( parseInt(SCENE_NUMBER) - 1 ) / 16; BACK_BUTTON.scale.x = BACK_BUTTON.scale.y = BACK_BUTTON.scale.z = scale; BACK_BUTTON.material.materials[5].opacity = opacity; HOME_BUTTON.scale.x = HOME_BUTTON.scale.y = HOME_BUTTON.scale.z = scale; HOME_BUTTON.material.materials[5].opacity = opacity; NEXT_BUTTON.scale.x = NEXT_BUTTON.scale.y = NEXT_BUTTON.scale.z = scale; NEXT_BUTTON.material.materials[5].opacity = opacity; PREV_BUTTON.scale.x = PREV_BUTTON.scale.y = PREV_BUTTON.scale.z = scale; PREV_BUTTON.material.materials[5].opacity = opacity; PLAY_BUTTON.scale.x = PLAY_BUTTON.scale.y = PLAY_BUTTON.scale.z = scale; PLAY_BUTTON.material.materials[5].opacity = opacity; STOP_BUTTON.scale.x = STOP_BUTTON.scale.y = STOP_BUTTON.scale.z = scale; STOP_BUTTON.material.materials[5].opacity = opacity; REWIND_BUTTON.scale.x = REWIND_BUTTON.scale.y = REWIND_BUTTON.scale.z = scale; REWIND_BUTTON.material.materials[5].opacity = opacity; PROGRESS_BAR.scale.x = PROGRESS_BAR.scale.y = PROGRESS_BAR.scale.z = scale; PROGRESS_BAR.material.materials[5].opacity = opacity; PROGRESS_BAR_FRAME.scale.x = PROGRESS_BAR_FRAME.scale.y = PROGRESS_BAR_FRAME.scale.z = scale; PROGRESS_BAR_FRAME.material.materials[5].opacity = opacity; STORE_BUTTON.scale.x = STORE_BUTTON.scale.y = STORE_BUTTON.scale.z = scale; STORE_BUTTON.material.materials[5].opacity = opacity; MAP_BUTTON.scale.x = MAP_BUTTON.scale.y = MAP_BUTTON.scale.z = scale; MAP_BUTTON.material.materials[5].opacity = opacity; MAP_ON_BUTTON.scale.x = MAP_ON_BUTTON.scale.y = MAP_ON_BUTTON.scale.z = scale; MAP_ON_BUTTON.material.materials[5].opacity = opacity; if ( (MODE == "STEREO" || isTouch()) && (Math.abs(azimuth/Math.PI*180) < ANGLE_CONTROLS_FIXED) ) { angle = BACK_BUTTON.rotation.y; } // NAVIGATION var space = 0.00 * scale; NUMBER_BUTTON.position.x = radius * Math.sin(angle) - space * Math.cos(angle); NUMBER_BUTTON.position.y = CONTROLS_HEIGHT; NUMBER_BUTTON.position.z = radius * Math.cos(angle) + space * Math.sin(angle); NUMBER_BUTTON.rotation.y = angle; var space = 0.00 * scale; BACK_BUTTON.position.x = radius * Math.sin(angle) - space * Math.cos(angle); BACK_BUTTON.position.y = CONTROLS_HEIGHT; BACK_BUTTON.position.z = radius * Math.cos(angle) + space * Math.sin(angle); BACK_BUTTON.rotation.y = angle; var space = -52.00 * scale; HOME_BUTTON.position.x = radius * Math.sin(angle) - space * Math.cos(angle); HOME_BUTTON.position.y = CONTROLS_HEIGHT; HOME_BUTTON.position.z = radius * Math.cos(angle) + space * Math.sin(angle); HOME_BUTTON.rotation.y = angle; var space = 22.00 * scale; NEXT_BUTTON.position.x = radius * Math.sin(angle) - space * Math.cos(angle); NEXT_BUTTON.position.y = CONTROLS_HEIGHT; NEXT_BUTTON.position.z = radius * Math.cos(angle) + space * Math.sin(angle); NEXT_BUTTON.rotation.y = angle; var space = -22.00 * scale; PREV_BUTTON.position.x = radius * Math.sin(angle) - space * Math.cos(angle); PREV_BUTTON.position.y = CONTROLS_HEIGHT; PREV_BUTTON.position.z = radius * Math.cos(angle) + space * Math.sin(angle); PREV_BUTTON.rotation.y = angle; // AUDIO var space = (11.00 - 22.00) * scale; var height = 30.00 *scale; PLAY_BUTTON.position.x = radius * Math.sin(angle) - space * Math.cos(angle); PLAY_BUTTON.position.y = CONTROLS_HEIGHT - height; PLAY_BUTTON.position.z = radius * Math.cos(angle) + space * Math.sin(angle); PLAY_BUTTON.rotation.y = angle; var space = (11.00 - 22.00) * scale; var height = 30.00 *scale; STOP_BUTTON.position.x = radius * Math.sin(angle) - space * Math.cos(angle); STOP_BUTTON.position.y = CONTROLS_HEIGHT - height; STOP_BUTTON.position.z = radius * Math.cos(angle) + space * Math.sin(angle); STOP_BUTTON.rotation.y = angle; if (AUDIO_STATE == 'STOP') { STOP_BUTTON.position.x = -10000; STOP_BUTTON.position.z = -10000; if (MODE == "MONO") { $('#play-button-vr').show(); $('#stop-button-vr').hide(); } else { $('#play-button-vr').hide(); $('#stop-button-vr').hide(); } } else { PLAY_BUTTON.position.x = -10000; PLAY_BUTTON.position.z = -10000; if (MODE == "MONO") { $('#play-button-vr').hide(); $('#stop-button-vr').show(); } else { $('#play-button-vr').hide(); $('#stop-button-vr').hide(); } } var space = (-11.00 - 22.00) * scale; var height = 30.00 * scale; REWIND_BUTTON.position.x = radius * Math.sin(angle) - space * Math.cos(angle); REWIND_BUTTON.position.y = CONTROLS_HEIGHT - height; REWIND_BUTTON.position.z = radius * Math.cos(angle) + space * Math.sin(angle); REWIND_BUTTON.rotation.y = angle; var space = (22.00 - 1.75) * scale; var height = 30.00 * scale; PROGRESS_BAR.position.x = radius * Math.sin(angle) - space * Math.cos(angle); PROGRESS_BAR.position.y = CONTROLS_HEIGHT - height; PROGRESS_BAR.position.z = radius * Math.cos(angle) + space * Math.sin(angle); PROGRESS_BAR.rotation.y = angle; var space = 22.00 * scale; var height = 30.00 * scale; PROGRESS_BAR_FRAME.position.x = 1.08 * radius * Math.sin(angle) - space * Math.cos(angle); PROGRESS_BAR_FRAME.position.y = 1.08 * (CONTROLS_HEIGHT - height); PROGRESS_BAR_FRAME.position.z = 1.08 * radius * Math.cos(angle) + space * Math.sin(angle); PROGRESS_BAR_FRAME.rotation.y = angle; // WEB APP var space = 70 * scale; STORE_BUTTON.position.x = radius * Math.sin(angle) - space * Math.cos(angle); STORE_BUTTON.position.y = CONTROLS_HEIGHT; STORE_BUTTON.position.z = radius * Math.cos(angle) + space * Math.sin(angle); STORE_BUTTON.rotation.y = angle; STORE_BUTTON.visible = false; // MAP var space = 52.00 * scale; MAP_BUTTON.position.x = radius * Math.sin(angle) - space * Math.cos(angle); MAP_BUTTON.position.y = CONTROLS_HEIGHT; MAP_BUTTON.position.z = radius * Math.cos(angle) + space * Math.sin(angle); MAP_BUTTON.rotation.y = angle; var space = 52.00 * scale; MAP_ON_BUTTON.position.x = radius * Math.sin(angle) - space * Math.cos(angle); MAP_ON_BUTTON.position.y = CONTROLS_HEIGHT; MAP_ON_BUTTON.position.z = radius * Math.cos(angle) + space * Math.sin(angle); MAP_ON_BUTTON.rotation.y = angle; if (MAP_OBJECT.visible) { MAP_BUTTON.position.x = -10000; MAP_BUTTON.position.z = -10000; if (MODE == "MONO") { $('#map-on-button').show(); $('#map-button').hide(); } else { $('#map-on-button').hide(); $('#map-button').hide(); } } else { MAP_ON_BUTTON.position.x = -10000; MAP_ON_BUTTON.position.z = -10000; if (MODE == "MONO") { $('#map-on-button').hide(); $('#map-button').show(); } else { $('#map-on-button').hide(); $('#map-button').hide(); } } } function update_button_visibility() { if (SCENE_LEVEL == 1) { NUMBER_BUTTON.visible = true; BACK_BUTTON.visible = false; if (MODE == 'STEREO') { } else { $('#back-button').hide(); if (NAV_CONTROLS_OPEN) { $('#number-button').hide(); $('#number-button-active').show(); $('#nav-controls').show(); } else { $('#number-button').show(); $('#number-button-active').hide(); $('#nav-controls').hide(); } } } else { NUMBER_BUTTON.visible = false; BACK_BUTTON.visible = true; if (MODE == 'STEREO') { } else { $('#number-button').hide(); $('#back-button').show(); $('#number-button-active').hide(); $('#nav-controls').hide(); } } if (MODE == 'STEREO') { } else { if (AUDIO_CONTROLS_OPEN) { $('#audio-button').hide(); $('#audio-button-active').show(); $('#audio-controls').show(); } else { $('#audio-button').show(); $('#audio-button-active').hide(); $('#audio-controls').hide(); } } } function update_controls_height() { var height = -110.5 - CONTROLS_DOWN; if (INVERT_CONTROLS) { height = -height; } CONTROLS_HEIGHT = height; } function load_controls() { update_controls_height() var height = CONTROLS_HEIGHT; var scale = 0.8; // NAVIGATION var map = new THREE.TextureLoader().load( 'static/webapp/images/back.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 24*scale, 28*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.navigate_target = BACK_SCENE; BACK_BUTTON = object; var map = new THREE.TextureLoader().load( 'static/webapp/images/home.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 24*scale, 28*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.navigate_target = HOME_SCENE; HOME_BUTTON = object; var map = new THREE.TextureLoader().load( 'static/webapp/images/next.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 24*scale, 28*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.navigate_target = NEXT_SCENE; NEXT_BUTTON = object; var map = new THREE.TextureLoader().load( 'static/webapp/images/prev.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 24*scale, 28*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.navigate_target = PREV_SCENE; PREV_BUTTON = object; var map = new THREE.TextureLoader().load( 'static/webapp/images/numbers.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 24*scale, 28*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.navigate_target = undefined; NUMBER_BUTTON = object; map.repeat.set( 1 / 16, 1 ); // AUDIO var map = new THREE.TextureLoader().load( 'static/webapp/images/play-phones.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 24*scale, 26*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( 15 / 180.0 * Math.PI ) ); object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.button_action = play_audio; PLAY_BUTTON = object; var map = new THREE.TextureLoader().load( 'static/webapp/images/stop-phones.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 24*scale, 26*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( 15 / 180.0 * Math.PI ) ); object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.button_action = stop_audio; STOP_BUTTON = object; var map = new THREE.TextureLoader().load( 'static/webapp/images/rewind.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 24*scale, 26*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( 15 / 180.0 * Math.PI ) ); object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.button_action = rewind_audio; REWIND_BUTTON = object; var map = new THREE.TextureLoader().load( 'static/webapp/images/progress-bar.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 42*scale, 8*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( 15 / 180.0 * Math.PI ) ); object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.button_action = undefined; PROGRESS_BAR = object; var map = new THREE.TextureLoader().load( 'static/webapp/images/progress-bar-frame.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 48*scale, 12*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( 15 / 180.0 * Math.PI ) ); object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.button_action = undefined; PROGRESS_BAR_FRAME = object; // STORE var map = new THREE.TextureLoader().load( 'static/webapp/images/web-app.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 24*scale, 28*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.button_action = webapp_action; STORE_BUTTON = object; // MAP var map = new THREE.TextureLoader().load( 'static/webapp/images/map.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 24*scale, 28*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.button_action = map_action; MAP_BUTTON = object; var map = new THREE.TextureLoader().load( 'static/webapp/images/map-on.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( 24*scale, 28*scale, 0.1, 4, 4, 4 ), material ); object.scale.x = 1; object.position.x = 0; object.position.y = height; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; scene.add( object ); objects.push(object); object.control_button = true; object.button_action = map_action; MAP_ON_BUTTON = object; } function load_map() { // MAP IMAGE var map_w = 1800; var map_h = 1652; var default_scale_x = 0.55; // for 1600px width var default_scale_y = 0.4; // for 1200px height // adjust width to apect ratio of image var scale_x = default_scale_x / ( 1600/1200 * map_h/map_w ); // fix the height var scale_y = default_scale_y; var pano_radius = 440; var button_radius = 380; var indicator_radius = 370; var button_size = 28; var indicator_size = 28; var alpha_0 = -Math.PI/4*scale_x; var alpha_t = Math.PI/2*scale_x; var beta_0 = Math.PI/2 - Math.PI/4*scale_y; var beta_t = Math.PI/2*scale_y; var map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: false } ); var object = new THREE.Mesh(new THREE.SphereGeometry(pano_radius, 32, 32, alpha_0, alpha_t, beta_0, beta_t), material); object.scale.x = -1.0; object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.rotation.y = 0 / 180.0 * Math.PI; scene.add( object ); MAP_OBJECT = object; MAP_OBJECT.POST_LOAD_IMAGE = MAP_FILE; map.minFilter = TEXTURE_FILTER_MIN; map.magFilter = TEXTURE_FILTER_MAG; MAP_OBJECT.visible = false; // MAP BUTTONS var image = 'media/carnuntum/_generated/43/marker-en-icon-title.png'; var target = load_scene_43; // render button var map = new THREE.TextureLoader().load( image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( button_size, button_size, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; var c = [1213, 1312]; var alpha = ( c[0] - map_w / 2 ) / map_w * alpha_t; var beta = ( c[1] - map_h / 2 ) / map_h * beta_t var z = button_radius * Math.sin( alpha ) + button_size * 0.6; var y = button_radius * Math.sin( beta ) + button_size * 0.5; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5); object.position.x = x; object.position.y = -y; object.position.z = z; object.rotation.y = Math.PI/2 - alpha; object.relative = new THREE.Vector2(alpha, beta); scene.add( object ); object.detail_button = true; object.map_button = true; object.zoom_button = undefined; object.navigate_target = target; map.minFilter = TEXTURE_FILTER_MIN; map.magFilter = TEXTURE_FILTER_MAG; object.visible = false; object.label = 'Prellenkirchen wine cellars'; MAP_BUTTONS.push(object); var image = 'media/carnuntum/_generated/44/marker-en-icon-title.png'; var target = load_scene_44; // render button var map = new THREE.TextureLoader().load( image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( button_size, button_size, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; var c = [1058, 946]; var alpha = ( c[0] - map_w / 2 ) / map_w * alpha_t; var beta = ( c[1] - map_h / 2 ) / map_h * beta_t var z = button_radius * Math.sin( alpha ) + button_size * 0.6; var y = button_radius * Math.sin( beta ) + button_size * 0.5; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5); object.position.x = x; object.position.y = -y; object.position.z = z; object.rotation.y = Math.PI/2 - alpha; object.relative = new THREE.Vector2(alpha, beta); scene.add( object ); object.detail_button = true; object.map_button = true; object.zoom_button = undefined; object.navigate_target = target; map.minFilter = TEXTURE_FILTER_MIN; map.magFilter = TEXTURE_FILTER_MAG; object.visible = false; object.label = 'Prince’s animal park'; MAP_BUTTONS.push(object); var image = 'media/carnuntum/_generated/45/marker-en-icon-title.png'; var target = load_scene_45; // render button var map = new THREE.TextureLoader().load( image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( button_size, button_size, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; var c = [1162, 563]; var alpha = ( c[0] - map_w / 2 ) / map_w * alpha_t; var beta = ( c[1] - map_h / 2 ) / map_h * beta_t var z = button_radius * Math.sin( alpha ) + button_size * 0.6; var y = button_radius * Math.sin( beta ) + button_size * 0.5; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5); object.position.x = x; object.position.y = -y; object.position.z = z; object.rotation.y = Math.PI/2 - alpha; object.relative = new THREE.Vector2(alpha, beta); scene.add( object ); object.detail_button = true; object.map_button = true; object.zoom_button = undefined; object.navigate_target = target; map.minFilter = TEXTURE_FILTER_MIN; map.magFilter = TEXTURE_FILTER_MAG; object.visible = false; object.label = 'Wine cellar district, Edelstal'; MAP_BUTTONS.push(object); var image = 'media/carnuntum/_generated/46/marker-en-icon-title.png'; var target = load_scene_46; // render button var map = new THREE.TextureLoader().load( image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( button_size, button_size, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; var c = [536, 86]; var alpha = ( c[0] - map_w / 2 ) / map_w * alpha_t; var beta = ( c[1] - map_h / 2 ) / map_h * beta_t var z = button_radius * Math.sin( alpha ) + button_size * 0.6; var y = button_radius * Math.sin( beta ) + button_size * 0.5; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5); object.position.x = x; object.position.y = -y; object.position.z = z; object.rotation.y = Math.PI/2 - alpha; object.relative = new THREE.Vector2(alpha, beta); scene.add( object ); object.detail_button = true; object.map_button = true; object.zoom_button = undefined; object.navigate_target = target; map.minFilter = TEXTURE_FILTER_MIN; map.magFilter = TEXTURE_FILTER_MAG; object.visible = false; object.label = 'Römerquelle'; MAP_BUTTONS.push(object); var image = 'media/carnuntum/_generated/47/marker-en-icon-title.png'; var target = load_scene_47; // render button var map = new THREE.TextureLoader().load( image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( button_size, button_size, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; var c = [48, 630]; var alpha = ( c[0] - map_w / 2 ) / map_w * alpha_t; var beta = ( c[1] - map_h / 2 ) / map_h * beta_t var z = button_radius * Math.sin( alpha ) + button_size * 0.6; var y = button_radius * Math.sin( beta ) + button_size * 0.5; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5); object.position.x = x; object.position.y = -y; object.position.z = z; object.rotation.y = Math.PI/2 - alpha; object.relative = new THREE.Vector2(alpha, beta); scene.add( object ); object.detail_button = true; object.map_button = true; object.zoom_button = undefined; object.navigate_target = target; map.minFilter = TEXTURE_FILTER_MIN; map.magFilter = TEXTURE_FILTER_MAG; object.visible = false; object.label = 'Spitzerberg'; MAP_BUTTONS.push(object); var image = 'media/carnuntum/_generated/48/marker-en-icon-title.png'; var target = load_scene_48; // render button var map = new THREE.TextureLoader().load( image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( button_size, button_size, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; var c = [646, 961]; var alpha = ( c[0] - map_w / 2 ) / map_w * alpha_t; var beta = ( c[1] - map_h / 2 ) / map_h * beta_t var z = button_radius * Math.sin( alpha ) + button_size * 0.6; var y = button_radius * Math.sin( beta ) + button_size * 0.5; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5); object.position.x = x; object.position.y = -y; object.position.z = z; object.rotation.y = Math.PI/2 - alpha; object.relative = new THREE.Vector2(alpha, beta); scene.add( object ); object.detail_button = true; object.map_button = true; object.zoom_button = undefined; object.navigate_target = target; map.minFilter = TEXTURE_FILTER_MIN; map.magFilter = TEXTURE_FILTER_MAG; object.visible = false; object.label = 'Prellenkirchen wind farm'; MAP_BUTTONS.push(object); // POSITION INDICATOR var image = 'static/webapp/images/map-indicator-vr.png'; var target = undefined; // render button var map = new THREE.TextureLoader().load( image ); var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } ); var dummy_map = new THREE.TextureLoader().load( 'static/webapp/images/blank.png' ); var dummy_material = new THREE.MeshBasicMaterial( { map: dummy_map, transparent: true } ); material = new THREE.MeshFaceMaterial([dummy_material, dummy_material, dummy_material, dummy_material, dummy_material, material]); var object = new THREE.Mesh( new THREE.BoxGeometry( indicator_size, indicator_size, 0.1, 4, 4, 4 ), material ); object.scale.x = object.scale.y = object.scale.z = 1.0; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.rotation.y = -(0-90) / 180.0 * Math.PI; object.relative = new THREE.Vector2(0); scene.add( object ); object.detail_button = true; object.map_button = true; object.zoom_button = undefined; object.navigate_target = target; map.minFilter = TEXTURE_FILTER_MIN; map.magFilter = TEXTURE_FILTER_MAG; object.visible = false; MAP_INDICATOR = object; } function update_map() { var pano_radius = 440; var button_radius = 380; var indicator_radius = 370; var button_size = 28; var indicator_size = 28; var cam_target = camera.getWorldDirection(); var angle = Math.atan(cam_target.x / cam_target.z); var azimuth = Math.atan( Math.pow(Math.pow(cam_target.x, 2.0) + Math.pow(cam_target.z, 2.0), 0.5) / cam_target.y); if (cam_target.z < 0.0) { angle = - Math.PI + angle; } // MAP MAP_OBJECT.rotation.y = angle - Math.PI/2; var scale = 25 / camera.fov; // adjust for zoom level MAP_OBJECT.scale.x = -scale; // BUTTONS for (var i in MAP_BUTTONS) { var alpha = MAP_BUTTONS[i].relative.x; var beta = MAP_BUTTONS[i].relative.y; var z = button_radius * Math.sin( alpha ) + button_size * 0.6; var y = button_radius * Math.sin( beta ) + button_size * 0.5; var x = Math.pow(Math.pow(button_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5) * scale; MAP_BUTTONS[i].position.x = x * Math.sin( angle ) - z * Math.cos( angle ); MAP_BUTTONS[i].position.y = -y; MAP_BUTTONS[i].position.z = x * Math.cos( angle ) + z * Math.sin( angle ); MAP_BUTTONS[i].rotation.y = angle - alpha; // highlight current position if (MAP_BUTTONS[i].navigate_target == CURRENT_SCENE) { MAP_INDICATOR.relative.x = MAP_BUTTONS[i].relative.x; MAP_INDICATOR.relative.y = MAP_BUTTONS[i].relative.y; } } // INDICATOR var alpha = MAP_INDICATOR.relative.x; var beta = MAP_INDICATOR.relative.y; var z = indicator_radius * Math.sin( alpha ) + indicator_size * 0.6; var y = indicator_radius * Math.sin( beta ) + indicator_size * 0.5; var x = Math.pow(Math.pow(indicator_radius, 2) - Math.pow(y, 2) - Math.pow(z, 2), 0.5) * scale; MAP_INDICATOR.position.x = x * Math.sin( angle ) - z * Math.cos( angle ); MAP_INDICATOR.position.y = -y; MAP_INDICATOR.position.z = x * Math.cos( angle ) + z * Math.sin( angle ); MAP_INDICATOR.rotation.y = angle - alpha; }