Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

The sample code uses version three.js-R73: github.com/mrdoob/thre…

Now that we’ve made the scene render object and changed the scene view by listening to the mouse, how do we select the object using the mouse? For example, the selected object changes color. Let’s take a look.

We use the random geometry rendered in the previous section for mouse selection.

What is pickup

  • Mouse selected an object is picked up.

Let’s describe three dimensional mouse clicks in two dimensions

  • Suppose our right camera looks at the object in the scene
  • When we mouse click on a certain location
  • The line between the mouse and the camera passes through (intersects with) objects that we can pick up
  • We can determine that only the first object intersects, and then do something with it

Raycaster

  • This class is used for raycasting. Raycasting is used for mouse pickup (figuring out what the mouse has moved over in three dimensions).
  • The Raycaster class is a simple class that implements pick-ups. It’s easy because you don’t really need to know how it works to use it.
  • The constructor
THREE.Raycaster = function ( origin, direction, near, far )
Copy the code
  • Origin: the point from which the optical fiber is emitted
  • Direction: normalized direction vector
  • Near: indicates the nearest transmitting distance of the optical fiber. The default value is 0
  • Far: indicates the maximum transmission distance of an optical fiber. The default value is infinity

Note: If no parameters are passed, the origin and direction of this ray are the default origin.

SetFromCamera method

setFromCamera: function ( coords, camera )
Copy the code
  • This method can be set by the cameraorigin, directionTwo attributes
  • Coords: Mouse position, which is a normalized device coordinate, must be between -1 and 1
  • Camera: The location where the light originated

Normalized coordinates

  • Advantages of normalized coordinates: Our camera uses the world coordinates of the THREE-DIMENSIONAL world, which is easier to transform through normalized coordinates.
  • Let’s say that our three-dimensional world’s normalized coordinates are at the origin, so our screen coordinates are in the upper left corner, so we need to convert the screen coordinates to normalized coordinates, using the transformation function

IntersectObject method

intersectObject: function ( object, recursive )
Copy the code
  • This method calculates which objects intersect it
  • Object – Checks for objects that intersect the ray.
  • Recursive — If true, all descendants will also be checked. Otherwise, only the object itself will be examined. The default value is false.

In actual combat

  • Initialize raycaster
raycaster = new THREE.Raycaster();
Copy the code
  • Monitor mouse movement and record coordinate information
// The default position of the mouse is a two-dimensional vector
var mouse = new THREE.Vector2()
document.addEventListener("mousemove", onDocumentMouseMove, false);

function onDocumentMouseMove(event) {
    event.preventDefault();

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

Copy the code
  • Figure out how much light the camera hits the mouse
 raycaster.setFromCamera(mouse, camera);
Copy the code
  • Find the object that intersects the ray and return the array (there is not only one object intersected)
var intersects = raycaster.intersectObjects(scene.children);
Copy the code
  • Set the currently selected object to red, and the previously selected and unselected objects to their original colors.

// If there are intersecting objects
if (intersects.length > 0) {
    if(INTERSECTED ! = intersects[0].object) {
        // The selected object here is the last selected object.
        if (INTERSECTED) {
            // Set the last selected object to the current color.
            INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
        }
        // Sets the currently selected object
        INTERSECTED = intersects[0].object;
        // Keep the current selected object, ** original color **
        INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
        // Set the color of the currently selected object to red
        INTERSECTED.material.emissive.setHex(0xff0000);
    }
    // If there are no intersecting objects, set the selected object to its original color
} else {
    if (INTERSECTED) {
        INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
    }
    // Clear the selected object
    INTERSECTED = null;
}
Copy the code

Implementation effect

  • Mouse selected objects will change color, after leaving selected objects change back to the original color
  • The next selected object changes color

Codepen sample code