CODEWITHSUNDEEP
three.js
user4891786
user4891786

Reputation:

Selecting an object in threejs?

I think the problem might be because it's a loaded object and not a "created" geometry, but I want to be able to select an object and show that it is selected, like in this example.

I load multiple objects in and I keep track of an index for each object (so the first object loaded has objIndex = 0, etc.) and I know that my code recognizes when I "mouse down" from the console. However, it says that intersects.length = 0 so the rest of the function is skipped.

I'm also not sure what "intersects.length" is actually taking the length of.

So I suppose my questions are:

  1. What is "intersects.length" taking the length of?

  2. Why do my objects have an "intersects.length" of 0?

  3. What are some things I could do so that the objects are recognized?

Here's the relevant code:

function onDocumentMouseDown(event) {
    event.preventDefault();
        // default action of event will not be triggered

    var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
        // used to pass 3D positions and directions

    var raycaster = new THREE.Raycaster(camera.position,
                    vector.sub(camera.position).normalize());

    var intersects = raycaster.intersectObjects(objects);

    console.log('Mouse is down.');
    console.log(intersects.length);

    if (intersects.length > 0) {
        controls.enabled = false;
        SELECTED = intersects[0].object;

        var intersects = raycaster.intersectObjects(plane);
        offset.copy(intersects[0].point).sub(plane.position);

        container.style.cursor = 'move';

        console.log('Clicked object: ' + object.name);
    }
}

If you need to see more, let me know! Thank you. :)

Upvotes: 1

Views: 3659

Answers (1)

ExtremelySeriousChicken
ExtremelySeriousChicken

Reputation: 418

Answering your question:

Here is an interesting read on raycast to help clarify raycasting: http://soledadpenades.com/articles/three-js-tutorials/object-picking/

So what raycasting basically do is to (really) cast an imaginary ray. When you "mouse down" your program will, so called, cast a straight-line array into the scene. Now to answer your question:

For question one(1) and two(2) : Now when you cast a ray, it may or may not intersect an object. For example if you click into an empty space, the ray will not catch an object. However, as the name suggest, a raycast cast a ray and it may also hits multiple objects along the way. For example if you have one object and another object positioned directly behind the first object, casting a ray into the first object will also intersects the second object. The ray cast will "catch" both objects and put in the two objects into into the array "intersects". Therefore, the command

if (intersects.length > 0)

stated that if the raycast "catches" and object, do these. Moreover, it keeps on calling intersects[0] to refer to the first objects in the intersects array. In this case the most front object that the raycast catches. You can test my answer by creating hundreds of objects and state that, for every member in the intersects array, you change the color to red(for example). You will see that if the raycast catches multiple objects, all the objects will turn into that color. Hope for the first two question!

I am not sure of what you are asking for the third question. Can you clarify further? One way for the object to be recognized is to put them into the scene and put a raycast on the scene. However, I am not too sure of what you are asking to give you answer that I think you want.

Upvotes: 3

Related Questions