Wondering what’s next for npm?Check out our public roadmap! »

    aframe-cursor-teleport-component

    0.0.5 • Public • Published

    aframe-cursor-teleport-component

    Version License

    Screenshot

    A simple A-Frame component for navigating scenes on non-VR devices. When combined with A-Frame's cursor and look-controls components, this allows users to freely explore A-Frame scenes using device orientation and touch on mobile or using the mouse on desktop.

    For A-Frame.

    API

    Property Description Default Value
    cameraRig Selector of the camera rig to teleport
    cameraHead Selector of the scene's active camera
    collisionEntities Selector of the meshes used to check the collisions. If no value provided a plane at Y=0 is used.
    ignoreEntities Selector of meshes that may obstruct the teleport raycaster, like UI or other clickable elements.
    landingNormal Normal vector to detect collisions with the collisionEntities (0, 1, 0)
    landingMaxAngle Angle threshold (in degrees) used together with landingNormal to detect if the mesh is so steep to jump to it. 45

    Installation

    Browser

    Install and use by directly including the browser files:

    <head>
      <title>My A-Frame Scene</title>
      <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> 
      <script src="https://unpkg.com/aframe-cursor-teleport-component@1.0.0/dist/aframe-cursor-teleport-component.min.js"></script> 
    </head>
     
    <body>
      <a-scene>
        <a-entity cursor-teleport="foo: bar"></a-entity>
      </a-scene>
    </body>

    npm

    Install via npm:

    npm install aframe-cursor-teleport-component

    Then require and use.

    require('aframe');
    require('aframe-cursor-teleport-component');

    Usage

    This component requires a camera rig setup as described in fernandojsg's aframe-teleport-controls.

    Basic Setup

    <a-scene cursor="rayOrigin: mouse">
        <a-entity id="cameraRig" cursor-teleport="cameraRig: #cameraRig; cameraHead: #head">
            <a-entity id="head" position="0 1.52 0" camera look-controls="reverseMouseDrag: true">            
            </a-entity>
        </a-entity>
    </a-scene>

    Collision Entities

    To add collision objects, simply identify them with a selector:

    <a-scene cursor="rayOrigin: mouse">
        <!-- camera rig -->
        <a-entity id="cameraRig" cursor-teleport="cameraRig: #cameraRig; cameraHead: #head; collisionEntities: .collision">
            <a-entity id="head" position="0 1.52 0" camera look-controls="reverseMouseDrag: true"></a-entity>
        </a-entity>
     
        <!-- collidable entity -->
        <a-entity class="collision" position="0 -.05 0" geometry="primitive: box; width: 8; height: .1; depth: 8"></a-entity>
    </a-scene>

    Ignored Entities

    If your scene has interactive entities that should not initiate a teleport when clicked, you can add them to the ignoredEntities array using a selector:

    <a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable" >
        <!-- camera rig -->
        <a-entity id="cameraRig" cursor-teleport="cameraRig: #cameraRig; cameraHead: #head; collisionEntities: .collision; ignoreEntities: .clickable">
            <a-entity id="head" position="0 1.52 0" camera look-controls="reverseMouseDrag: true"></a-entity>
        </a-entity>
     
        <!-- collidable entity -->
        <a-entity class="collision" position="0 -.05 0" geometry="primitive: box; width: 8; height: .1; depth: 8"></a-entity>
     
        <!-- UI element -->
        <a-entity class="clickable" color-change geometry="primitive: octahedron" scale=".2 .2 .2" position="-.8 1 -1.5"></a-entity>
    </a-scene>

    Use with aframe-teleport-controls

    This component works with fernandojsg's aframe-teleport-controls allowing for easy-to-use navigation across virtually all devices:

    <a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable" >
        <!-- camera rig -->
        <a-entity id="cameraRig" navigator="cameraRig: #cameraRig; cameraHead: #head; collisionEntities: .collision; ignoreEntities: .clickable">
            <a-entity id="head" position="0 1.52 0" camera look-controls="reverseMouseDrag: true"></a-entity>
            <a-entity laser-controls="hand: left" raycaster="objects: .clickable; far: 100" line="color: red; opacity: 0.75" teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head;"></a-entity>
            <a-entity laser-controls="hand: right" raycaster="objects: .clickable" line="color: red; opacity: 0.75" teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head;"></a-entity>
        </a-entity>
     
        <!-- collidable entity -->
        <a-entity class="collision" position="0 -.05 0" geometry="primitive: box; width: 8; height: .1; depth: 8"></a-entity>
     
        <!-- UI element -->
        <a-entity class="clickable" color-change geometry="primitive: octahedron" scale=".2 .2 .2" position="-.8 1 -1.5"></a-entity>
    </a-scene>

    Install

    npm i aframe-cursor-teleport-component

    DownloadsWeekly Downloads

    17

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    14.2 MB

    Total Files

    26

    Last publish

    Collaborators

    • avatar