// 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_2() { // DATA HOME_SCENE = load_scene_2; BACK_SCENE = load_scene_2; NEXT_SCENE = load_scene_3; PREV_SCENE = load_scene_10; CURRENT_SCENE = load_scene_2; SCENE_TITLE = '01 | 1st Dept. Adult Psychiatry'; 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/lk-mauer/g1_-_abteilungen/g1_hl2_-_erwachsenenpsychiatrie_subakut_1/parkbank_QaVucwR__CROP-1592210378.jpg'; PRELOAD_IMAGE = 'media/lk-mauer/g1_-_abteilungen/g1_hl2_-_erwachsenenpsychiatrie_subakut_1/parkbank_QaVucwR__CROP-1592210378.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 = 1500; var map_h = 1010; 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 = [532, 379]; 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_24; var marker_image = 'media/lk-mauer/_generated/24/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 = 'Team/Kontakt'; 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_24() { // DATA HOME_SCENE = load_scene_2; BACK_SCENE = load_scene_2; NEXT_SCENE = load_scene_3; PREV_SCENE = load_scene_10; CURRENT_SCENE = load_scene_24; SCENE_TITLE = '01 | Team/Kontakt'; 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/lk-mauer/g1_-_abteilungen/g1_hl2_-_erwachsenenpsychiatrie_subakut_1/parkbank_-_640x400__CROP-1592209386.jpg'; PRELOAD_IMAGE = 'media/lk-mauer/g1_-_abteilungen/g1_hl2_-_erwachsenenpsychiatrie_subakut_1/parkbank_-_640x400__CROP-1592209386.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 = 640; var map_h = 400; 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_3() { // DATA HOME_SCENE = load_scene_2; BACK_SCENE = load_scene_3; NEXT_SCENE = load_scene_4; PREV_SCENE = load_scene_2; CURRENT_SCENE = load_scene_3; SCENE_TITLE = '02 | 2nd Dept. Stationary Psychotherapy'; SCENE_NUMBER = '02'; 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/lk-mauer/g1_-_abteilungen/g1_hl2_-_stationare_psychotherapie/psychotherapie-810x423__CROP-1573469086.jpg'; PRELOAD_IMAGE = 'media/lk-mauer/g1_-_abteilungen/g1_hl2_-_stationare_psychotherapie/psychotherapie-810x423__CROP-1573469086.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 = 810; var map_h = 423; 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 = [270, 104]; 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_26; var marker_image = 'media/lk-mauer/_generated/26/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 = 'Team/Kontakt'; 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_26() { // DATA HOME_SCENE = load_scene_2; BACK_SCENE = load_scene_3; NEXT_SCENE = load_scene_4; PREV_SCENE = load_scene_2; CURRENT_SCENE = load_scene_26; SCENE_TITLE = '02 | Team/Kontakt'; SCENE_NUMBER = '02'; 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/lk-mauer/g1_-_abteilungen/g1_hl2_-_stationare_psychotherapie/liste-guide-abteilungen-hl-abt-2-stat-psych-mauer-640x400.jpg'; PRELOAD_IMAGE = 'media/lk-mauer/g1_-_abteilungen/g1_hl2_-_stationare_psychotherapie/liste-guide-abteilungen-hl-abt-2-stat-psych-mauer-640x400.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 = 640; var map_h = 400; 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_4() { // DATA HOME_SCENE = load_scene_2; BACK_SCENE = load_scene_4; NEXT_SCENE = load_scene_8; PREV_SCENE = load_scene_3; CURRENT_SCENE = load_scene_4; SCENE_TITLE = '03 | 3rd Dept. Addictions'; SCENE_NUMBER = '03'; 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/lk-mauer/g1_-_abteilungen/g1_hl3_-_abhangigkeitserkrankungen/startbild-guide-abt-hl-abt-3-abhangigkeitserkrankungen-mauer-1500.jpg'; PRELOAD_IMAGE = 'media/lk-mauer/g1_-_abteilungen/g1_hl3_-_abhangigkeitserkrankungen/startbild-guide-abt-hl-abt-3-abhangigkeitserkrankungen-mauer-1500.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 = 1500; var map_h = 1500; 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 = [326, 242]; 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_6; var marker_image = 'media/lk-mauer/_generated/6/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 = 'Drug Withdrawal'; 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_6() { // DATA HOME_SCENE = load_scene_2; BACK_SCENE = load_scene_4; NEXT_SCENE = load_scene_8; PREV_SCENE = load_scene_3; CURRENT_SCENE = load_scene_6; SCENE_TITLE = '03 | Drug Withdrawal'; SCENE_NUMBER = '03'; 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/lk-mauer/g1_-_abteilungen/g1_hl5_-_abhangigkeitserkrankungen/g1_hl3_d2_-_drogenentzug/substitution-725701213__crop-1573221145_-_kopie.jpg'; PRELOAD_IMAGE = 'media/lk-mauer/g1_-_abteilungen/g1_hl5_-_abhangigkeitserkrankungen/g1_hl3_d2_-_drogenentzug/substitution-725701213__crop-1573221145_-_kopie.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 = 640; var map_h = 427; 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_8() { // DATA HOME_SCENE = load_scene_2; BACK_SCENE = load_scene_8; NEXT_SCENE = load_scene_10; PREV_SCENE = load_scene_4; CURRENT_SCENE = load_scene_8; SCENE_TITLE = '04 | 4th Dept. Forensic Psychiatry'; SCENE_NUMBER = '04'; 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/lk-mauer/g1_-_abteilungen/g1_hl4_-_forensische_psychiatrie/forensische-psychiatrie_1038075334__CROP-1631517347.jpg'; PRELOAD_IMAGE = 'media/lk-mauer/g1_-_abteilungen/g1_hl4_-_forensische_psychiatrie/forensische-psychiatrie_1038075334__CROP-1631517347.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 = 1500; var map_h = 1107; 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 = [385, 263]; 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_32; var marker_image = 'media/lk-mauer/_generated/32/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 = 'Team/Kontakt'; 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_32() { // DATA HOME_SCENE = load_scene_2; BACK_SCENE = load_scene_8; NEXT_SCENE = load_scene_10; PREV_SCENE = load_scene_4; CURRENT_SCENE = load_scene_32; SCENE_TITLE = '04 | Team/Kontakt'; SCENE_NUMBER = '04'; 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/lk-mauer/g1_-_abteilungen/g1_hl4_-_forensische_psychiatrie/liste-guide-abteilungen-hl-abt-4-forensik-640x400.jpg'; PRELOAD_IMAGE = 'media/lk-mauer/g1_-_abteilungen/g1_hl4_-_forensische_psychiatrie/liste-guide-abteilungen-hl-abt-4-forensik-640x400.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 = 640; var map_h = 400; 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_10() { // DATA HOME_SCENE = load_scene_2; BACK_SCENE = load_scene_10; NEXT_SCENE = load_scene_2; PREV_SCENE = load_scene_8; CURRENT_SCENE = load_scene_10; SCENE_TITLE = '05 | 5th Dept. Child and Adolescent Psychiatry'; SCENE_NUMBER = '05'; 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/lk-mauer/g1_-_abteilungen/g1_hl6_-_kinder-_und_jugendpsychologie/kinder-jugendpsych-2__CROP-1573220898.jpg'; PRELOAD_IMAGE = 'media/lk-mauer/g1_-_abteilungen/g1_hl6_-_kinder-_und_jugendpsychologie/kinder-jugendpsych-2__CROP-1573220898.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 = 1000; var map_h = 668; 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 = [262, 311]; 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_34; var marker_image = 'media/lk-mauer/_generated/34/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 = 'Team/Kontakt'; 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_34() { // DATA HOME_SCENE = load_scene_2; BACK_SCENE = load_scene_10; NEXT_SCENE = load_scene_2; PREV_SCENE = load_scene_8; CURRENT_SCENE = load_scene_34; SCENE_TITLE = '05 | Team/Kontakt'; SCENE_NUMBER = '05'; 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/lk-mauer/g1_-_abteilungen/g1_hl6_-_kinder-_und_jugendpsychologie/liste-guide-abteilungen-hl-abt-6-kinderpsych-640x400.jpg'; PRELOAD_IMAGE = 'media/lk-mauer/g1_-_abteilungen/g1_hl6_-_kinder-_und_jugendpsychologie/liste-guide-abteilungen-hl-abt-6-kinderpsych-640x400.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 = 640; var map_h = 400; 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_2; $(document).ready(function() { SCENE_TITLE = "01 | 1st Dept. Adult Psychiatry"; $("#breadcrumbs-vr h1").text(SCENE_TITLE); }); // DEFINE MAP IMAGE MAP_FILE = 'media/lk-mauer/maps/191106-plan-mauer-neu-vr.png'; // 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 = 1600; var map_h = 1249; 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/lk-mauer/_generated/3/marker-en-icon-title.png'; var target = load_scene_3; // 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 = [620, 357]; 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 = '2nd Dept. Stationary Psychotherapy'; MAP_BUTTONS.push(object); var image = 'media/lk-mauer/_generated/2/marker-en-icon-title.png'; var target = load_scene_2; // 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 = [442, 552]; 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 = '1st Dept. Adult Psychiatry'; MAP_BUTTONS.push(object); var image = 'media/lk-mauer/_generated/4/marker-en-icon-title.png'; var target = load_scene_4; // 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 = [873, 234]; 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 = '3rd Dept. Addictions'; MAP_BUTTONS.push(object); var image = 'media/lk-mauer/_generated/8/marker-en-icon-title.png'; var target = load_scene_8; // 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 = [1176, 846]; 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 = '4th Dept. Forensic Psychiatry'; MAP_BUTTONS.push(object); var image = 'media/lk-mauer/_generated/10/marker-en-icon-title.png'; var target = load_scene_10; // 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 = [884, 958]; 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 = '5th Dept. Child and Adolescent Psychiatry'; 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; }