Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rozek/aframe-hemisphere-controls
a simple "orbit-controls" alternative for A-Frame
https://github.com/rozek/aframe-hemisphere-controls
a-frame orbit-controls three-js threejs
Last synced: about 2 months ago
JSON representation
a simple "orbit-controls" alternative for A-Frame
- Host: GitHub
- URL: https://github.com/rozek/aframe-hemisphere-controls
- Owner: rozek
- License: mit
- Created: 2022-08-18T10:04:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-23T19:56:25.000Z (over 2 years ago)
- Last Synced: 2024-10-12T22:21:14.713Z (3 months ago)
- Topics: a-frame, orbit-controls, three-js, threejs
- Language: JavaScript
- Homepage:
- Size: 88.9 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# aframe-hemisphere-controls #
a simple "orbit-controls" alternative for A-Frame
For a simple model viewer based on an [A-Frame](https://github.com/aframevr/aframe/) instance embedded in a web page I needed a mechanism to rotate the shown model by mouse, finger, arrow and WASD keys. Only model(!) rotation was needed, panning and zooming were unwanted. Additionally, stereoscopic display (aka "VR mode") and gyroscopes found in mobile devices had to be disabled.
And since the existing [orbit-controls](https://github.com/supermedium/superframe/tree/master/components/orbit-controls/) component did not meet my requirements, I just made my own.
> Note: like many others, `aframe-hemisphere-controls` are based on the Three.js [`OrbitControls`](https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js) found in the Three.js examples folder. However, you do not have to import `OrbitControls` yourself, they come bundled into `aframe-hemisphere-controls`
**NPM users**: please consider the [Github README](https://github.com/rozek/aframe-hemisphere-controls/blob/main/README.md) for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)
> Just a small note: if you like this work and plan to use it, consider "starring" this repository (you will find the "Star" button on the top right of this page), so that I know which of my repositories to take most care of.
## Installation ##
`aframe-hemisphere-controls` may be used as an ECMAScript module (ESM) or explicitly loaded after the `` tag for A-Frame itself.
For the ESM variant, install the package into your build environment using [NPM](https://docs.npmjs.com/) with the command
```
npm install aframe-hemisphere-controls
```
and `import` it into your code whereever needed
```javascript
import "aframe-hemisphere-controls"
```
Otherwise, load the plain script file directly
```html
<script src="https://unpkg.com/aframe-hemisphere-controls">
```
## Properties ##
`aframe-hemisphere-controls` is an A-Frame component with the following properties:
PropertiesDescription
positiona vector with the initial camera position (default: `0 1 4`)
targeta vector specifying the point the camera looks at and orbits around (default: `0 0 0`)
## Usage ##
Once loaded or imported, `aframe-hemisphere-controls` may be used as a component of the scene element
```html
```
By default, the shown model is assumed to be positioned in the center of the coordinate system with the camera placed one unit above and four units in front - if need be, you may change these settings as required.
`vr-mode-ui` and `look-controls` will automatically be disabled.
## Operation ##
For the operation, imagine your model being placed inside a small "snow ball" - by rotating the snow ball the model is rotated as well and can be seen from different angles.
Rotation can be achieved by **dragging with mouse or finger** and by using **arrow or "WASD" keys**. The **"Home" key resets** the scene to the original camera position.
## Example ##
Here is a complete example (albeit without the HTML boilerplate)
```html
```
## Build Instructions ##
You may easily build this package yourself.
Just install [NPM](https://docs.npmjs.com/) according to the instructions for your platform and follow these steps:
1. either clone this repository using [git](https://git-scm.com/) or [download a ZIP archive](https://github.com/rozek/aframe-hemisphere-controls/archive/refs/heads/main.zip) with its contents to your disk and unpack it there
2. open a shell and navigate to the root directory of this repository
3. run `npm install` in order to install the complete build environment
4. execute `npm run build` to create a new build
You may also look into the author's [build-configuration-study](https://github.com/rozek/build-configuration-study) for a general description of his build environment.
## License ##
[MIT License](LICENSE.md)