https://github.com/willviles/ember-3d-orbit-controls

Ember Addon to add Three.js orbit controls to Ember 3D.
https://github.com/willviles/ember-3d-orbit-controls

Last synced: 9 months ago
JSON representation

Ember Addon to add Three.js orbit controls to Ember 3D.

• Host: GitHub
• URL: https://github.com/willviles/ember-3d-orbit-controls
• Owner: willviles
• License: mit
• Created: 2017-01-01T16:28:28.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-02-21T12:11:07.000Z (over 9 years ago)
• Last Synced: 2025-05-13T17:16:31.575Z (about 1 year ago)
• Language: JavaScript
• Size: 15.6 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
Ember 3D Orbit Controls [![npm](https://img.shields.io/npm/v/ember-3d-orbit-controls.svg)](https://www.npmjs.com/package/ember-3d-orbit-controls)

======

Offers Three.js Orbit Controls functionality for [Ember 3D](https://github.com/willviles/ember-3d), an Ember Addon for using [Three.js](https://github.com/mrdoob/three.js).

Orbit controls perform orbiting, dollying (zooming), and panning with mouse, mousewheel, touch, and arrow key support. Check out the official [example](https://threejs.org/examples/misc_controls_orbit.html).

## Installation

Ensure you've installed Ember 3D:

`ember install ember-3d`

Then install Ember 3D Orbit Controls

`ember install ember-3d-orbit-controls`

## Mixin

Ember 3D Orbit Controls enables you to use the [OrbitControlsInteractionMixin](https://github.com/willviles/ember-3d-orbit-controls/blob/master/addon/interactions/orbit-controls.js), which registers orbit controls as `orbitControls` on the scene component. You may also pass an options POJO which will be used to set up the controls.

```javascript

// app/3d/scene-id/interactions/orbit-controls.js

import OrbitControlsInteractionMixin from 'ember-3d-orbit-controls/interactions/orbit-controls';

export default OrbitControlsInteractionMixin.extend({

  options: {

    enableZoom: false,

    enablePan: false,

    maxPolarAngle: Math.PI / 2

  }

});

```

For more information on available options, check out the Three.js code for [Orbit Controls](https://github.com/mrdoob/three.js/blob/576c75dadaf04c76b10e3f9b6e36f9af53e3896c/examples/js/controls/OrbitControls.js).