# How to update a Box3 in the mouseEvent?

**URL:** <https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [January 15, 2020, 10:51am UTC](https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125 "2020-01-15T10:51:26Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![NoName](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/noname/32/5900_2.png) [@NoName](https://discourse.threejs.org/u/NoName)\
**Post date:** [January 15, 2020, 10:51am UTC](https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125/1 "2020-01-15T10:51:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 15, 2020, 11:19am UTC](https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125/2 "2020-01-15T11:19:14Z")

</div>

/cc

> <https://stackoverflow.com/questions/59750142/how-to-update-a-box3-in-the-mouseevent-of-three-js>

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 15, 2020, 11:21am UTC](https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125/3 "2020-01-15T11:21:51Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![NoName](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/noname/32/5900_2.png) [@NoName](https://discourse.threejs.org/u/NoName)\
**Post date:** [January 15, 2020, 11:25am UTC](https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125/4 "2020-01-15T11:25:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 15, 2020, 11:27am UTC](https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125/5 "2020-01-15T11:27:47Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![NoName](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/noname/32/5900_2.png) [@NoName](https://discourse.threejs.org/u/NoName)\
**Post date:** [January 15, 2020, 11:29am UTC](https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125/6 "2020-01-15T11:29:56Z")

</div>

[https://jsfiddle.net/bfaspoh9/](https://jsfiddle.net/bfaspoh9/)  
Am thankful for your helpful attitude.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 15, 2020, 12:11pm UTC](https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125/7 "2020-01-15T12:11:19Z")

</div>

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/](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.

---

<div class="post-metadata">

**Author:** ![NoName](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/noname/32/5900_2.png) [@NoName](https://discourse.threejs.org/u/NoName)\
**Post date:** [January 17, 2020, 10:09am UTC](https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125/8 "2020-01-17T10:09:25Z")

</div>

Greetings, and thank you for your help again.  
I am reading this software: [https://github.com/bernwang/latte](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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 17, 2020, 10:18am UTC](https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125/9 "2020-01-17T10:18:12Z")

</div>

Well, yes you do the same like the linked code. However, I would prefer to work with [BoxGeometry](https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry) instead and just render it as a mesh with a proper material. Seems the more obvious approach to me.

---

<div class="post-metadata">

**Author:** ![NoName](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/noname/32/5900_2.png) [@NoName](https://discourse.threejs.org/u/NoName)\
**Post date:** [January 17, 2020, 10:28am UTC](https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125/10 "2020-01-17T10:28:08Z")

</div>

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/](https://jsfiddle.net/L3zytjv2/)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 17, 2020, 10:41am UTC](https://discourse.threejs.org/t/how-to-update-a-box3-in-the-mouseevent/12125/11 "2020-01-17T10:41:47Z")

</div>

> [@NoName](#):
>
> I wish to understand what I need to read to understand what happens once we get inside a mouseEvent.

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.