Orthographic camera and object follow mouse

Questions
1

Here is part of my code :

....

raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
var cubeGeo, cubeMaterial;
objects = []; // contain plane (floor)

....

function rollOver() {
	// roll-over helpers
	var rollOverGeo = new THREE.BoxBufferGeometry( 1, 1, 1 );
	rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
	rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
	scene.add( rollOverMesh );
}

function onDocumentMouseMove( event ) {
  mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
  raycaster.setFromCamera( mouse, camera );
  var intersects = raycaster.intersectObjects( objects );
  if ( intersects.length > 0 ) {
    var intersect = intersects[ 0 ];
    rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
    rollOverMesh.position.divideScalar( 1 ).floor().multiplyScalar( 1 ).addScalar( 0.5 );
  }
}

window.addEventListener('mousemove', onDocumentMouseMove);

the object moves correctly with the onmousemove event, but everything is reversed. when the mouse goes to the left the object goes to the right and vice versa, and when the mouse goes down the object goes up.

Need help

2

Try value*(-1)

3 
function onDocumentMouseMove( event ) {
  mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
  raycaster.setFromCamera( mouse, camera );
  var intersects = raycaster.intersectObjects( objects );
  if ( intersects.length > 0 ) {
    var intersect = intersects[ 0 ];
    console.log(intersect)
    rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
    rollOverMesh.position.divideScalar( 1 ).floor().multiplyScalar( 1 ).addScalar( 0.5 );

    rollOverMesh.position.x=rollOverMesh.position.x*(-1);

  }
  render();
}

with this code add : rollOverMesh.position.x=rollOverMesh.position.x*(-1);
the left and right ok on mousemove

but when put together :

rollOverMesh.position.z=rollOverMesh.position.z*(-1);
rollOverMesh.position.x=rollOverMesh.position.x*(-1);

the problem come back movement invert (for x and z)

4

What is this line for?

5

follow a grid, when comment, got the same problem

6

Any chance to provide a working live code example, that demonstrates the issue? jsfiddle, codepen, codesandbox etc.

7

Drag or follow: https://codepen.io/illuminsi/pen/qBjbaoY

8

finaly find my problem, the initial scene was rotate at the beginning of my code

scene.rotation.y=scene.rotation.y+270*Math.PI/180;   (i remove this part)
2 Likes