Guide on utilizing Three.js OrbitControl with several objects

I managed to get the orbit control feature working, but I am facing an issue where controlling one object also ends up controlling all three objects on the page. Additionally, pan/zoom functionality does not seem to work at all with the OrthographicCamera.

Each instance of the OrbitControls has been assigned its own variable, so it should not be global across all objects.

controlsObjOne = new THREE.OrbitControls(cameraObjOne);
controlsObjOne.addEventListener('change', renderObjOne);

I have used ObjTwo, ObjThree, etc for the other models. Everything seems to be working fine with the camera, light, render, etc., except for the orbit functionality. I am wondering if it is possible to achieve this behavior with this library, or if there is another library out there that can handle multiple objects effectively.

javascriptthree.js

Answer №1

The explanation behind this behavior is that the OrbitControls originally connect the eventListeners for mouse and touch input to the document by default. One option is to provide a domElement as a second argument. This way, all eventListeners will be linked to that particular element, such as the renderer canvas's domElement. However, this setup significantly restricts navigation possibilities as the mousemove event will only be captured within the canvas area.

The desired scenario involves having the mousedown eventListeners on the renderer-canvas and the mousemove on the document for unrestricted movement once the mouse button is clicked.

To address this, I have developed an enhanced version with a third parameter allowing you to specify your canvas element: https://gist.github.com/mrflix/8351020

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize dynamic function calls in JavaScript

I am trying to dynamically call a function from a string like "User.find". The goal is to call the find() function in the User object if it exists. This is what my attempt looks like: var User = {}; User.find = function(){ return 1; } var input ...

javascriptnode.js

Angular 2: Applying class to td element when clicked

I am working with a table structured like this <table> <tbody> <tr *ngFor="let row of createRange(seats.theatreDimension.rowNum)"> <td [ngClass]="{'reserved': isReserved(row, seat)}" id={{row}}_{{sea ...

javascripthtmlangular

Achieving consistent outcomes across various devices: What's the secret?

Hey there, I am facing an issue with my form page that I created using HTML, CSS, and Javascript. It looks good on my computer but appears messy on a mobile phone. The elements are getting out of the white box (div) making the entire page look chaotic. Sin ...

javascripthtmlcss

Delivering a Logo to a Remote Website Based on Specific Conditions

I am in the process of creating a code snippet for a specific user group that has earned the privilege to display our seal on their website. The concept initially appeared straightforward, but when I attempted to implement it on a different site for testin ...

phpjavascriptmysql

AngularJS: Error message stating that '$scope is undefined'

Encountering '$scope is not defined' console errors in this AngularJS controller code: angular.module('articles').controller('ArticlesController', ['$scope', '$routeParams', '$location', 'Au ...

javascriptangularjsmean-stack

What is the proper way to generate an iframe with a width set to "100%" or left empty, rather than width = "100"?

I am currently utilizing vimeowrap to iterate through a playlist of videos. I would like the iframe that is generated by vimeowrap to have either a width and height set to "100%" or nothing at all. For more information on Vimeo Wrap, visit: To see my tes ...

javascripthtmljsonvimeo

Converting a three.js scene into SVG or alternative vector format for export

Can an SVG- or other vector-formatted image be exported from a scene rendered using three.js's WebGLRenderer? What about from a scene derived from CanvasRenderer? If not, how can one set up SVGRenderer with three.js? Creating a new THREE.SVGRenderer( ...

javascriptsvgthree.jswebgl

Steps for obtaining the current state array post re-ordering column in Angular datatables

I am facing an interesting scenario where I can successfully retrieve the current state of an array of columns using pure JS + jQuery, but unfortunately, the same approach does not seem to work in Angular 12! Despite going through the documentation for Ang ...

javascriptjqueryangulardatatables

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

I'm facing an issue while attempting to import the 'JSZip' module from an external node package called JSZip in my HTML File. The usual method of importing it directly using the import command is not working: <script> import ...

javascripthtmltypescriptfigmafigma-api

Is there a way to incorporate promises into an endless loop while adding a delay in each iteration?

require("./getSongFromSpotify")().then(a => { require("./instify")(a.artist,a.name).then(r => { if (r.status === "ok"){ console.log("saved") }else{ console.log(" ...

javascriptnode.jsasynchronouses6-promise

What is the best way to store multiple forms in a single request using React?

Is there a more efficient way for me to save multiple forms in multiple child components from the parent component using just one API request? I have attempted to utilize Context and reducer, which did work. However, I am unsure if this is the best approa ...

javascriptreactjs

VueJS can manipulate an inline template by dynamically changing its content and reinitializing

this particular query shares similarities with the discussions on VueJS re-compiling HTML in an inline-template component as well as How to implement Vue js directive in an appended html element Regrettably, the approach suggested in those threads is no l ...

javascripthtmlvue.js

Watching a Computed Value in EmberJS

What causes the discrepancy between the two sets of code? Utilizing computed: computed: Ember.computed('selected', function() { console.log('computed'); return this.get('selected'); }), observer1: Ember.observer(&ap ...

javascriptember.js

NodeJS application does not acknowledge the term "Require"

I have completed the steps outlined on http://expressjs.com/en/starter/installing.html to set up my express NodeJS application. Following the installation, we navigated to the "myapp" directory and installed the "aws-iot-device-sdk" from https://github.com ...

javascriptnode.jsamazon-web-servicesexpressrequire

AJV is failing to validate my body using the function generated by the compile method

Currently, in my API development process with express, I have implemented AJV as a middleware to validate the incoming body data. The version of AJV being used is 6.12.6 Below is the JSON schema named body-foobar.json: { "type": "object& ...

javascriptnode.jsexpressajv

Receiving JSON dynamically (using socket.io) may result in parsing issues

I am currently working with JSON data that is correctly formatted at 100% accuracy. My issue arises when I execute the following code successfully: var data = {"datas":[{"matts":{"active":"1","status":"off"},"config":null,"adapters":[]}}]}; console.dir( ...

javascriptjqueryjsonsocket.io

Creating a function in React to be passed as a prop

Recently, I was given the task of enhancing a user interface as a small challenge to help me dive into the world of programming. My goal is to incorporate a date picker into my search bar to allow users to filter their search results by selecting specific ...

javascriptreactjsdatepickermaterial-uijsx

In Express JS, the REST API encounters an issue where req.body is not defined

I am currently working on building a REST API with Express JS. When I use console.log(req.body), it is returning undefined as the output. Below is the code snippet from my routes.js file: const express = require('express'); const router = expres ...

javascriptnode.jsrestexpress

How can I access properties of generic types in TypeScript?

Converting the generic type to any is a valid approach (The type E could be a typescript type, class, or interface) of various entities like Product, Post, Todo, Customer, etc.: function test<E>(o:E):string { return (o as any)['property' ...

javascriptangulartypescript

The jQuery button function is not compatible with Google Graph

Upon review below, I have successfully created the getChart() function. It functions properly when called independently, however, it fails to display the chart when enclosed within $(document).ready(function(){...}). The file is also attached for referen ...

javascriptjqueryajaxbuttongoogle-visualization