Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
  <!-- Live demo and live coding for http://fabien.benetou.fr/Events/JavascriptLabBrusselsMarch2016  -->     
  <head>
    <title>Learning A-frame with VRLab Brussels third workshop</title>
    <script src="https://rawgit.com/aframevr/aframe/master/dist/aframe-v0.2.0.min.js"></script>
    <script src="https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js"></script>
    <script src="https://rawgit.com/donmccurdy/aframe-keyboard-controls/master/dist/aframe-keyboard-controls.min.js"></script>
    <script>
 ``    
  
     AFRAME.registerShader('test', {
  schema: { 'redness': { type: "number", default: 0.5, max: 1, min: 0, is: 'uniform' } },
  fragmentShader:
    'uniform float redness; ' +
    'void main() { ' +
      'gl_FragColor = vec4(redness,0.0,0.0,1.0); ' +
    '}',
});
      // reminder of Sakri's presentation, ideally directly use his own shader
      
      // see https://aframe.io/aframe/examples/test-shaders/
      // doc https://aframe.io/docs/core/shaders.html
      // alternative for more complex shader https://raw.githubusercontent.com/aframevr/aframe/50a07cac9cd2f764b9ff4cd0a5bb20e408f8f4d6/examples/test-shaders/shaders/noise.js
      
      var counter=1;
      var totalslide=5;
      function nextSlide(){}
      
      AFRAME.registerComponent('SlideRightKeyForward', {
  init: function () {    
    
    // this.el.addEventListener('keydown:ArrowRight', function () { ... }
    this.el.addEventListener('keydown:ArrowRight', function () {
    counter++;
      this.el.querySelector('#counter').setAttribute('text', 'text: (slide '+counter+'/'+totalslide+')');
 var x = this.el.querySelectorAll('.slide'+counter);
 for(var index=0; index < x.length; index++ ) { x[index].setAttribute('visible', true);  }
      // show the current slide, hide the previous one
 var x = this.el.querySelectorAll('.slide'+(counter-1));
 for(var index=0; index < x.length; index++ ) { x[index].setAttribute('visible', false);  }
           
document.querySelector('#camera').emit('slide'+counter);
      nextSlide();
​
    }.bind(this));
  },
  update: function () {
  }, 
  tick: function () {
  },
  remove: function () {},
})
      
      
      AFRAME.registerComponent('SlideLeftKeyBackward', {
        // important if a slide is missed, can happen due to lag
  init: function () {    
    this.el.addEventListener('keydown:ArrowLeft', function () {
    counter--;
      this.el.querySelector('#counter').setAttribute('text', 'text: (slide '+counter+'/'+totalslide+')');
 var x = this.el.querySelectorAll('.slide'+counter);
 for(var index=0; index < x.length; index++ ) { x[index].setAttribute('visible', true);  }
      // show the current slide, hide the next one
 var x = this.el.querySelectorAll('.slide'+(counter+1));
 for(var index=0; index < x.length; index++ ) { x[index].setAttribute('visible', false);  }
           
document.querySelector('#camera').emit('slide'+counter);
   
​
    }.bind(this));
  },
  update: function () {;
  }, 
  tick: function () {
  },
  remove: function () {},
})
  
      </script>
  </head>
  <body>
    <a-scene id="slideScene" SlideRightKeyForward="" SlideLeftKeyBackward="">
    <!-- cf https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements -->
      
    <a-assets>
      <!-- cf also https://aframe.io/docs/core/asset-management-system.html -->
      <a-mixin id="smalltitle" position="-2 2.5 1" material="color: black" scale="0.2 0.2 0.2"></a-mixin>
        <!-- cf https://aframe.io/docs/core/mixin.html -->
    </a-assets>
​
    <a-entity position="0 1.8 4" camera id="camera"
            keyboard-controls="enabled: false" look-controls="enabled: true">
        <!-- https://github.com/donmccurdy/aframe-keyboard-controls -->
  
      <a-cursor color="white"></a-cursor>
    
      <a-animation attribute="position"
               begin="slide6"
               to="4 4 5"
               dur="1000"
               fill="forwards"></a-animation>
      <!-- reminder of Sakri's presentation, easing vs physics -->
  </a-entity>
      
  <a-plane rotation="0 0 0" width="20" height="3" color="white" position="0 4 0"></a-plane>
  <a-entity id="counter" scale="0.2 0.2 0.2" text="text: (Slide 1/6)" position="2 0 1" material="color: black"></a-entity>
      
      <!-- those will become buttons equivalent for the VR mode demo experience, consider tap instead -->
      <a-cylinder id="LookLeft" position="-1 -2 3" radius="0.5"  color="black">
        <a-event name="mouseenter" scale="3 1 1" color="red"></a-event>
        <a-event name="mouseleave" scale="1 1 1" color="black"></a-event>
      </a-cylinder>
      <a-cylinder id="LookRight" position="1 -2 3" radius="0.5"  color="black">
      </a-cylinder>
​
        <!-- cf https://aframe.io/faq/#How-do-I-display-text-in-A-Frame -->
      <a-entity text="text: webVR & 3D" position="-2 3 1" material="color: black"></a-entity>
        
      <a-entity class="slide1" text="text: Slide 1 : Title of the presentation" position="-2 2.5 1" material="color: black" scale="0.2 0.2 0.2"></a-entity>
        <!-- cf https://aframe.io/faq/#Why-does-my-asset-e-g-image-video-model-not-loading -->
      <a-image class="slide1" height="1.2" src="https://ucarecdn.com/bb5c1fce-a6e0-43da-91ee-03696041c875/" crossorigin="" position="0 1 1"></a-image>
      
      <a-entity class="slide2" visible="false">  
        <a-entity mixin="smalltitle" text="text: Slide 2 : Content of other slide"></a-entity>
        <a-image height="1.2" src="https://ucarecdn.com/5454e178-876c-4d1f-8782-0e8a45536be4/" crossorigin="" position="0 1 1"></a-image>
      </a-entity>
​
      <a-entity class="slide3" visible="false">  
        <a-entity mixin="smalltitle" text="text: Slide 3 : First example of curved screen"></a-entity>
        <a-curvedimage src="https://ucarecdn.com/af7395a7-bbe9-47f2-b0cf-9c6b5932fc02/" crossorign="" radius="5.7" theta-length="72" height="2.6" rotation="0 80 0" position="-1 0.7 1" scale="0.6 0.6 0.6"></a-curvedimage>
        <a-curvedimage src="https://ucarecdn.com/c5b55ca1-f420-43f5-9c02-ff1a745b67ad/" radius="5.7" theta-length="70" height="3.02" rotation="0 -170 0" scale="0.8 0.8 0.8"></a-curvedimage>
      </a-entity>
        
      <a-entity class="slide4" visible="false">  
        <a-entity mixin="smalltitle" text="text: Slide 4 : Stack"></a-entity>
        <a-box color="red" width="1" height="0.5" position="0 1 0"></a-box>
        <a-entity text="text: webGL" position="0 1 1" material="color: black" scale="0.2 0.2 0.2"></a-entity>
        <a-box color="red" width="1" height="0.5" position="0 1.7 0"></a-box>
        <a-entity text="text: webVR" position="0 1.7 1" material="color: black" scale="0.2 0.2 0.2"></a-entity>
      </a-entity>
      
      <a-entity class="slide5" visible="false">  
        <a-entity mixin="smalltitle" text="text: Slide 5 : Sky"></a-entity>
        <a-sky src="https://ucarecdn.com/47f4e4df-bb72-4f72-aee5-613102527daa/" crossorigin=""></a-sky>     
        <!-- cf this could instead be activated, from normal image texture to sky via gaze
                check https://aframe.io/docs/components/cursor.html + https://aframe.io/docs/components/raycaster.html -->
      </a-entity>
​
      <a-entity class="slide6" visible="false">  
        <!-- 0 1.8 4 old camera position , new position 4 4 5 +4 +2 +1-->
        <a-entity mixin="smalltitle" text="text: Slide 5 : Models + Trying new camera position" position="2 5 6" rotation="0 90 0"></a-entity>
        <a-model src="https://aframe.io/aframe/examples/_models/tree1/tree1.dae" position="2 3 7"></a-model>
        <a-model src="https://aframe.io/aframe/examples/_models/tree1/tree1.dae" position="2 3 3"></a-model>
      </a-entity>
​
             
          <!-- content to add
​
        consider https://aframe.io/docs/core/asset-management-system.html
​
        early slide : rotating content to show 3D
        early slide : simple coloured boxes as layers on the stack (screen/accelerometer, GPU/CPU, OS, browser, webGL, three.js, webVR, Aframe, content)
        later slide : camera moving to show actual experience as potential VR animation, could have a low poly mountain that we navigate around
        later slide : use a similar metaphor with actors as nodes in a graph using spheres (Google, Mozilla, VRLab, content producers, users)
        nearly last slide : live coding with modification impacting the result straight away e.g. https://jsbin.com/buvayigoqu/edit?html (but by default only the first slide is visible...)
        last slide : forkable content as teaching material
        
        possible video content https://www.youtube.com/watch?v=vsgUsjNuTS4
        webM video to test , working but has to stay autoplay if it is hidden
      <a-video loop="false" visible="false" src="https://ucarecdn.com/7bc3a548-e6a8-4339-8ba8-e1effb1da954/" crossorigin="" autoplay="false" ></a-video>
        see instead https://aframe.io/docs/components/material.html#Controlling-the-Video
   
        slide 8 : slide activable en bas a gauche via la VR (gaze to show) cf discussion with Pierre at Walvis
        slide 9 : controlled view via webSockets to sync views
​
      
-->
        
    </a-scene>
    
    <script>
      // cf https://aframe.io/docs/guide/building-a-basic-scene.html interacting with the box
      
      var item = document.getElementById('LookRight');
      console.log('------item----',item);
      item.addEventListener('mouseenter', function() {
        console.log('LookRight object looked at');
        //document.emit('keydown:ArrowRight');
      });
    </script>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Utopiahpro
0viewers