dragGH102 · July 6, 2017 17:34
diff --git a/aframe_look_and_events.html b/aframe_look_and_events.html
 <html>
  <head>
    <title>Teleport movement demo</title>
    <meta name="description" content="Teleport movement demo">
    <script src="https://aframe.io/releases/0.3.1/aframe.js"></script>
  </head>
  <body>
    <a-scene>
      
    <a-entity position="0 1.8 4" camera id="camera" look-controls="enabled: true">
      <!-- cursor works as it's wrapped in "camera" and represents where 
        - we're looking at ("gaze" - e.g. cardboard)
        - raycaster (e.g. Oculus)
        - we're looking at (my moving it with the mouse)
      -->
      <a-cursor color="white"></a-cursor>
    </a-entity>
    
    <a-sky color="lightpink"></a-sky>
   
    <a-box id="red" position="-2 0 -5" material="transparent: true; opacity: 0.1; color:red;"></a-box>
    <a-box id="yellow" position="2 0 -5" material="transparent: true; opacity: 0.1; color:yellow;"></a-box>
    
    <a-box id="blue" position="0 2 -5" material="transparent: true; opacity: 0.1; color:blue;"></a-box>
    <a-box id="green" position="0 -2 -5" material="transparent: true; opacity: 0.1; color:green;"></a-box>

    </a-scene>
        
    <script>
      
      var scene = document.querySelector('a-scene');
      if (scene.hasLoaded) {
        run();
      } else {
        scene.addEventListener('loaded', run);
      }

      // shake pair
      function run () {
        var green = document.getElementById('green');
        var camera = document.getElementById('camera');
        green.addEventListener('mouseenter', function() {
          // when we "look" at the green cube, change camera position
          camera.setAttribute("position","0 -2 -2");
          
          // we could have achieved the same result by placing
          // <a-animation attribute="position" begin="glide" to="0 -2 -2"></a-animation>
          // as child of "camera" and triggering the animation by ...
          // document.getElementById('camera').emit('glide');
        });
      }
      
    </script>
  </body>
 </html>
	<html>
	<head>
	<title>Teleport movement demo</title>
	<meta name="description" content="Teleport movement demo">
	<script src="https://aframe.io/releases/0.3.1/aframe.js"></script>
	</head>
	<body>
	<a-scene>

	<a-entity position="0 1.8 4" camera id="camera" look-controls="enabled: true">
	<!-- cursor works as it's wrapped in "camera" and represents where
	- we're looking at ("gaze" - e.g. cardboard)
	- raycaster (e.g. Oculus)
	- we're looking at (my moving it with the mouse)
	-->
	<a-cursor color="white"></a-cursor>
	</a-entity>

	<a-sky color="lightpink"></a-sky>

	<a-box id="red" position="-2 0 -5" material="transparent: true; opacity: 0.1; color:red;"></a-box>
	<a-box id="yellow" position="2 0 -5" material="transparent: true; opacity: 0.1; color:yellow;"></a-box>

	<a-box id="blue" position="0 2 -5" material="transparent: true; opacity: 0.1; color:blue;"></a-box>
	<a-box id="green" position="0 -2 -5" material="transparent: true; opacity: 0.1; color:green;"></a-box>

	</a-scene>

	<script>

	var scene = document.querySelector('a-scene');
	if (scene.hasLoaded) {
	run();
	} else {
	scene.addEventListener('loaded', run);
	}

	// shake pair
	function run () {
	var green = document.getElementById('green');
	var camera = document.getElementById('camera');
	green.addEventListener('mouseenter', function() {
	// when we "look" at the green cube, change camera position
	camera.setAttribute("position","0 -2 -2");

	// we could have achieved the same result by placing
	// <a-animation attribute="position" begin="glide" to="0 -2 -2"></a-animation>
	// as child of "camera" and triggering the animation by ...
	// document.getElementById('camera').emit('glide');
	});
	}

	</script>
	</body>
	</html>