Utilizing the Right-Click Functionality in three.js

After searching tirelessly, I have come to a dead end in finding documentation on how to handle right click events in three.js. Can anyone provide guidance on accessing a right click event with the mouse? The current code snippet I am using is as follows:

function onDocumentMouseDown(event) 
{
    mouseDown = true;
    event.preventDefault();

    mouseX = event.clientX - windowHalfX;
    mouseY = event.clientY - windowHalfY;

    document.addEventListener('mousemove', onDocumentMouseMove, false);
    document.addEventListener('mouseup', onDocumentMouseUp, false);
    document.addEventListener('mouseout', onDocumentMouseOut, false);
}

While this works effectively for left and middle clicks, I need to separate the right click event to trigger alternate functionalities. How can I achieve this differentiation between left and right click actions?

Answer №1

When dealing with the event object, you will find the property button. Here is a way to manage it:

switch ( event.button ) {
    case 0: // left 
        break;
    case 1: // middle
        break;
    case 2: // right
        break;
}

Answer №2

Ever since the update to r120, OrbitControls now utilizes Pointer Events. Give pointerdown a try:

document.onpointerdown = function(event) {
    switch ( event.button ) {
        case 0: console.log("Left Button is pressed."); 
            break;
        case 1: console.log("Middle Button is pressed."); 
        //Please note that this may not work on Mac with a magic mouse!
            break;
        case 2: console.log("Right Button is pressed.");
            break;
    }
}

Cheers

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

Issue on Windows with Selenium WebDriver: logging.js file missing

Currently, I am setting up an automated process in Windows 8.1 using JavaScript with Selenium's WebDriverJS for Chrome automation. After downloading the ChromeDriver and Selenium Standalone Server jar file, I saved them in the E:\Selenium directo ...

delayed updating of property not visible in angular 10 immediately

I needed to hide a div based on a condition, so I decided to use the hidden property like below: <div [hidden]="isControlDisplayed()?false:true"> The isControlDisplayed() method determines whether to show or hide the div based on the value ...

Sort through the categories and display the outcomes

In this scenario, I have created a filter category using checkboxes. However, I am interested in converting it to use a select box instead. Can anyone provide guidance on how to make this conversion? Using a select box would be more practical for my needs ...

Separate the JSON data into a new variable

I am working on a view called hero: def hero(request): rfc='some value' depends_on=1234 result_set = {'rfc': rfc, 'depends_on': depends_on} return HttpResponse(json.dumps(result_set)) Now, I want to pass the values o ...

Transmitting a plethora of information using jQuery

Here's the code I currently have for sending data: var test={imagename:"apple.jpg",x:"13",y:"33"}; $.ajax({ type: "POST", url: "some.php", data: test, success: function(response){ console.log(response); } }); ...

Script unable to retrieve PHP data with AJAX success function

I need help retrieving database rows using PHP. The JavaScript success function doesn't seem to be working. Can anyone spot a potential issue in the PHP code? Here is the PHP code: $id=$_GET['id']; $stmt = $db->prepare("SELECT * FROM b ...

What is the process for creating a personalized user input in JavaScript?

When entering a tracking number, please ensure it follows this specific format: AB-CDEFG-H. The first character (A) must be a digit between 1 and 9 inclusive. The second character (B) should be an uppercase English letter. This is followed by a hyphen (-). ...

Using conditional statements in a forEach iteration

Looking to Apply a Unique Function to a Specific Object in an Array In my current project, I have set up a forEach loop to iterate through various records from a database. Each record generates a 'panel' on the interface. Preview of the panels: ...

Activate night mode in ElementPlus using CDN

Is there a way to set the theme to dark in ElementUI + Vue when using CDNs instead of npm? <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> ...

Error callback not being invoked on save() method in AngularJS service

So I am currently using the AngularJS Restful Service $resource in my project. However, when I try to call the $save function and provide an error callback, it does not get invoked. Surprisingly, even though the server sends a 418 error, which is not a suc ...

What is the process for sending a file to the server using JavaScript?

It seems like the process is not as simple as I originally thought. Here is the breakdown of what I am trying to achieve: I am capturing the FileList in my state like this... const [formValues, setFormValues] = useState({ image: null }) <input typ ...

What is the best way to pass the double-clicked row as a parameter to a function, when the row is dynamically created in the code?

I am facing an issue with adding rows to an empty table using a button and attaching a dblclick event listener to each row. The challenge arises when I need to execute a function that requires the specific row being double-clicked. In tables already popu ...

Generating Connections within a Graphical Representation of a Pie Chart

I have a unique challenge - I have an image of a Pie Chart with 5 equal sections that I would like to enhance. My goal is to create interactive rollovers for each section, triggering pop-up tooltips with text and links to other pages. I understand this ...

The execution of Jasmine implementation callbacks is not governed by karma

I'm currently facing an issue with running my Jasmine tests using Karma. Any help or suggestions would be greatly appreciated. When I try to run the tests with Karma (using "karma start --singleRun=true"), the browser opens but nothing happens and ev ...

Why are the height and width values I specified not matching the values returned?

I am currently learning HTML and JavaScript, specifically diving into the width() and height() methods in JavaScript. Setting the dimensions of div1 to 100px for height and 300px for width, I encountered a discrepancy when running the code. Upon execution ...

Several dropdowns causing issues with jQuery and Bootstrap functionality

Can anyone help me identify where I might be making a mistake? The issue is with my fee calculator that increments fees as the user progresses through the form. In this scenario, there is a checkbox that, when clicked, is supposed to display a div showing ...

How can I retrieve the data property within the setup function in Vue 3?

Trying to access a data property inside setup() in Vue 3 is resulting in the following error: TypeError: Cannot read property '$localStorage' of undefined data() data() { return { $localStorage: {}, } setup setup() { this.$loca ...

Struggling to generate a functional link with Laravel and Vue?

For the past few days, I've been facing a problem. The issue I'm encountering is this: I have created a link in my .vue page to download a simple PDF file: <a href= {{ asset('download/form.pdf') }}> Download here. </a> (Th ...

Timeout causes failure in AngularJS jasmine promise testing

I need help testing my login controller, here is the structure of it: describe('LoginController', function() { beforeEach(module('task6')); var $controller, LoginService; beforeEach(inject(function(_$controller_, _LoginSe ...

Looking for assistance in cutting down the time it takes to extract dynamic content through scraping

I'm currently using Selenium (chrome) to scrape dynamic content from a website, but the automated browser is processing too slowly. The profile page I am scraping has a "view more" button that only loads 5 posts per click. Unfortunately, there is no a ...