Sprite not moving with cusor in three.js r71 - javascript

When I move the cursor, the sprite is visible but not properly moving along with the cursor point. It is moving in opposite direction. Please help.
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;

Whenever something is "moving in opposite direction" in the 3d world, it is useful negating whatever that is:
mouse.x = ( event.clientX / window.innerWidth );
mouse.y = ( event.clientY / window.innerHeight );
//mouse is now somewhere between 0..1 for both x and y
//if you want this to go in the opposite direction
mouse.x = 1 - mouse.x;
mouse.y = 1 - mouse.y;
//if it goes from -1 to 1 you scale it:
mouse.x = mouse.x * 2 - 1; //first it goes from 0..2 then -1...1
//reversing this is
mouse.x = -mouse.x;
this on the other hand:
sprite1.position.set( event.clientX *(-.4) , event.clientY *(.4)
will be hard to achieve. It seems you are projecting your screen coordinates in pixels, to some world units (otherwise i'm not sure you'd get them to show up). If you are working only in the positive range, flipping -4 to 4 will move it offscreen. You'd need to do add an offset, so subtract 8 for example.

Related

Three.js - How to update object position for Raycaster and Intersection

I've this glTF face model which successfully 'looks' at the position of the mouse. I got the tracking working on the full window, even outside the canvas (which is needed). Since the canvas will not be full screen.
Now I'll run into an issue where the face direction doesn't align with the mouse location. E.g. this issue happens when I place the canvas inside a column on the right, the object thinks the canvas is still originated from the top left corner of the window. I'm using this code to track the mouse movement:
var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), -10);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var pointOfIntersection = new THREE.Vector3();
document.addEventListener("mousemove", onMouseMove, false);
function onMouseMove(event) {
mouse.x = (event.clientX / canvas.clientWidth) * 2 - 1;
mouse.y = - (event.clientY / canvas.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
raycaster.ray.intersectPlane(plane, pointOfIntersection);
scene.lookAt(pointOfIntersection);
}
I don't really know how to approach this problem. How do I update the new object position relative to the screen so the raycaster and pointOfIntersection align the face direction accordingly to it's position?
const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
Kudos to Mugen87 for making this possible :)

Three.js change from mouseMove to randomly moving around

I got this website with a bg that as you move you mouse around it lights up part of the bg depending on where your mouse it. I was wondering if there was a way to make that light spot bob around on its own. Here is a codepen with the JS: https://codepen.io/anon/pen/MGoxNr
I hope thats enough to see what its doing
Here is a live website using this: http://www.crimson-moon.com/
If you need to see it.
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX ) * 10;
mouseY = ( event.clientY - windowHalfY ) * -10;
}
Remove onDocumentMouseMove and set some interval, where you set X, Y on circle with some radius. Set some incrementing varible, and depending on it, calculate X,Y position on circle.
x0, y0 - center of circle
r - circle radius
a - angle
x = x0 + r*cos(a)
y = y0 + r*sin(a)
changing angle x, y will change.

three.js first person camera rotation

I've looked for help of first player rotation on three.js for a while but most of the answers are outdated with functions which currently don't exist in the updated library.
I'm trying to make my code run so that the camera will rotate around it's own axis according to the position of the mouse on the screen.
The current rotation code is:
var scale = 10;
function viewKeys(){
document.addEventListener("mousemove", MouseMove, true);
function MouseMove(event) {
mouseX = event.clientX - divOffsetWidth;
mouseY = event.clientY - divOffsetHeight;
}
}
divOffset variables make the mouse positions read relative to the center of the HTML div.
function viewAnimate(){
camera.rotation.x = -((3/2)*(Math.PI*mouseY)) / (scale);
camera.rotation.y = -(2*(Math.PI*mouseX)) / (scale);
}
The viewKeys() function is called in the init() function and the viewAnimate() function is called within the animate() function.
Currently the code can rotate normally when the camera's position is (0,0,0) but if I move to a different position it looks as if the camera is rotating relative to the whole environment's axis.
I am aware that there are lots of control librarys for three.js but I would like to understand how to be able to rotate something on its own axis myself.
How do you suppose I change the rotation so that it works correctly?
If you want to rotate the camera yourself via the mouse, you will have to understand how Euler rotations work in three.js. See this answer.
One way to implement what you want is by using a pattern like so:
var scale = 1;
var mouseX = 0;
var mouseY = 0;
camera.rotation.order = "YXZ"; // this is not the default
document.addEventListener( "mousemove", mouseMove, false );
function mouseMove( event ) {
mouseX = - ( event.clientX / renderer.domElement.clientWidth ) * 2 + 1;
mouseY = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
camera.rotation.x = mouseY / scale;
camera.rotation.y = mouseX / scale;
}
I agree with you that experimenting with this would be a good learning experience.
three.js r.89

ThreeJS, get vector towards clicked direction

What I'm trying to achieve is to make a specific mesh move towards a specific vector until it will eventually be stopped by the player.
So far I have managed to get the XY coordinates of the clicked canvas and project them in 3d using the following piece of code. Unfortunately I'm not sure what approach to take in order to get the direction towards the clicked position.
var vector = new THREE.Vector3();
vector.set(
( event.clientX / window.innerWidth ) * 2 - 1,
+ ( event.clientY / window.innerHeight ) * 2 + 1,
0.5 );
vector.unproject( camera );
var dir = vector.sub( camera.position ).normalize();
var distance = + camera.position.z / dir.z;
var pos = camera.position.clone().add( dir.multiplyScalar( distance ) );
This assumes a target Vector3 and a maximum distance to be moved per frame of .01.
var vec1 = target.clone(); // target
vec1.sub(mesh.position); // target - position
var dist = Math.min(vec1.length(), .01); // assume .01 is maximum movement
if (dist > 0) {
vec1.setLength(dist); // this will be the movement
mesh.position.add(vec1); // this moves the messh
}

convert mouse click to 3d space with orthographic camera

Three.js : rev 73
I'm using the following construct to find intersection of mouse click with objects in the 3d world (orthographic setup):
function onDocumentMouseDown(event) {
event.preventDefault();
console.log("Click");
var mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
var raycaster = new THREE.Raycaster();
// update the picking ray with the camera and mouse position
raycaster.setFromCamera(mouse, camera);
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects(scene.children);
console.log("intersects: " + intersects.length);
for (var i = 0; i < intersects.length; i++) {
console.log(intersects[i].point);
}
}
However, the intersection is very inaccurate. Intersection is captured when I click near the top left of the box only.
jsFiddle: Can someone please help me understand why is this misbehaving ?
Also, if no object is being selected, I want to find out where is the click in 3d world relative to the box - left, right, below the box ? Can I use the ray itself to compute this ?
you have to get accurate mouse position for ray-casting :-
mouse.x = ( (event.clientX -renderer.domElement.offsetLeft) / renderer.domElement.width ) * 2 - 1;
mouse.y = -( (event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height ) * 2 + 1;
you have to fire event listener when window resize
i update the fiddle again check it now .
add new function for window resize...
code is self explaintory ...hope you got it .
Check Update Fiddle now
updated fiddle :-
http://jsfiddle.net/gc1v0rza/5/

Categories

Resources