1. three-orbitcontrols
is the three.js OrbitControls from official repo examples
three-orbitcontrols
Package: three-orbitcontrols
Created by: fibo
Last modified: Mon, 27 Jun 2022 06:18:53 GMT
Version: 2.110.3
License: MIT
Downloads: 9,076
Repository: https://github.com/fibo/three-orbitcontrols

Install

npm install three-orbitcontrols
yarn add three-orbitcontrols

DEPRECATED

[three-js] exposes real modules now via three/examples/jsm/...
For example to import the Orbit, do

 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

 npm install three
npm install three-orbitcontrols

Usage

All credit goes to OrbitControls.js contributors.
See also official OrbitControls documentation.

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

 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: clone this repo, install deps and launch npm run example_commonjs.
  • TypeScript example: clone this repo, install deps and launch npm run example_typescript.

Changelog

See OrbiControls.js history here.

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.

I am using this package for my 3d tic tac toe canvas: see also online demo.

License

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

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin