The issue with THREE.js ORBITCONTROLLS not responding to changes in mouse button settings is causing inconvenience

Hey there, currently working on a project using THREE.js and I've run into an issue with my .mouseButtons functionality.

var controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.target.set( 0, 25, 0 );
            controls.mouseButtons = {ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
            controls.update();

I've made sure to include THREE.js in my setup and even checked for THREE.MOUSE, but whenever I add that particular piece of code, the mouse buttons stop working altogether.

Any assistance would be greatly appreciated. Thanks!

javascriptthree.js

Answer №1

Ever since the recent commit mentioned here, the keys of the mouseButtons object have been altered. Instead of explicitly defining ORBIT, ZOOM, and PAN, now you need to map mouse buttons to specific actions. Are you currently using the latest version of THREE.js? It's possible that this change could be causing the issues you're experiencing.

According to the current version, your code should be structured like this (as far as I'm aware):

var controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.target.set( 0, 25, 0 );
    controls.mouseButtons = {LEFT: THREE.MOUSE.LEFT, MIDDLE: THREE.MOUSE.MIDDLE, RIGHT: THREE.MOUSE.RIGHT};
    controls.update();

It's worth noting that these mappings are already the default settings, so if you have no intention of modifying them, you can omit this line altogether.

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

Setting a TypeScript collection field within an object prior to sending an HTTP POST request

Encountered an issue while attempting to POST an Object (User). The error message appeared when structuring it as follows: Below is the model class used: export class User { userRoles: Set<UserRole>; id: number; } In my TypeScript file, I included ...

javascriptangulartypescript

What is the most effective way to load data prior to the controller being loaded

Is there a way to fetch data from a service before the view and controller are loaded? I need assistance with this. resolve: { getAlbum: function(albumService){ return albumService.getAlbums(); },getAtum: function(albu ...

javascriptangularjsangularjs-directiveangularjs-scopeionic-framework

Retrieving information from a tag within an iFrame and passing it to its parent document

I've come across a few example posts on this topic, but for some reason, none of them are working for me. Here is the stack view of what I'm trying to accomplish: <html> <head>...</head> <body> <div>Som ...

javascriptjqueryiframe

iOS - Embedding text into a UIWebView input field

Just a quick question - if a textfield in a webform does not automatically have the focus set by the form, meaning you have to press the field before the keyboard pops up, am I correct in assuming that the field cannot be edited? In simpler terms - is it ...

javascriptioswebformsuitextfield

Implementing Default Language in Next.js 14 for Static Export without URL Prefix: A Step-by-Step Guide

Currently, I am in the process of developing a website using Next.js 14, with the intention of exporting it as a static site for distribution through a CDN (Cloudflare Pages). The website I am working on requires support for internationalization (i18n) to ...

javascriptreactjstypescriptnext.jscloudflare-pages

Encountering issues importing Ace Document Object in a Vue webpack project?

In my Vue and Webpack project, I am trying to incorporate the Ace editor. My goal is to associate each file with a single instance of an Ace Document. To achieve this, I followed the default import method: import Ace from 'ace-builds' When atte ...

javascriptvue.jswebpackimporterrorace-editor

Creating a dynamic input box that appears when another input box is being filled

I have a form set up like this: <FORM method="post"> <TABLE> <TR> <TD>Username</TD> <TD><INPUT type="text" value="" name="username" title="Enter Username"/><TD> </TR> <TR> <TD>A ...

phpjavascripthtml

Adjust the code to enhance the functionality of web components in Sharepoint

I recently came across some code online that I'm trying to modify in order to add an expanding button next to a web part on my Sharepoint site. However, the problem is that by default, all web parts are already expanded and require a click to collapse ...

javascriptjqueryhtmlcsssharepoint

Managing the attention on a switch button

I'm struggling to maintain focus on the toggle button after it's been clicked. Currently, when I press the button, the focus jumps to the top of the page. I can't figure out what I'm doing wrong. Below is the code snippet: HTML <b ...

javascriptjqueryhtmlangularjs

Can cucumber steps be executed conditionally within a single scenario?

I would like to streamline my testing process by using one feature file for both desktop and mobile tests. I am looking to run two separate tests, with one tagged as @mobile and the other as @desktop. By doing this, I can avoid creating a duplicate feature ...

javascriptseleniumselenium-webdriverprotractorcucumber

Error Encountered While Creating a Polygon Wallet on Fireblocks

After following the instructions from Fireblocks Docs, I successfully created a default wallet named "BTC_TEST" like this: enter image description here. However, when attempting to create a Matic wallet, I encountered an Axios Error. Despite Matic being a ...

javascriptnode.jsblockchainfireblocks-sdkfireblocks-api

Encountering problem with JSON in the bodyParser function

I've encountered an issue while sending data from my React component using the Fetch API and receiving it as JSON on my Express server. When I try to parse the data using the jsonParser method from bodyParser, I only get back an empty object. Strangel ...

javascriptjsonexpressfetch-apibody-parser

When I try to run Parcel, my ReactJS website just won't deploy in a serverless environment

For a while now, I've been working on a website using serverless. Everything was going smoothly until this morning when I encountered an issue with pushing updates from my site to the serverless platform. When trying to push, I received the following ...

javascriptnpmserverless-frameworkserverlessparcel

While working on a project in React, I successfully implemented an async function to fetch data from an API. However, upon returning the data, I encountered an issue where it was displaying as a

I am working with React and TypeScript and have the following code snippet: const fetchData = async () => { const res: any = await fetch("https://api.spotify.com/v1/search?q=thoughtsofadyingatheist&type=track&limit=30", { met ...

javascriptreactjstypescriptasync-awaitfetch

What is the best way to create a seamless Asynchronous loop?

Adhering to the traditional REST standards, I have divided my resources into separate endpoints and calls. The primary focus here revolves around two main objects: List and Item (with a list containing items as well as additional associated data). For ins ...

javascriptajaxrestloopsasynchronous

Tips for deactivating data monitoring in a Vue.js component attribute

Looking to develop a Vue.js component that accepts properties from its parent component, like this example: <table-cell :value="foo" format="date" /> Although value and format are set as properties, Vue automatically sets up obse ...

javascriptvue.js

Is it possible for a function within a nodejs module to be defined but display as undefined upon access?

I am currently developing a Discord bot using NodeJS and TypeScript, and I'm facing an issue while trying to import custom modules in a loop with the following code: const eventFiles = fs.readdirSync("./src/events/").filter((file: string) =& ...

javascriptnode.jstypescript

Error in jQuery validation caused by a different value

I have a form on my website that needs to run some validations. One specific validation requires a file to be uploaded in order for a group of checkboxes to be selected. The issue I am facing is that the validations only seem to work when triggered, and b ...

javascriptjqueryvalidation

JavaScript object rejects JSON input

Below is the script that I am currently working with: const [firstResponse, secondResponse] = await Promise.all([ this.$store.dispatch(Actions.RELATIONS), ApiService.get("/api/"+ this.apiEndpointSingle +'/'+this.uid) ]); console. ...

javascriptvue.js

Require assistance in generating three replicas of an object rather than references as it currently operates

I am encountering an issue with my code where I seem to be creating 4 references to the same object instead of 4 unique objects. When I modify a value in groupDataArrays, the same value gets updated in groupDataArraysOfficial, groupDataArraysValid, and gro ...

javascriptjquery