UPDATE: This post was written for three.js revision 49. An updated post for newer revisions of three.js is here: Mouse-Picking Collada Models with three.js, Part II.

Finding a Collada model that has been “clicked on” in a scene seems to be a common issue, and I’m getting quite some emails asking me about details. So here’s a how-to with annotated code.

The whole “finding an object” thing requires ray casting. When the user clicks anywhere on the screen, we’ll project the event coordinates into the 3D space so that we have a virtual “view-path” from the center of our view into the direction where the click took place – like our own eye does. We then follow that line until we find an intersection with an object in the scene. That line is the ray we are “casting”. OK, let’s go!

There is a demo showing this here: http://jensarps.github.com/webgl_experiments/collada_picking_ray.html

The annotated source code is available here: https://github.com/jensarps/webgl_experiments/blob/master/collada_picking_ray.html. I’ll be following along this code in this post.

For this to work, you need a ray caster that is able to detect Collada models; I extensively wrote about this before, so I just recommend you use the ReusableRay class.

Initially, we setup some vars we will later need:

view rawsetup.js hosted with ❤ by GitHub

The first thing we do is to record the mouse event. We do not react to it right now, because we don’t want to do anything outside of the render loop, so we keep control about what happens when. So let’s just store the coordinates and set a flag that we can later look up:

view rawconnect.js hosted with ❤ by GitHub

Next, in the render loop, we check if a click has happened. If so, we start the whole ray casting thingy. To define the ray, we need two vectors: One representing the start point of the ray, and the other one representing the direction. The first is easy, it’s the camera position. The second is more interesting. We start with translating the mouse coordinates into something that’s independent of screen size, and assigning them to the direction vector:

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

view rawsetup-direction-vector.js hosted with ❤ by GitHub

Now, there’s a little bit of math magic happening. Currently, we have the right direction if the camera’s position and view direction wouldn’t have changed. So we need to modify the vector to take these into account; I can’t really explain why this works, you need to trust me on this one:

view rawfind-direction.js hosted with ❤ by GitHub

Ok, now we’ve got a vector that describes the direction correctly, but if you inspect it, you’ll find that it contains some crazy numbers. We need to make sure it contains only numbers ranging from -1 to 1 before passing it on to the ray caster class and firing off the ray:

view rawnormalizing.js hosted with ❤ by GitHub

That’s it! We can now ask the ray class for intersections, and it will report back all meshes, particles and objects that have meshes as first-level children. Intersections are ordered by distance, so in this case, we only need the first one we get. Each intersection has three properties: point, face and object. point contains a vector describing the point in space where the ray exactly intersected the object, face contains the hit face, and object the original object that has been hit — it’s exactly the object we have been adding to the scene earlier with scene.add(/* ... */).

view rawintersection.js hosted with ❤ by GitHub

Done! If there’s anything unclear, don’t hesitate and let me know. Thanks!

[출처] http://jensarps.de/2012/08/10/mouse-picking-collada-models-with-three-js/