Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
dist
examples/basic
README.md
index.html
index.js
package.json

README.md

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 selector 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');
You can’t perform that action at this time.