How to update a Box3 in the mouseEvent?

Questions
1

Here a box is created outside the mouseEvent.
Inside the mouseEvent, I want to update the box’s coordinates.
Currently, I expect the box to move with the mouse cursor so I have assigned mouse’s x and y to the box’x x and y.

This is not having the desired effect. Please guide.

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 );

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );

/// Add a Box3
var anchor = new THREE.Vector3( -200, -200, 0 );
var cursor = new THREE.Vector3( 300, 300, 400 ); // increasing z here makes it look 3d.

var box2 	   = new THREE.Box3( anchor, cursor );
var box2Helper = new THREE.Box3Helper( box2 );

box2Helper.rotation.z = 30;
scene.add( box2Helper );

// Executes when the mouse "moves"
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;
	
	var vector = new THREE.Vector3();
	vector.set( mouse2D.x, mouse2D.y, 0 );
	vector.unproject( camera );

	var anchor1 = new THREE.Vector3( vector.x, vector.y, 0 );
	var cursor1 = new THREE.Vector3( vector.x + 900, vector.y + 900, 0 ); // increasing z here makes it look 3d.

	var box3 	   = new THREE.Box3( anchor1, cursor1 );
	box2.copy(box3);

	renderer.render(scene, camera);
}

camera.position.z = 2000; 
camera.position.y = 1000;
camera.position.x = 500;

renderer.render(scene, camera);
2

/cc

3

Is there a special reason for using Box3? This is actually an AABB, so a pure math class. It might be easier to work a simple mesh like so:

var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry(), new THREE.MeshBasicMaterial() );

In this way, you can just set the position property if you want to move around the box in 3D space.

4

Yes, it is necessary to use Box3. There is some code which is using it and I have to modify that in some way.

When I tries to change the box’s coordinates outside the mouse functions, it was getting updated properly. This problem occurs only inside mouse function.

5

Can you please update the fiddle from the previous topic? https://jsfiddle.net/f8qxrzt1/

In this way, I can debug the issue which makes it easier to find the root cause.

1 Like
6

https://jsfiddle.net/bfaspoh9/
Am thankful for your helpful attitude.

7

When using unproject() you have to understand that the coordinates are right before the camera. Right now, there is a movement in your fiddle although it is very subtle because of the far distance. Adjusting the camera parameters makes it work again.

https://jsfiddle.net/wonm3afc/1/

In any event, I don’t recommend what you are doing in your code^^. You should always work with 3D primitives like meshes, points or lines and use bounding volumes only for stuff like raycasting or collision detection. Helpers are not intended as replacement for real meshes.

1 Like
8

Greetings, and thank you for your help again.
I am reading this software: https://github.com/bernwang/latte
There is a file app/static/js/Box.js, you will find that they have drawn a Box3 on the screen, put some points by Geometry on its 4 coordinates and they allow the user to drag the points and then internally adjust the box and display it again on the screen.
This is my understanding of what they doing. Please correct me if I am wrong.

9

Well, yes you do the same like the linked code. However, I would prefer to work with BoxGeometry instead and just render it as a mesh with a proper material. Seems the more obvious approach to me.

1 Like
10

I wish to understand what I need to read to understand what happens once we get inside a mouseEvent.
You were able to draw a Box3 with mouse’s coordinate as its center point.
I tried to use mouse’s coordinates to set the anchor and the cursor of Box3, but it shows nothing.
I request you to make me understand what’s happening here and what do I need to understand how to perform all this in a mouseEvent.

Please see this fiddle.
https://jsfiddle.net/L3zytjv2/

11

I don’t have the time to explain everything in this thread but I have the feeling you need a better understanding of the different coordinate spaces you are working with. And how you can convert between them.

There is a lot of existing literature about this topic e.g. 3D Math Primer for Graphics and Game Development (2nd Ed). Such a book will also make you more familiar with bounding volumes. But be aware that studying and understanding this stuff will require some time.