What steps should be taken to make an object rotate in the opposite direction of the cursor

Question

What steps should be taken to make an object rotate in the opposite direction of the cursor

I have a group of cubes enclosed within an Object3D with the pivot point set as the origin:
https://i.sstatic.net/JLBr9.png

My objective is to rotate the cube in the opposite direction of the cursor's position. For instance, if the cursor is on the left side of the cube, the cube should spin counter-clockwise around the y-axis (green axis). If the cursor is above the cube, it should rotate counter-clockwise around the x-axis (red axis). I initially tried to achieve this by adding a "mousemove" event listener, but it only rotates when the mouse is in motion:

document.addEventListener("mousemove", onDocumentMouseMove, false);
var mouse = new THREE.Vector2();
function onDocumentMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    {...rotations}
}

Is there a way to implement this functionality using three.js?

javascript three.js

Answer 1

Answer №1

One simple approach involves detecting the cursor's position and adjusting an object's rotation to create a tilting effect. Alternatively, if you prefer full rotation, you can utilize the mesh.rotate function.

document.addEventListener("mousemove", onDocumentMouseMove, false);

var mouse = new THREE.Vector2();

function onDocumentMouseMove( e ) {
    e.preventDefault();
    mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
}

function animate() {
    mesh.rotation.set(
        (mouse.y * -0.4),
        (mouse.x * -0.8),
        0
    );
}

Answer 2

One simple approach involves detecting the cursor's position and adjusting an object's rotation to create a tilting effect. Alternatively, if you prefer full rotation, you can utilize the mesh.rotate function.

document.addEventListener("mousemove", onDocumentMouseMove, false);

var mouse = new THREE.Vector2();

function onDocumentMouseMove( e ) {
    e.preventDefault();
    mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
}

function animate() {
    mesh.rotation.set(
        (mouse.y * -0.4),
        (mouse.x * -0.8),
        0
    );
}

What steps should be taken to make an object rotate in the opposite direction of the cursor

Answer №1

Similar questions

AngularJS - development of a service entity

utilizing ajax for validating logins in Laravel

Customize dropdown item colors in React using a color picker

The NGINX reverse proxy fails to forward requests to an Express application

Ways to take a screenshot using Three.js

What is the best way to send a multi-dimensional array to jQuery UI autocomplete feature?

Failure to update the DOM after clicking a button and making an AJAX request

"Enhance Your Website with Dynamic Text Effects using JavaScript

Saving solely the content of an HTML list element in a JavaScript array, excluding the image source

The function `canvas.toDataURL()` does not produce an image as output

Identifying a loop within a hierarchy of JavaScript elements

Angular UI-Router failing to show nested view on page

Getting Checkbox values selected by the user with ng-model in AngularJS

Make sure to load the HTML content before requesting any input from the user through the prompt function

Executing multiple Ajax requests on CodeIgniter 3 from two separate pages

The extensive magnetic scrolling functionality in Ionic 2 sets it apart from other frameworks

"Array.Find function encounters issues when unable to locate a specific string within the Array

How can we stop the Replace function from replacing spaces as well?

disable any other active toggle in a vue component

Sign up for a Jquery template event