aframe-look-at-component

Rotate an entity to face towards another entity in A-Frame

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
aframe-look-at-component
1,358871.0.04 years ago8 years agoMinified + gzip package size for aframe-look-at-component in KB

Readme

aframe-look-at-component

A component for A-Frame to tell an entity to face towards another entity or position. Uses three.js's Object3D .lookAt()
The look-at component defines the behavior for an entity to dynamically rotate or face towards another entity or position. The rotation of the entity will be updated on every tick. The look-at component can take either a vec3 position or a query selectormdn-queryselector to another entity.

Values

| Type | Description | |----------|-----------------------------------------------------------------------------------------------------------------------------------------------| | selector | A query selector indicating another entity to track. If the other entity is moving then the look-at component will track the moving entity. | | vec3 | An XYZ coordinate. The entity will face towards a static position. |

Usage

Browser Installation

Install and use by directly including the browser files:
<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity id="monster" geometry="primitive: box" material="src: url(monster.png)"
              look-at="[camera]"></a-entity>
    <a-entity id="player" camera></a-entity>

    <a-entity id="dog" geometry="primitive: box" material="src: url(dog.png)"
              look-at="#squirrel"></a-entity>
    <a-entity id="squirrel">
      <a-animation id="running" attribute="position" to="100 0 0"></a-animation>
    </a-entity>
  </a-scene>
</body>

NPM Installation

Install via NPM:
npm install aframe-look-at-component

Then register and use.
require('aframe');
require('aframe-look-at-component');