I'm working my way through this book, and I'm doing okay I guess, but I've hit something I do not really get.
Below is how you can log to the console and object in 3D space that you click on:
renderer.domElement.addEventListener('mousedown', function(event) {
var vector = new THREE.Vector3(
renderer.devicePixelRatio * (event.pageX - this.offsetLeft) / this.width * 2 - 1,
-renderer.devicePixelRatio * (event.pageY - this.offsetTop) / this.height * 2 + 1,
0
);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(
camera.position,
vector.sub(camera.position).normalize()
);
var intersects = raycaster.intersectObjects(OBJECTS);
if (intersects.length) {
console.log(intersects[0]);
}
}, false);
Here's the book's explanation on how this code works:
The previous code listens to the mousedown event on the renderer's canvas.
Get that, we're finding the domElement the renderer is using by using renderer.domElement
. We're then binding an event listener to it with addEventListner
, and specifing we want to listening for a mousedown
. When the mouse is clicked, we launch an anonymous function and pass the event
variable into the function.
Then, it creates a new Vector3 instance with the mouse's coordinates on the screen relative to the center of the canvas as a percent of the canvas width.
What? I get how we're creating a new instance with new THREE.Vector3
, and I get that the three arguments Vector3
takes are its x, y and z
coordinates, but that's where my understanding completely and utterly breaks down.
Firstly, I'm making an assumption here, but to plot a vector, surely you need two points in space in order to project? If you give it just one set of coords, how does it know what direction to project from? My guess is that you actually use the Raycaster
to plot the "vector"...
Now onto the arguments we're passing to Vector3
... I get how z
is 0. Because we're only interested in where we're clicking on the screen. We can either click up or down, left or right, but not into or out of the screen, so we set that to zero. Now let's tackle x:
renderer.devicePixelRatio * (event.pageX - this.offsetLeft) / this.width * 2 - 1,
We're getting the PixelRatio of the device, timsing it by where we clicked along the x axis, dividing by the renderer's domElement width, timsing this by two and taking away one.
When you don't get something, you need to say what you do get so people can best help you out. So I feel like such a fool when I say:
I get y
even less:
-renderer.devicePixelRatio * (event.pageY - this.offsetTop) / this.height * 2 + 1,
Why are we now randomly using -
devicePixelRatio? Why are now deciding to add
one rather than minus
one?
That vector is then un-projected (from 2D into 3D space) relative to the camera.
What?
Once we have the point in 3D space representing the mouse's location, we draw a line to it using the Raycaster. The two arguments that it receives are the starting point and the direction to the ending point.
Okay, I get that, it's what I was mentioning above. How we need two points to plot a "vector". In THREE talk, a vector appears to be called a "raycaster".
However, the two points we're passing to it as arguments don't make much sense. If we were passing in the camera's position
and the vector's position
and drawing the projection from those two points I'd get that, and indeed we are using the camera.position
for the first points, but
vector.sub(camera.position).normalize()
Why are we subtracting the camera.position? Why are we normalizing? Why does this useless f***** book not think to explain anything?
We get the direction by subtracting the mouse and camera positions and then normalizing the result, which divides each dimension by the length of the vector to scale it so that no dimension has a value greater than 1.
What? I'm not being lazy, not a word past by
makes sense here.
Finally, we use the ray to check which objects are located in the given direction (that is, under the mouse) with the intersectObjects method. OBJECTS is an array of objects (generally meshes) to check; be sure to change it appropriately for your code. An array of objects that are behind the mouse are returned and sorted by distance, so the first result is the object that was clicked. Each object in the intersects array has an object, point, face, and distance property. Respectively, the values of these properties are the clicked object (generally a Mesh), a Vector3 instance representing the clicked location in space, the Face3 instance at the clicked location, and the distance from the camera to the clicked point.
I get that. We grab all the objects the vector passes through, put them to an array in distance order and log the first one, i.e. the nearest one:
console.log(intersects[0]);
And, in all honestly, do you think I should give up with THREE? I mean, I've gotten somewhere with it certainly, and I understand all the programming aspects of it, creating new instances, using data objects such as arrays, using anonymous functions and passing in variables, but whenever I hit something mathematical I seem to grind to a soul-crushing halt.
Or is this actually difficult? Did you find this tricky? It's just the book doesn't feel it's necessary to explain in much detail, and neither do other answers , as though this stuff is just normal for most people. I feel like such an idiot. Should I give up? I want to create 3D games. I really, really want to, but I am drawn to the poetic idea of creating an entire world. Not math. If I said I didn't find math difficult, I would be lying.
I understand your troubles and I'm here to help. It seems you have one principal question: what operations are performed on the vector to prepare it for click detection?
Let's look back at the original declaration of vector
:
var vector = new THREE.Vector3(
renderer.devicePixelRatio * (event.pageX - this.offsetLeft) / this.width * 2 - 1,
-renderer.devicePixelRatio * (event.pageY - this.offsetTop) / this.height * 2 + 1,
0
);
renderer.devicePixelRatio
relates to a ratio of virtual site pixels /
real device pixelsevent.pageX
and .pageY
are mouseX, mouseYthis
context is renderer.domElement
, so .width, .height, .offsetLeft/Right
relate to that1
appears to be a corrective "magic" number for the calculation (for the purpose of being as visually exact as possible)We don't care about the z-value, THREE will handle that for us. X and Y are our chief concern. Let's derive them:
event.pageX - this.offsetLeft
this.width
to get the mouseX as a percentage of the screen widthrenderer.devicePixelRatio
to convert from device pixels to site pixels2
, but it might have to do with an assumption that the user has a retina display (someone can feel free to correct me on this if it's wrong).1
is, again, magic to fix what might be just an offset errory
, we multiply the whole expression by -1
to compensate for the inverted coordinate system (0 is top, this.height
is bottom)Thus you get the following arguments for the vector:
renderer.devicePixelRatio * (event.pageX - this.offsetLeft) / this.width * 2 - 1,
-renderer.devicePixelRatio * (event.pageY - this.offsetTop) / this.height * 2 + 1,
0
Now, for the next bit, a few terms:
THREE.Raycaster( origin, direction )
With these terms in mind, I can explain why we do this: vector.sub(camera.position).normalize()
. First, we get the vector describing the distance from the mouse position vector to the camera position vector, vector.sub(camera.position)
. Then, we normalize it to make it a direction
vector (again, magnitude = 1). This way, we're casting a vector from the camera to the 3D space in the direction of the mouse position! This operation allows us to then figure out any objects that are under the mouse by comparing the object position to the ray's vector.
I hope this helps. If you have any more questions, feel free to comment and I will answer them as soon as possible.
Oh, and don't let the math discourage you. THREE.js
is by nature a math-heavy language because you're manipulating objects in 3D space, but experience will help you get past these kinds of understanding roadblocks. I would continue learning and return to Stack Overflow with your questions. It may take some time to develop an aptitude for the math, but you won't learn if you don't try!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With