Why does mouse event update the geometry only once in threejs?

Questions
1

This is what I tried:

> 	var scene  = new THREE.Scene();
> 	var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000);
> 
> 	var renderer = new THREE.WebGLRenderer();
> 	renderer.setSize(window.innerWidth, window.innerHeight);
> 	
> 	document.body.appendChild(renderer.domElement);
> 	
> 	document.addEventListener( 'mousemove', onDocumentMouseMove, false );
> 
> 	/// Add a point
> 	var dotGeometry = new THREE.Geometry();
> 	dotGeometry.vertices.push(new THREE.Vector3( 10, 10, 10));
> 	dotGeometry.vertices.push(new THREE.Vector3( 220, 220, 220));
> 
> 	var dotMaterial = new THREE.PointsMaterial( { size: 10, sizeAttenuation: false } );
> 	var dot = new THREE.Points( dotGeometry, dotMaterial );
> 	scene.add( dot );
> 
> // Executes when the mouse "clicks"
> function onDocumentMouseMove( event ) 
> {
>     event.preventDefault();
>     
>     dotGeometry.dynamic = true;  
> 	dotGeometry.vertices[0] = (event.clientX, event.clientY, event.clientZ );
> 	dotGeometry.verticesNeedUpdate = true;
> 	
> 	renderer.render(scene, camera);
> }
> 
> camera.position.z = 2000; 
> renderer.render(scene, camera);

This moves the point a bit and then it doesn’t move at all on mousemovements.

2nd code:

> 	var scene  = new THREE.Scene();
> 	var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000);
> 
> 	var renderer = new THREE.WebGLRenderer();
> 	renderer.setSize(window.innerWidth, window.innerHeight);
> 	
> 	document.body.appendChild(renderer.domElement);
> 	
> 	document.addEventListener( 'mousemove', onDocumentMouseMove, false );
> 
> 	/// Add a point
> 	var dotGeometry = new THREE.Geometry();
> 	dotGeometry.vertices.push(new THREE.Vector3( 10, 10, 10));
> 	dotGeometry.vertices.push(new THREE.Vector3( 220, 220, 220));
> 
> 	var dotMaterial = new THREE.PointsMaterial( { size: 10, sizeAttenuation: false } );
> 	var dot = new THREE.Points( dotGeometry, dotMaterial );
> 	scene.add( dot );
> 
> // Executes when the mouse "clicks"
> function onDocumentMouseMove( event ) 
> {
>     event.preventDefault();
> 
> 	var mouse2D = new THREE.Vector2();
> 
>     mouse2D.x = ( event.clientX / window.innerWidth ) * 2 - 1;
>     mouse2D.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
>     
>     dotGeometry.dynamic = true;  
> 	dotGeometry.vertices[0] = (mouse2D.x, mouse2D.y, 0.5 );
> 	dotGeometry.verticesNeedUpdate = true;
> 	
> 	renderer.render(scene, camera);
> }
> 
> camera.position.z = 2000; 
> renderer.render(scene, camera);

This doesn’t do anything. The point vanishes.

How to get the point to move with the mouse pointer?

2

It seems you are not setting the vertex correctly. Try it like so:

vector.set( mouse2D.x, mouse2D.y, 0 );
vector.unproject( camera );

dotGeometry.vertices[0].copy( vector );
dotGeometry.verticesNeedUpdate = true;

You have to use Vector3.unproject() to convert the mouse coordinates to world coordinates.

BTW: And setting Geometry.dynamic has no effect.

https://jsfiddle.net/f8qxrzt1/

1 Like
3

I am utterly thankful for your helpful reply.
I will study copy and the meaning of world coordinates vs mouse coordinates.

1 Like