Geek Answers Handbook

Continuous movement of the Aframe in the viewing direction

I want to constantly move the view of my Aframe scene in the current viewing direction.

There seem to be two components for this: (1) getting the current viewing direction in the correct format, (2) determining and updating continuous animation with the current viewing direction of the camera.

I managed to get the camera viewing direction using the following code:

        <script>
AFRAME.registerComponent('listener', {
  tick: function () {
    var position = this.el.getAttribute('position');
    var rotation = this.el.getAttribute('rotation');
  }
});
        </script>

How to create an animation that moves in the direction of viewing the camera, for example, with the current tilt?

I tried this for a move:

AFRAME.registerComponent('listener', {
  tick: function () {
    var camp = document.querySelector("#cameraWrapper");
    camp.setAttribute('position', camp.getAttribute('position').add(0.1)););
  }
});
0
source share
1 answer

, THREE.Vector3(), :

var camera = document.querySelector("a-camera");
var direction = new THREE.Vector3().copy(camera.getWorldDirection());

tick tick , , , . :

tick : fucntion()
{
    var camera = document.querySelector("a-camera");
    var stepFactor = 0.1;
    camera.parent.position.add(this.direction.multiplyScalar(stepFactor));
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.7.0/dist/aframe-extras.min.js"></script>
<!DOCTYPE html>  
<html>  
<head>
<title>Camera Movement</title>
</head>
<body>
<script type="text/javascript">
	AFRAME.registerComponent("listener", {
		schema : 
		{
			stepFactor : {
				type : "number",
				default : 0.05
			}
		},
		tick : function()
		{	this.el.components.camera.camera.parent.position.add(this.el.components.camera.camera.getWorldDirection().multiplyScalar(this.data.stepFactor));
		}
	});
</script>
<a-scene>
  <a-camera  listener="stepFactor:0.01" position="0 0 30">
    <a-entity id="cursor" cursor="fuse: true;fuseTimeout:500"
    	material="color:black"
    	geometry="primitive:ring"
    	position="0 0 -1"
    	scale="0.01 0.01 0.01"
    ></a-entity>
  </a-camera>
  <a-grid></a-grid>
<a-box position="0 1 -2" color="blue" move eve></a-box>
</body>
</html>
Hide result

a-camera, this.el a-camera DOM.

+1

More articles:


All Articles