1. three-orbit-controls
orbit controls for ThreeJS
three-orbit-controls
Package: three-orbit-controls
Created by: mattdesl
Last modified: Mon, 27 Jun 2022 06:18:49 GMT
Version: 82.1.0
License: MIT
Downloads: 64,509
Repository: https://github.com/mattdesl/three-orbit-controls

Install

npm install three-orbit-controls
yarn add three-orbit-controls

three-orbit-controls

stable

ThreeJS OrbitControls as an npm module. See test for an example.

 var THREE = require('three')
var OrbitControls = require('three-orbit-controls')(THREE)

function start(gl, width, height) {
    renderer = new THREE.WebGLRenderer({
        canvas: gl.canvas
    })
    renderer.setClearColor(0x000000, 1.0)

    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(50, width/height, 1, 1000)
    camera.position.set(0, 1, -3)
    camera.lookAt(new THREE.Vector3())

    controls = new OrbitControls(camera)

    var geo = new THREE.BoxGeometry(1,1,1)
    var mat = new THREE.MeshBasicMaterial({ wireframe: true, color: 0xffffff })
    var box = new THREE.Mesh(geo, mat)
    scene.add(box)
}

function render(gl, width, height) {
    renderer.render(scene, camera)
}

Usage

NPM

OrbitControls = require('three-orbit-controls')(THREE)

This module exports a function which accepts an instance of THREE, and returns an OrbitControls class. This allows you to use the module with CommonJS, globals, etc.

The returned function has the following constructor pattern:

 controls = new OrbitControls(camera[, domElement])

Versioning

This uses an unusual versioning system to better support ThreeJS's (lack of) versioning. The major version of this repo will line up with ThreeJS breaking releases (69.0.0 => r69). Often the module will continue to work (i.e. 69.0.0 should work with r70).

The minor will be reserved for any new features, and patch for bug fixes and documentation/readme updates. In some rare cases, a minor feature may introduce a breaking change; so it's generally safest to use tilde or --save-exact for this module.

If you see any version issues, open a ticket!

testing

Git clone, npm install and then run npm start to spin up a development server. Open localhost:9966 in your browser to see the test.js file in action.

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