https://github.com/fibo/three-orbitcontrols

is the three.js OrbitControls from official repo examples
https://github.com/fibo/three-orbitcontrols

camera orbitcontrols threejs

Last synced: 9 days ago
JSON representation

is the three.js OrbitControls from official repo examples

• Host: GitHub
• URL: https://github.com/fibo/three-orbitcontrols
• Owner: fibo
• License: mit
• Archived: true
• Created: 2016-07-14T13:26:30.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-12-11T10:23:09.000Z (about 5 years ago)
• Last Synced: 2024-04-14T16:14:37.978Z (10 months ago)
• Topics: camera, orbitcontrols, threejs
• Language: JavaScript
• Homepage: http://g14n.info/three-orbitcontrols
• Size: 84 KB
• Stars: 78
• Watchers: 4
• Forks: 81
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
**DEPRECATED**

[three-js] exposes real modules now via three/examples/jsm/...

For example to import the Orbit, do

```js

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

```

# three-orbitcontrols

> is the [three.js] OrbitControls from official repo examples

## Installation

To install with npm do

```bash

npm install three

npm install three-orbitcontrols

```

## Usage

All credit goes to [OrbitControls.js][original_orbitcontrols] contributors.

See also [official OrbitControls documentation][orbitcontrols_documentation].

I have just **stolen** the code and modified to export it as a module so you can do something like

```javascript

const THREE = require('three')

const OrbitControls = require('three-orbitcontrols')

// ES6 also works, i.e.

// import OrbitControls from 'three-orbitcontrols'

// Init THREE scene (add your code)

const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)

camera.position.z = 5

const renderer = new THREE.WebGLRenderer({ canvas })

const controls = new OrbitControls(camera, renderer.domElement)

controls.enableDamping = true

controls.dampingFactor = 0.25

controls.enableZoom = false

```

Please note that:

1. You call `OrbitControls` directly instead of `THREE.OrbitControls`.

2. This package does not depend directly on [three.js], which is declared as a peer dependency.

See also examples:

- [CommonJS example](https://github.com/fibo/three-orbitcontrols/tree/master/example.js): clone this repo, install deps and launch `npm run example_commonjs`.

- [TypeScript example](https://github.com/fibo/three-orbitcontrols/tree/master/example.ts): clone this repo, install deps and launch `npm run example_typescript`.

## Changelog

See [OrbiControls.js history here](https://github.com/mrdoob/three.js/commits/master/examples/js/controls/OrbitControls.js).

Please also note that this repo's minor version equals [three.js] release number.

## Motivation

There is another package similar to this one: [three-orbit-controls].

I decided to create another package with a different approach, see [this issue for the rationale](https://github.com/mattdesl/three-orbit-controls/issues/17).

I am using this package for my [3d tic tac toe canvas](https://github.com/fibo/tris3d-canvas): see also online [demo](http://g14n.info/tris3d-canvas/example/).

## License

License is the same as [three.js], i.e. [MIT].

[original_orbitcontrols]: https://github.com/mrdoob/three.js/tree/master/examples/js/controls/OrbitControls.js "OrbitControls.js"

[orbitcontrols_documentation]: https://threejs.org/docs/#examples/controls/OrbitControls "OrbitControls documentation"

[three.js]: http://threejs.org/ "three.js"

[MIT]: https://github.com/mrdoob/three.js/blob/master/LICENSE "three.js license"

[three-orbit-controls]: https://www.npmjs.com/package/three-orbit-controls "three-orbit-controls"