0

Ok, Im working off https://tympanus.net/codrops/2018/12/06/interactive-repulsion-effect-with-three-js/ and Three.js - Push away and then restore elements position on "mouse move"

trying to get objects positioned in 3d space to be repelled by the mouse. To do this, I need to get the direction of the mouse relative to the object on x, y, z axes and move the object in the OPPOSITE direction.

I'm using TweenMax, and can change an object's position like this 

TweenMax.to(m.position, .2, { x: 0, y: 0, z: 0});

The Tympanus can get the distance between the mouse and the object using 

const distance = (x1, y1, x2, y2) => {
  return Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2));
}

const distancexyz = (x1, y1, z1, x2, y2, z2) => {
  return Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2)+ Math.pow((z1 - z2), 2));
}

But currently the tutorial propels the objects always in the same direction, not repelling the objects like Three.js - Push away and then restore elements position on "mouse move".

How can I make the objects move in the opposite direction of the mouse, like the repulsion on all axes?

Minimal, verifiable example:

Object can be moved in A DIRECTION (I dont have mouse direction, thats what I need) using TweenMax:

 TweenMax.to(m.position, duration, { x: change, y: change, z: change});
blue
  • 7,175
  • 16
  • 81
  • 179
  • Have you looked at this resource? I'm not sure if it's the answer for this specific situation, but it might be helpful in determining a solution: https://github.com/mrdoob/three.js/issues/8014 – Horatius Cocles Jul 21 '19 at 23:56
  • Do you've a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve)? If you are already able to move the object in the direction of the mouse, then the the opposite direction is achieved by a multiplication by `-1`. Possibly `TweenMax.to(-m.position, .2, { x: 0, y: 0, z: 0});`? But without a verifiable example I can guess only. – Rabbid76 Jul 22 '19 at 16:32
  • @Rabbid76 thanks but no, that is what I am asking - how to GET the direction of the mouse relative to the object (i.e. is it coming from below? From the left?) Right now I only have mouse distance and position – blue Jul 22 '19 at 17:00
  • @Rabbid76 Yes I do, see above - the code to move an object on 3 axes is `TweenMax.to(m.position, .2, { x: 0, y: 0, z: 0});` and `mousePosition` is stored in a variable, as is object position (`m.position`) – blue Jul 22 '19 at 17:24

0 Answers0