Issue in three.js r71 with sprite not following cursor movement

I am having an issue where the sprite is visible when I move the cursor, but it is not moving correctly along with the cursor point. It seems to be moving in the opposite direction. Can someone provide assistance?

sprite1.position.set( event.clientX *(-.4) , event.clientY *(.4) , 1 );
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; 

Answer №1

When something in the 3D world is moving in the opposite direction, it can be beneficial to negate that movement:

mouse.x = ( event.clientX / window.innerWidth ); 
mouse.y = ( event.clientY / window.innerHeight ); 

// The mouse position now ranges between 0 and 1 for both x and y

// To reverse this direction
mouse.x = 1 - mouse.x;
mouse.y = 1 - mouse.y;

// If the range is from -1 to 1, you can scale it:
mouse.x = mouse.x * 2 - 1; // Initially goes from 0 to 2, then -1 to 1

// Reversing this movement
mouse.x = -mouse.x;

On the other hand, achieving this:

sprite1.position.set( event.clientX *(-.4) , event.clientY *(.4)

might be difficult. It seems like you are converting your screen coordinates in pixels to some world units, as otherwise they may not display correctly. Moving within just the positive range, flipping -4 to 4 could cause it to move offscreen. In order to adjust, consider subtracting an offset like 8.

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

Utilizing a JavaScript variable as an argument in Fluid URI ViewHelper: A step-by-step guide

I am trying to create an Ajax call from a Fluid template using the Fluid URI action ViewHelper. However, I am facing an issue where one of the arguments needs to be dynamically obtained from a Javascript variable. How can I ensure that the ViewHelper is re ...

Enable special characters in asp .net 3.5

Whenever I try to include special characters such as "<" & "%" in the URL, I encounter a 400 bad request error. On my page, there is a single search box with a button next to it. If a user inputs a value, it is passed as a query string to another p ...

Transform basic list into a two-dimensional array (grid)

Picture a scenario where we have an array: A = Array(1, 2, 3, 4, 5, 6, 7, 8, 9); We aim to transform it into a 2-dimensional array (a matrix of N x M), similar to this representation: A = Array(Array(1, 2, 3), Array(4, 5, 6), Array(7, 8, 9)); It's ...

What is the method for retrieving post ID with the Google Feed API?

I am currently utilizing two different JS codes to dynamically load posts from my Wordpress website: Code 1: JSON API <script src="http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=listPosts" type="text/javascript">& ...

What is the best way to calculate the average grade for each student in an array that contains objects with exam submission data?

Imagine having a collection of objects that hold details about exams submitted over a period. Here is the structure: [ { name: 'Freddy', grade: 10, date: '20/07/2022' }, { name: 'Jose', grade: 8, date:'20/07/2022& ...

This method or property is not supported by the object - How to call an Applet in Internet Explorer 9

cmd > java -version Java Version : "1.7.0_11" (Updated) Java(TM) SE Runtime Environment (build 1.7.0_11-b21) Java HotSpot(TM) Client VM (build 23.6-b04, mixed mode, sharing) browsers = IE7,IE8,IE9 (The functionality works smoothly in Google Chrome and ...

Rails 6 does not have support for matching multiple route parameters

routes.rb: get '/get_text_by_tablenum/:filename_id/:tablenum_id', to: 'dashboard#get_text_by_tablenum' ajax: $.ajax({ dataType: "json", cache: false, url: '/get_text_by_tablenum/' + filename + &apo ...

An attempt to access the login API at http://localhost:3000 resulted in an Internal Server Error with a status

I encountered an issue in the console stating: "POST http://localhost:3000/api/login 500 (Internal Server Error)". It seems like there is a problem reaching the API during the login process: Below is my login component written in React: import React, { us ...

Ways to determine if a specific text in HTML is already assigned a class name?

How can I modify my function to highlight selected text with the mark tag, and then un-highlight it if clicked again? highLightText() { var selection = window.getSelection(); console.log('this is the selection: ', selection); var ...

Ways to execute a method inside a constructor

I've been struggling to find a solution to my question because most of the responses I come across are too advanced for my beginner level understanding of JavaScript. Below is the code snippet I am working with: function xyPoint(x, y){ this.x = ...

No results found in MongoDB query when using find method

Having an issue with an API call to my express server to retrieve employees working in the same location based on the location ID. Strangely, the API call returns an empty array while it functions correctly in the command-line interface. Definition of Emp ...

Setting a closure to encapsulate a global variable

I possess a set of functions that allow me to configure prompts for when someone exits a page while inputting values. However, my main concern lies in how to properly encapsulate the checkFlag. Currently, checkFlag is being treated as a global variable whi ...

Converting long date format to short date format: yyyy-mm-dd

Is there a way to convert the long date format from "Sat Dec 13 2014 06:00:00 GMT+0600" to "2014-12-13" in yyyy-mm-dd format? <script> function myDate(val) { var now = new Date("<?php echo $Cnextdue;?>"); now.setDate(now.getDate() + 30*val); ...

The function window.open has been disabled on codepen.io site

My dilemma involves a button designed to open a random Wikipedia page. While the code works perfectly in the CodePen editor, I encounter issues when opening it in full-page view. The problem arises when the log displays 'window.open is disabled'. ...

designing a modular socket.io framework in node.js

Suppose in a node.js application, we have an app.js file structured like this: var express = require('express') var app = express(); var server = http.createServer(app); ... module.exports = { app:app, server:server } Additionally, there ...

Troubleshooting PHP/MySQL integration with Google Maps - issues persist

I have come across several other posts on this theme but unfortunately, none of them have been able to help me. I am using the article https://developers.google.com/maps/articles/phpsqlajax_v3, however, the code provided is not working for me. I have a fil ...

Can emojis be utilized with A-Frame's a-text component?

Using emojis instead of images in an a-text element can be quite handy. I attempted to do so with the following codes: <a-text value="&#1F601"></a-text> And also tried it this way: <a-text value=" ...

What methods can I use to gauge the performance of my angular website?

After completing my web project with nodejs and expressjs on the backend and angularjs on the frontend, I am worried about the performance implications. People say that JavaScript can be dangerous if not used correctly, so I ran jshint to verify my synta ...

Is there a way to verify in AngularJS whether ng-model contains a string or a numerical value?

In my Angular application, I have written a JavaScript function that checks if the value of a text field is undefined or empty, and it is working properly. $scope.checkNumber = function(user_answer){ if(user_answer == undefined){ return false; } } My ...

Multiple instances of the identical 'Angular application' displayed simultaneously on the webpage

We've created a unique Angular 1.0 application that we aim to embed as a 'widget' within another website built with classic asp.net. During the development phase of our angular app, we take advantage of a range of gulp tools for tasks such ...