Skip to content
Snippets Groups Projects
Select Git revision
  • 9d1084a19e6d87e4176755a94cba17486924eac9
  • master default protected
  • experimental
3 results

test.html

Blame
  • 42loop's avatar
    42loop authored
    a53f6bbd
    History
    test.html 10.93 KiB
    <html>
      <head>
    <!--    <script src="aframe.min.js"></script> -->
    
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> 
    
     <!--   <script src="https://unpkg.com/aframe-physics-system@1.4.0/dist/aframe-physics-system.min.js"></script>  -->
    
    <script src="aframe-frustum-lock-component.js"></script> 
    
    <script src="aframe-pointcloud-component.js"></script>
    
        <script src="aframe-click-drag-component.min.js"></script>
    
    <script src="aframe-mouse-cursor-component.js"></script> 
    
      <script src="https://rawgit.com/oscarmarinmiro/aframe-video-controls/master/dist/aframe-video-controls.min.js"></script>
    
      <script>
        registerAframeClickDragComponent(window.AFRAME);
      </script>
    
      </head>
    
      <body>
    
      
    
      <script type="text/javascript">
    
    /*
    AFRAME.registerComponent('cursor-listener', {
        init: function () {
               this.el.addEventListener('click', function (evt) {
                console.log('I was clicked');               
            });
      }
    });
    */
            AFRAME.registerComponent('raycaster-autorefresh', {
      init: function () {
        var el = this.el;
        this.el.addEventListener('model-loaded', function () {
          document.querySelector("[cursor]").setAttribute("cursor", "fuse: false; rayOrigin: mouse;");
    
          var cursorEl = el.querySelector('[raycaster]');
          cursorEl.components.raycaster.refreshObjects();
        });
      }
    });
    
          var myVar = setInterval(myTimer, 1000);
    
    function startVideo(){
        var videoEl = document.querySelector('#video1');
        console.log(videoEl)
        videoEl.play();
    }
    
    
    
          function hud_log(t)
          {
            var mylog=sceneEl.querySelector('#debug');
            mylog.setAttribute('value',t);  
          }
    
    
          function myTimer()
          {
            //console.log("timer event");
            var mytime=sceneEl.querySelector('#timetext');
            var d = new Date();
            mytime.setAttribute('value',d.toLocaleTimeString());  
          }
    
          function run()
          {
    
            console.log("initializing scene");
    
    
            var ass=document.querySelector('a-assets');
            while (!ass.hasLoaded)
                {console.log("assets not yet loaded");
            }
    
            var mybutton=document.querySelector('#button');
            //console.log(mybutton);
            mybutton.addEventListener('mouseup', function (event) {
    
    //startVideo();
    
                console.log('Entity clicked: ',event.detail.target.id);
                hud_log('button clicked !');
    
    /*
            var el = document.getElementById('scene');
            
    var kunschtcontainer=document.createElement('a-entity');
    kunschtcontainer.setAttribute('position', '-3 1 0');
    
            var obj = document.createElement('a-obj-model');
            obj.setAttribute('src', '#kunscht1-obj');
            obj.setAttribute('mtl', '#kunscht1-mtl');
            obj.setAttribute('scale', '0.005 0.005 0.005');
            
            obj.setAttribute('rotation','-90 0 0');
            obj.setAttribute('id','kunscht1');
            obj.setAttribute('shadow','cast')
      
            obj.addEventListener('click', function (event) {
              console.log('Entity clicked: ',event.detail.target.id);
              hud_log('Kunst !');
            });
            kunschtcontainer.appendChild(obj);
    
    var anim=document.createElement('a-animation');
    anim.setAttribute('attribute','rotation');
    anim.setAttribute('dur','20000');
    anim.setAttribute('fill','forwards');
    anim.setAttribute('to','0 360 0');
    anim.setAttribute('easing','linear');
    anim.setAttribute('repeat','indefinite');
    
    kunschtcontainer.appendChild(anim);
    
            el.appendChild(kunschtcontainer);
    
            var myspot=sceneEl.querySelector('#spotlight');
            var k=sceneEl.querySelector('#kunscht1');
            myspot.setAttribute('light','target',k);  
    
            var obj2 = document.createElement('a-obj-model');
            obj2.setAttribute('src', '#ubootgang-obj');
            obj2.setAttribute('mtl', '#ubootgang-mtl');
            obj2.setAttribute('shadow','cast')
      //obj2.setAttribute('id','kunscht1');
            el.appendChild(obj2);
    
     
    var egroup=document.createElement('a-entity');
    egroup.setAttribute('id','electro-group');
    
    egroup.setAttribute('material','opacity:0.8;transparent:true;color:#ff8800');
    
            var obj4 = document.createElement('a-obj-model');
            obj4.setAttribute('src', '#elektro-obj');
            obj4.setAttribute('color', '#0000FF');
            
            //obj4.setAttribute('mtl', '#elektro-mtl');
            
      //obj2.setAttribute('id','kunscht1');
      egroup.appendChild(obj4);
            el.appendChild(egroup);
    
    var pcontainer=document.createElement('a-entity');
            pcontainer.setAttribute('scale','.1 .1 .1');
            pcontainer.setAttribute('rotation','-91 205 0');
    pcontainer.setAttribute('position','-3.9 2.22 2.52');
    
    
            var obj3 = document.createElement('a-pointcloud');
            obj3.setAttribute('src', '#pointcloud-ply');
            obj3.setAttribute('size','.01');
            obj3.setAttribute('scale','.1 .1 .1');
        //    obj3.setAttribute('texture','#cloudtex-png');
            obj3.setAttribute('depthWrite','false');
            
            pcontainer.appendChild(obj3);
            
      //obj2.setAttribute('id','kunscht1');
            el.appendChild(pcontainer);
    
    */
    });
    
    /*
    var myartwork=sceneEl.querySelector('#kunscht1');
    console.log(myartwork);
    myartwork.addEventListener('click', function (event) {
      console.log('Entity clicked: ',event.detail.target.id);
      hud_log('Kunst !');
    });
    
    var mytestcube2=sceneEl.querySelector('#video1');
    console.log(mytestcube2);
    mytestcube2.addEventListener('click', function (event) {
      console.log('Entity clicked: ',event.detail.target.id);
      hud_log('Video !');
    });
    
    */
    
          };
    
    
    
    </script>
    
    
    
    
    
    
    
    <a-scene id="scene" raycaster-autorefresh light="defaultLightsEnabled: true" antialias="true">
    
    
    <a-assets>
            
    
            <a-asset-item id="basemodel-obj" src="assets/untitled.obj"></a-asset-item>
            <a-asset-item id="basemodel-mtl" src="assets/Halle.mtl"></a-asset-item>
    
    
    <!--        <img id="logo" src="assets/logo.gif">
    
            <video id="testvid" autoplay src="assets/machines.m4v"></video>
    
            <a-asset-item id="ubootgang-obj" src="assets/ubootgang.obj"></a-asset-item>
            <a-asset-item id="ubootgang-mtl" src="assets/ubootgang.mtl"></a-asset-item>
    
            <a-asset-item id="elektro-obj" src="assets/elektro.obj"></a-asset-item>
            <a-asset-item id="elektro-mtl" src="assets/elektro.mtl"></a-asset-item>
    
    
            <a-asset-item id="traverse1-obj" src="assets/traverse1.obj"></a-asset-item>
            <a-asset-item id="traverse1-mtl" src="assets/traverse1.mtl"></a-asset-item>
            <a-asset-item id="traverse2-obj" src="assets/traverse1.obj"></a-asset-item>
            <a-asset-item id="traverse2-mtl" src="assets/traverse1.mtl"></a-asset-item>
    
            <a-asset-item id="kunscht1-obj" src="assets/newhill.obj"></a-asset-item>
            <a-asset-item id="kunscht1-mtl" src="assets/newhill.mtl"></a-asset-item>
    
            <a-asset-item id="pointcloud-ply" src="assets/garage8.ply"></a-asset-item>
            <a-asset-item id="cloudtex-png" src="assets/cloudtex.png"></a-asset-item>
    
    -->
    
    </a-assets>
    
    
    
    <!--obj imports -->
    <!--obj imports -->
    
    <!--shadow="cast: true; receive: true"-->
    <a-entity  shadow="cast: true; receive: true" position="0 0 0" scale="1 1 1" rotation="0 0 0" obj-model="obj: #basemodel-obj;mtl: #basemodel-mtl"></a-entity>
    
    <!--<a-entity shadow="cast: true; receive: true" material="opacity:1;transparent:false" position="0 0 0" scale="1 1 1" rotation="0 0 0" obj-model="obj: #ubootgang-obj; mtl: #ubootgang-mtl"></a-entity>-->
    
    
    <!--<a-entity position="0 0 0" scale="1 1 1" rotation="0 0 0" obj-model="obj: #pointcloud-obj; mtl: #pountcloud-mtl"></a-entity>-->
    
    <!--
    <a-entity material="opacity:0.8;transparent:true" position="-4 4.35 -1" scale=".001 .001 .001" rotation="0 90 -90" obj-model="obj: #traverse1-obj; mtl: #traverse1-mtl"></a-entity>
    
    <a-entity material="opacity:0.8;transparent:true" position="-4.4 4.35 2.4" scale=".001 .001 .001" rotation="0 90 -90" obj-model="obj: #traverse2-obj; mtl: #traverse2-mtl"></a-entity>
    
    <a-entity material="opacity:0.8;transparent:true" position="-4 4.35 6.4" scale=".001 .001 .001" rotation="0 90 -90" obj-model="obj: #traverse2-obj; mtl: #traverse2-mtl"></a-entity>
    -->
    
    <!--  <a-entity  id="kunscht1" material="opacity:0.8;transparent:true;color:#ff8800" position="-3 1 0" scale=".005 .005 .005" rotation="-90 0 0" obj-model="obj: #kunscht1-obj; mtl: #kunscht1-mtl" shadow="cast: true">
        <a-animation attribute="rotation"
                   dur="20000"
                   fill="forwards"
                   to="-90 360 0"
                   easing="linear"
                   repeat="indefinite"></a-animation>
      </a-entity>
    
    -->
    
    
    <!-- video -->
    
    
    <!--<a-video id="video1" scale=".35 .35 .35" src="#testvid" width="16" height="9" position="-4.5 3.0 -5.8" material="opacity:0.8;transparent:true"></a-video>
    -->
    
    <!--<a-entity position="-4 1.8 0" video-controls="src:#video1"></a-entity>-->
    
    <!--
    <a-box position="-3 0.5 0" scale="1 1 1" rotation="0 0 0" color="#333333" shadow="cast: true"></a-box>
    -->
    
    <!--camera-->
    <a-entity mouse-cursor position="-1 0 0" rotation="0 90 0" >
    
    <a-camera fov="50">
    <!--cursor fixed to camera-->
    
    
              <a-entity cursor="fuse: true; fuseTimeout: 500"
                      position="0 0 -1"
                      geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                      material="color: orange; shader: flat">
              </a-entity>
    
    
    
    
    <!--hud debug display-->
    
    
    <a-entity position="0 -.8 -1.5">
    
    <a-plane cursor-listener id="screen" scale="2 1 1"  frustum-lock material="color: #888888;opacity:0.6;transparent:true"></a-plane>
    
    <a-box cursor-listener id="button" position="0.7 0.3 0" scale=".2 .2 0.2" rotation="0 0 0" color="#CC77FF"></a-box> 
    
    <a-text cursor-listener id="debug" width="2" side="double" position="-.8 0.5 0.2" text="transparent:true;color:#efef16" value="debug !"></a-text>
    
    <a-text click-drag id="timetext" width="2" side="double" position="-.8 0.4 0.2" text="transparent:true;color:#efab16" value="Time!"></a-text>
    
    
    </a-entity>
    
            
    
    
    
    <!-- head light-->
    <!--
    <a-entity light="color:#CCC;type:point;intensity:0.3" ></a-entity>
    -->
            </a-camera>
    </a-entity>
    
    
    
    
    <!--lights  -->
    
    <!-- point light in the middle-->
    <!--<a-entity light="color:#BBB;type:point;intensity:0.8" position="-3.7 2.3 0"></a-entity>-->
    
    <!-- spot on artwork-->
    <!--target / rotation does not work like this...  -->
    
    <!--
    <a-entity id="spot" position="-2 4 2">
    <a-entity id="spotlight" light="color:#F80;type:spot;intensity:3.5;angle:5;target:kunscht1;castShadow:true"  ></a-entity></a-entity>
    -->
    
    <!--ambient light-->
    <a-entity light="color: #888; intensity: 1.5" position="-3 1 0"></a-entity>
    
    <!-- sun -->
     
    <a-entity id="sun" light="type: directional; color: #F9E1A6; intensity: 0.8;castShadow:true;shadowCameraLeft:-10;shadowCameraTop:16;shadowCameraFar:60;shadowCameraRight:15" position="10 5 -5" ></a-entity>
    
    
    <a-sky color="#BBBBFF"></a-sky>
    
    
    </a-scene>
    </body>
    
    
    <!--check for loaded-->
    
    <script type="text/javascript">
        console.log("initializing testscript");
        var sceneEl = document.querySelector('a-scene');
    
        if (sceneEl.hasLoaded) {
          console.log("scene loaded");
    
          run();
    
        } else {
          sceneEl.addEventListener('loaded', run);
        }
    </script>
    
    
    </html>