Using Threejs to implement mouse events in combination with orbit controls

I've been working on a scene with orbitControls in threejs (r84) and I'm trying to incorporate a mouse event for raycasting. Although the function itself works, I'm having trouble getting both events to work simultaneously. It seems like I can only have one active at a time.

Within my init function, I currently have:

controls = new THREE.OrbitControls( cameraB1, rendererB1.domElement );
controls.addEventListener( 'change', render );
controls.enableZoom = true;
controls.enableRotate= false;
controls.addEventListener('mousedown',myOnMouseDownFunction ,false);
controls.update();

And here is the function that needs to be called:

function myOnMouseDownFunction( evt ) {
  evt.preventDefault();
  var array = getMousePosition( contB1, evt.clientX, evt.clientY );
  onClickPosition.fromArray( array );
  var intersects = getIntersects( onClickPosition, sceneB1.children );
  if ( intersects.length > 0 && intersects[ 0 ].uv ) {
          var uv = intersects[ 0 ].uv;
          console.log(uv);
  }
  console.log("I am being called");
}

At this point, it feels like I have to choose between orbiting or executing my function. Is there a way to make them both work together seamlessly? Any help would be greatly appreciated.

Answer №1

If you need to make a change to the listener:

controls.addEventListener('mousedown',myOnMouseDownFunction ,false);

You should then attach the listener to either the document itself or to the container that holds your THREE.js scene.

If you want to disable the OrbitControl only upon interacting with something:

function myOnMouseDownFunction( evt ) {
  evt.preventDefault();
  var array = getMousePosition( contB1, evt.clientX, evt.clientY );
  onClickPosition.fromArray( array );
  var intersects = getIntersects( onClickPosition, sceneB1.children );
  if ( intersects.length > 0 && intersects[ 0 ].uv ) {
       controls.enabled = false;
       var uv = intersects[ 0 ].uv;
       console.log(uv);
  } else {
       controls.enabled = true;
  }
  console.log("This function is triggered");
}

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

Troubles with Promise.all and json() in JavaScript causing errors being logged as "invalid function"

I'm experiencing some difficulties with the "Promise.all" method. Essentially, I have an array of URLs (here is a simple one if you want to test it: const urlArray = [ "https://coverartarchive.org/release/985adeec-a1fd-4e79-899d-10c54b6af299&qu ...

Exploring the keyof operator in Typescript for object types

Is there a way to extract keys of type A and transfer them to type B? Even though I anticipate type B to be "x", it seems to also include "undefined". Why does the keyof operator incorporate undefined in the resulting type? It's perplexing. I kn ...

Having issues with images not loading and receiving a 401 error with the API while using Vite in a production build

While working on my React project with Vite, I've encountered a few challenges during the production build process. Everything seems to be running smoothly when I use npm run dev, but when I try to build the project using npm run build and then previ ...

Leveraging JSON for fetching distinct identifiers from a database

When a user hovers over a parent span containing an empty img tag, I use JSON and jQuery to retrieve the src of the image from the database. The issue arises when the retrieved src is applied to all looped span images on the same page, instead of each imag ...

Discovering the Vertical Dimension of a Web Page Displayed in a Window

Working with an ASP.NET Site that utilizes a single Master Page, I am facing a challenge on one of the pages where I display a PDF file as the main content. I am looking for a solution to determine the appropriate size for the PDF control so that it fits ...

Tips on managing JavaScript pop-up windows with Selenium and Java

There have been numerous solutions provided on Stack Overflow for handling JavaScript windows, but my situation is quite unique. I am currently working on automating a process for our web-based application. The development team recently implemented a MODA ...

Resolving the CORS preflight issue with Loopback API in Redux

My current setup involves a client application running on React-Redux and an API app on Loopback. During local testing, I have the client app on port 8080 and the server app on port 3000. While attempting to test Google OAuth (using the loopback-passport ...

Error found when combining a stopwatch with the react useState hook and setInterval, causing an additional interval to start when the stopwatch

I have implemented a stopwatch feature that includes start and pause buttons. The start button triggers setInterval while the pause button calls clearInterval. Initially, pressing start and then pause works correctly. However, if you press start again afte ...

A guide on utilizing Puppeteer for capturing screenshots of web pages with embedded videos

Currently, I am using Puppeteer to access a website and capture a screenshot of a video. Unfortunately, the default Chromium browser that Puppeteer uses does not support certain video types. I have managed to get it working by launching Puppeteer with a l ...

Angular2 - Error: The view has been destroyed and cannot be updated: detectChanges

My application keeps encountering this persistent error: extensions::uncaught_exception_handler:8 Error in event handler for runtime.onMessage: Attempt to use a destroyed view: detectChanges at ViewDestroyedException.BaseException [as constructor] (chrome ...

The table row dissolves instead of disappearing for a specific model

Currently, I am in the process of implementing a live search feature. The aim is to have the elements of a table fade out if they do not match the specified filter and fade in if they do match. Unfortunately, the following code snippet is not achieving thi ...

Using JSON parsing to dynamically create classes with preloaded background images

Today, I successfully deployed my browser game using MVC4 to my website for the first time. I am currently navigating through the differences between running the site off of localhost and running it from the actual website. My process involves loading all ...

I can't seem to figure out what's causing this error to pop up in my coding setup (Tailwind + Next.js). It

I've been struggling with this problem for a week now and despite my efforts, I haven't been able to find a solution yet. However, I have made some progress in narrowing down the issue. The problem arises when I try to execute the yarn build comm ...

Setting up validation with yup based on the value of a CheckBox component can be achieved by following these

I am currently working with a validationSchema const validationSchema = Yup.object().shape({ first_name: Yup.string().required("First Name is required"), last_name: Yup.string().required("Last name is required"), email: Yup.string().required( ...

The module specifier "logrocket" could not be resolved, make sure to use either npm or

I'm currently having an issue with initializing LogRocket. I followed the steps from the official documentation: I successfully installed it using node: npm i --save logrocket However, when trying to initialize it on my page earlier with: < ...

Display the chosen date from the datepicker in the input field

Utilizing a JQuery DatePicker to be constantly displayed, I have assigned it to a div. Despite wanting it to display the selected date in the input box like in this example, it just isn't functioning as desired for me. Is there a way to have the selec ...

Adding a Javascript file to the requirejs-config.js file in Magento 2

How can I properly load a JS file using requirejs? <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> Here is my requirejs-config.js file: var config = { paths: { mod ...

Disable body scrolling on mobile devices in native browsers

When using the native browser on Samsung Galaxy S5 / S6, the following CSS code: body { overflow: hidden; } does not successfully prevent the body from scrolling. Is there a way to work around this issue? Edit: As mentioned below, one workaround is t ...

:after pseudo class not functioning properly when included in stylesheet and imported into React

I am currently utilizing style-loader and css-loader for importing stylesheets in a react project: require('../css/gallery/style.css'); Everything in the stylesheet is working smoothly, except for one specific rule: .grid::after { content: ...

The FindProxyForURL function in a pac (proxy-auto-config) file is not compatible with the IE browser

After struggling for three days, we are still unable to solve a peculiar technical issue and now seek your assistance. The PAC (Proxy Auto-Config) file we have created works flawlessly in all browsers except for Internet Explorer (IE). The URL in questio ...