aframe-crawling-cursor

1.0.9 • Public • Published

Crawling Cursor

An A-Frame component to move cursor along object's surface.

DEMO PAGE (link)

DEMO

API

Property Description Default Value
target selector(#id) of a cursor null
offset distance cursor hovers over intersection point 0.05 (meters, or 5cm)

Usage

1.put a-cursor object in a document.

<a-cursor></a-cursor>

2.set raycaster and crawling-cursor component on camera object.

<a-camera raycaster crawling-cursor></a-camera>

options

If you want a entity to be a cursor, you can set id on 'target' property.

<a-camera raycaster crawling-cursor="target: #my-cursor"></a-camera>
<a-ring id="my-cursor"></a-ring>

If you want some object to avoid intersection, add ignore-ray class to them.

<!-- cursor will not be along with this box -->
<a-box class="ignore-ray"></a-box>

Installation

browser

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> 
  <script src="https://cdn.rawgit.com/jujunjun110/aframe-crawling-cursor/master/dist/aframe-crawling-cursor.min.js"></script> 
</head>
 
<body>
  <a-scene>
    <a-cursor></a-cursor>
    <a-camera raycaster crawling-cursor></a-camera>
  </a-scene>
</body>

npm

Install via npm:

$npm install aframe-crawling-cursor

Then register and use.

require('aframe');
require('aframe-crawling-cursor');

Package Sidebar

Install

npm i aframe-crawling-cursor

Weekly Downloads

40

Version

1.0.9

License

MIT

Last publish

Collaborators

  • jujunjun110