Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <img id="city-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg" thmbpos1="1 1 1" thmbpos2="2 1 2" thmbpos3="3 1 3">
- <img id="cubes-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg" thmbpos1="1 1 1" thmbpos2="1 2 2" thmbpos3="1 3 3">
- <img id="sechelt-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg" thmbpos1="1 1 1" thmbpos2="2 2 2" thmbpos3="3 3 3">
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>360° Image Gallery</title>
- <meta name="description" content="360° Image Gallery - A-Frame">
- <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
- <script src="https://npmcdn.com/aframe-animation-component@3.0.1"></script>
- <script src="https://npmcdn.com/aframe-event-set-component@3.0.1"></script>
- <script src="https://npmcdn.com/aframe-layout-component@3.0.1"></script>
- <script src="https://npmcdn.com/aframe-template-component@3.1.1"></script>
- <script src="components/set-image.js"></script>
- </head>
- <body>
- <a-scene>
- <a-assets>
- <img id="city" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
- <img id="city-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
- <img id="cubes-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
- <img id="sechelt-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
- <audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg">
- </audio>
- <img id="cubes" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
- <img id="sechelt" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
- <!-- Image link template to be reused. -->
- <script id="link" type="text/html">
- <a-entity class="link"
- geometry="primitive: plane; height: 1; width: 1"
- material="shader: flat; src: ${thumb}"
- event-set__1="_event: mousedown; scale: 1 1 1"
- event-set__2="_event: mouseup; scale: 1.2 1.2 1"
- event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
- event-set__4="_event: mouseleave; scale: 1 1 1"
- set-image="on: click; target: #image-360; src: ${src}"
- sound="on: click; src: #click-sound"></a-entity>
- </script>
- </a-assets>
- <!-- 360-degree image. -->
- <a-sky id="image-360" radius="10" src="#city"></a-sky>
- <!-- Image links. -->
- <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
- <a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
- <a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb"></a-entity>
- <a-entity template="src: #link" data-src="#sechelt" data-thumb="#sechelt-thumb"></a-entity>
- </a-entity>
- <!-- Camera + cursor. -->
- <a-entity camera look-controls>
- <a-cursor id="cursor"
- animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
- animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
- event-set__1="_event: mouseenter; color: springgreen"
- event-set__2="_event: mouseleave; color: black"
- fuse="true"
- raycaster="objects: .link"></a-cursor>
- </a-entity>
- </a-scene>
- </body>
- </html>
- /* global AFRAME */
- /**
- * Component that listens to an event, fades out an entity, swaps the texture, and fades it
- * back in.
- */
- AFRAME.registerComponent('set-image', {
- schema: {
- on: {type: 'string'},
- target: {type: 'selector'},
- src: {type: 'string'},
- dur: {type: 'number', default: 300}
- },
- init: function () {
- var data = this.data;
- var el = this.el;
- this.setupFadeAnimation();
- el.addEventListener(data.on, function () {
- // Fade out image.
- data.target.emit('set-image-fade');
- // Wait for fade to complete.
- setTimeout(function () {
- // Set image.
- data.target.setAttribute('material', 'src', data.src);
- }, data.dur);
- });
- },
- /**
- * Setup fade-in + fade-out.
- */
- setupFadeAnimation: function () {
- var data = this.data;
- var targetEl = this.data.target;
- // Only set up once.
- if (targetEl.dataset.setImageFadeSetup) { return; }
- targetEl.dataset.setImageFadeSetup = true;
- // Create animation.
- targetEl.setAttribute('animation__fade', {
- property: 'material.color',
- startEvents: 'set-image-fade',
- dir: 'alternate',
- dur: data.dur,
- from: '#FFF',
- to: '#000'
- });
- }
- });
- <html>
- <head>
- <meta charset="utf-8">
- <title>decke wand boden Muratto Pattern Tiles Color Silver</title>
- <meta name="description" content="decke wand boden Muratto Pattern Tiles Color Silver">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <script src="http://vr.decke-wand-boden.de/assets/aframe_min.js"></script>
- <script src="http://vr.decke-wand-boden.de/assets/aframe-animation-component.min"></script>
- <script src="http://vr.decke-wand-boden.de/assets/aframe-event-set-component.min"></script>
- <script src="http://vr.decke-wand-boden.de/assets/aframe-layout-component.min"></script>
- <script src="http://vr.decke-wand-boden.de/assets/aframe-template-component"></script>
- <script src="http://vr.decke-wand-boden.de/assets/set-image.js"></script>
- </head>
- <body>
- <script>
- var changesphere = function() {
- console.log(document.querySelector("a-sky").getAttribute("id"))
- if (document.querySelector("#image-360").getAttribute("id") !== "2") {
- document.querySelector("#link2").setAttribute("position", "3 -4 -6");
- }
- }
- </script>
- <a-scene>
- <a-assets>
- <img id="1" crossorigin="anonymous" src="http://vr.decke-wand-boden.de/images/Muratto/Pattern Tiles/Muratto_Pattern_Tiles_Cinetic_Silver.jpg">
- <img id="2" crossorigin="anonymous" src="http://vr.decke-wand-boden.de/images/Corpet-Boden/Corkstone/CorkStone_Beton_Aschgrau.jpg">
- <img id="3" crossorigin="anonymous" src="http://vr.decke-wand-boden.de/images/RenoFloor/DRAINfloor/RenoFloor_DRAINfloor_Basalt.jpg">
- <img id="1-thumb" crossorigin="anonymous" src="http://vr.decke-wand-boden.de/images/Muratto/Pattern Tiles/Muratto_Pattern_Tiles_Cinetic_Silver.jpg">
- <img id="2-thumb" crossorigin="anonymous" src="http://vr.decke-wand-boden.de/images/Corpet-Boden/Corkstone/CorkStone_Beton_Aschgrau.jpg">
- <img id="3-thumb" crossorigin="anonymous" src="http://vr.decke-wand-boden.de/images/Test/dwb-Image-Cover-Small.jpg">
- <audio id="click-sound" crossorigin="anonymous" src="http://vr.decke-wand-boden.de/assets/click.ogg"></audio>
- <!-- Image link template to be reused. -->
- <script id="link" type="text/html">
- <a-entity class="link"
- geometry="primitive: plane; height: 1; width: 1"
- material="shader: flat; src: ${thumb}"
- event-set__1="_event: mousedown; scale: 1 1 1"
- event-set__2="_event: mouseup; scale: 1.2 1.2 1"
- event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
- event-set__4="_event: mouseleave; scale: 1 1 1"
- set-image="on: click; target: #image-360; src: ${src}"
- sound="on: click; src: #click-sound"></a-entity>
- </script>
- </a-assets>
- <!-- 360-degree image. -->
- <a-sky id="image-360" radius="10" rotation="0 100 0" src="#1"></a-sky>
- <!-- Image links. -->
- <a-entity id="link1" template="src: #link" data-src="#1" data-thumb="#1-thumb" position="0.632 0.859 7.667" rotation="0 -160 0"></a-entity>
- <a-entity id="link2" template="src: #link" data-src="#2" data-thumb="#2-thumb" position="2 -2 -5"></a-entity>
- <a-entity id="link3" template="src: #link" data-src="#3" data-thumb="#3-thumb" position="3 -3 -6"></a-entity>
- <!-- Camera + cursor. -->
- <a-entity camera look-controls>
- <a-cursor id="cursor"
- material="color: #acaca6"
- animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
- animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
- event-set__1="_event: mouseenter; color: #ff8000"
- event-set__2="_event: mouseleave; color: #acacac"
- fuse="true"
- raycaster="objects: .link"></a-cursor>
- </a-entity>
- </a-scene>
- </body>
- </html>
Add Comment
Please, Sign In to add comment