Skip to content
look-at and billboard components for A-Frame.
Branch: master
Clone or download
Latest commit 5f22260 Oct 14, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist small bug Oct 14, 2016
examples changed name of package Aug 6, 2016
scripts look at this May 10, 2016
.gitignore look at this May 10, 2016
LICENSE look at this May 10, 2016
README.md changed name of package Aug 6, 2016
index.js small bug Oct 14, 2016
package.json

README.md

aframe-look-at-component

Components for A-Frame to tell an entity to face towards another entity or position (look-at), or face the active camera (billboard). 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 takes a src parameter containing either a vec3 position or a query selector to another entity in it's src parameter, and flags to control it's runtime behavior. The checkSrcEveryFrame flag controls whether the component re-evaluates the query selector each frame, useful if the result of the selector may change over time. This is false by default. The updateWorldTransform flag controls whether the component updates the worldTransform on the underlying THREE.Object3D each frame, or uses the already computed value. This is false by default, since the worst case is that the value from the previous frame will be used (which in many cases is not noticable), and extra updates may be computationally non-trivial (depending on the size of the scene graph). However, if you want to guarantee the current, correct value is used, set this flag.

The billboard component behaves similarly to look-at, but always faces the entity toward the current camera. It takes no parameters.

Values

The attribute values of the look-at component are as follows.

Name Type Description
src 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.
checkSrcEveryFrame boolean whether to re-evaluate the src selector each frame
updateWorldTransform boolean whether to re-compute the underlying Object3D worldTransform

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.2.0/aframe.min.js"></script>
  <script src="https://rawgit.com/blairmacintyre/aframe-look-at-billboard-component/master/dist/aframe-look-at-billboard-component.min.js"></script>
</head>

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

    <a-entity id="dog" geometry="primitive: box" material="src: url(dog.png)"
              look-at="src: #squirrel"></a-entity>
    <a-entity id="squirrel">
      <a-animation id="running" attribute="position" to="100 0 0"></a-animation>
    </a-entity>
  </a-scene>
</body>
You can’t perform that action at this time.