Troubleshooting the issue with rotating Three.js boxes towards the mouse pointer

I am facing an issue with rotating several randomly generated boxes towards the mouse position. Even after trying to use lookAt(mouse3D) method, the boxes do not change their rotation as expected. My goal is to have the boxes rotate towards the mouse position on the screen, rather than within the 3D space.

To obtain the mouse position, I currently use the following code:

function onDocumentMouseMove( event ) {
            mouse3D = new THREE.Vector3(
                 ( event.clientX / window.innerWidth ) * 2 - 1,
                 - ( event.clientY / window.innerHeight ) * 2 + 1,
                 camera.position.z );
}

I came across an example that might help solve my problem:

To illustrate my current approach, I have created a JSFiddle:

https://jsfiddle.net/nrub93m7/

javascriptthree.js

Answer №1

Here is the new function I included in the jsfiddle URL you shared:

function trackMouseMovement( event ) 
{
  mousePosition = new THREE.Vector3( event.clientX, event.clientY, 0);
}

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

Dealing with AngularJS: Issue arises when attempting to inject $modal into a controller nested within a directive

Our team has implemented a custom directive that wraps around a checkbox and utilizes transclusion to inject content into it. Here is an example of the setup: somecheckbox.js angular.module('namespace.directives') .directive('someCheckbox& ...

javascriptangularjstwitter-bootstrapcheckbox

Combining values from multiple sets of 'radio buttons' in React to get a total

After analyzing the following dataset: const data = [ { id: 1, category: "category1", name: "N/A", price: 0, }, { id: 2, category: "category1", name: "Cheese", ...

javascriptreactjs

Angular is encountering a circular dependency while trying to access a property called 'lineno' that does not actually exist within the module exports

I am working on an Angular project and using the Vex template. My project utilizes Angular 9 and Node.js v15.2.0. Every time I run the project with the command ng serve -o, it displays a warning message. https://i.stack.imgur.com/8O9c1.png What could b ...

javascriptangulartypescript

Accessing and parsing an XML file in Webstorm IDE with the use of node.js and ajax

I've recently upgraded to the newest Webstorm IDE to work on my webpage development with Ajax. 1. When attempting to read a local xml file, I started the server and accessed localhost with Chrome, but unfortunately, I couldn't read the local xml ...

javascripthtmlajaxnode.jswebstorm

Is it possible for me to take action on and then pass along the outcomes of an AngularJS $http request without relying on $q?

I have a function called getData that retrieves data from an API endpoint. My current implementation utilizes $q to handle promises. After processing the retrieved data, I return another promise: var getData = function (controller) { var defer = $q.d ...

javascriptangularjs

Caution: It is important for every child in a list to have a distinctive "key" prop value. How can a shared key be used for multiple items?

When I click on a header from my list, an image should appear. However, I'm encountering an error that needs to be resolved. I've been struggling to find a solution for adding unique keys to multiple elements in order to eliminate the error. Des ...

javascripthtmlreactjsjsx

Why is Reactjs axios returning a promise instead of the expected value?

I have been attempting to retrieve data from an API using axios, but all I am getting back is a Promise. The Node.js code: router.get('/isAdmin/:userId/:groupeId', async (req, res) => { let userId = req.params.userId let groupeId = ...

javascriptnode.jsreactjsrestexpress

Send nodejs express static request over to secure https server

Is there a way to ensure all HTTP requests, including those for static files, are redirected to HTTPS? This is the code I currently have: app.use(express.static(__dirname + '/public')); app.get('*', function(req, res) { if (!req. ...

javascriptnode.jshttp-redirectexpresshttps

The synergy of Redux with scheduled tasks

In order to demonstrate the scenario, I have implemented a use-case using a </video> tag that triggers an action every ~250ms as the playhead moves. Despite not being well-versed in Flux/Redux, I am encountering some challenges: Is this method cons ...

javascriptfluxreduxperiodicity

What is the process of querying both a collection and a subcollection in Firebase using AngularFire?

I have a structure in my firebase database that looks like this: /profiles/{uid}/displayName /email /otherAttribues /roles/{roleName}/someAttribute /someOtherAttribute The reason ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

When faced with the scenario of having the hashtag in the href attribute and a browser's back button, it

Hello everyone, I've encountered an issue with the "back" action in my browser. When I click on a link, it takes me to a specific page due to a JavaScript function being called. However, when I hit the back button, it simply removes the "#" from the U ...

javascripthtmlhref

Dropdown Box Linking and Input Field Integration in HTML

I have a scenario where students need to pay monthly fees for their classes. My objective is as follows: 1. Dropdown #1: Student Names 2. Dropdown #2: Month Names 3. Textbox: Fees amount for the selected month The code I am using: $(document).ready(fu ...

javascriptjqueryhtmlcss

Combining onmousedown and onchange for optimal event handling

There is a div with three slide-bars, each representing an 'rgb' value with a range of 0-255. When the slide-bars are dragged, the background-color of the div should change accordingly. Currently, an 'onchange' event is called to a func ...

javascripthtmlcss

JavaScript Switch Open/Close Mobile Navigation Menu

I'm currently facing a challenge with a specific issue. I want to implement a toggle menu for mobile devices on a website that I'm developing. It's functioning smoothly, and you can see it in action on this CodePen. The JavaScript code for ...

javascriptjqueryhtmlcss

Determine the current whereabouts and actions of the specified user

I am in the process of developing a command for my Discord JS bot that, when activated, will fetch the current game (or status if no game) of the user mentioned in the command. Subsequently, the bot will send a message stating Mentioned User has been playi ...

javascriptnode.jsdiscorddiscord.js

Leverage the power of forkJoin in JavaScript by utilizing objects or sourcesObject

I'm currently facing an issue with my code snippet below: getInformations().subscribe( informations => { let subs = []; for (const information of informations) { subs.push(getOtherDetails(information.id)); } ...

javascriptangulartypescriptrxjsfork-join

Dimension of the element that has been positioned absolutely

One of my challenges involves working with an absolutely positioned div element (.tooltip) containing another div (.text) that has text with a set max-width. The issue arises when the left property of .tooltip is too large, causing its width to shrink du ...

javascripthtmlcss

Is there a way to obtain the tasklist result of exec() from child_process and convert it to JSON format?

When I use the tasklist command with child_process, the stdout returns processes in Unicode string format that is not easily queryable. Here is the code snippet: var exec = require('child_process').exec; ... exec('tasklist', function( ...

javascriptjsonchild-processtasklist

Issue with updating Angular list reference when deleting an item

My current task involves implementing a feature that displays selected items from a hierarchical structure on the right side. slice.component.ts : import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core&a ...

javascripthtmlangularlisttypescript

Tips for effectively overlaying one container on top of another in a responsive manner

There are a pair of containers. The main container functions as the parent, while the child container acts as a tag to categorize the content. The objective is to position the tag container at the top right corner of the main content container, slightly of ...

javascriptcssreactjs