CODEWITHSUNDEEP
three.jsmeshraycastingvertices
Sirab33
Sirab33

Reputation: 1285

Raycaster fails to detect Cubes

How do you combine a Square and a Rectangle into one object that a Raycaster can detect successfully?

I created a custom “Tree” object by making a “Trunk” - which is just a long rectangle, and then sticking a Square object on top of that Trunk. I then “planted” that Tree on top of a Sphere, and I'm trying to get my raycaster to detect it. It’s not working.

Here’s my code:

// My custom “Tree” Object:
var Tree = function(treeColor) {
    this.mesh = new THREE.Object3D();
    this.mesh.name = "tree";

    // I start with the TRUNK - which is just an elongated Cube - meaning a Rectangle:
    var trunkGeometry = new THREE.CubeGeometry(0.2, 0.5, 0.2);
    var trunkMaterial = new THREE.MeshBasicMaterial({ color: "blue", wireframe: false });
    var treeTrunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
    treeTrunk.position.set(0, 0, 0);
    treeTrunk.rotation.x = -Math.PI * 0.5;
    this.mesh.add(treeTrunk);

    // Then I create the FOLIAGE - which is just a regular Cube:
    var foliageGeometry = new THREE.CubeGeometry(0.5, 0.5, 0.5);
    var foliageMaterial = new THREE.MeshBasicMaterial({ color: treeColor, wireframe: false });
    var treeFoliage = new THREE.Mesh(foliageGeometry, foliageMaterial);
    treeFoliage.position.set(0, 0.5, 0);

    // And then I attach/add the FOLIAGE to the TRUNK:
    treeTrunk.add(treeFoliage);
}



// Next I make a basic Sphere:
theSun = new THREE.Mesh(new THREE.SphereGeometry(3, 32, 24), new THREE.MeshBasicMaterial( {color: "white", wireframe: false} ));
scene.add(theSun);


// And then I make a Tree and add it to my Sphere (`theSun`):
var oneTree = new Tree("red");
let rx = Math.random() * Math.PI * 2;
let ry = Math.random() * Math.PI;
oneTree.mesh.position.setFromSphericalCoords(3.2, ry, rx);
oneTree.mesh.lookAt(theSun.position);
theSun.add(oneTree.mesh);

// Next I add both theSun and the Tree to my “objectsForRayCasterArray” - a global var I use in my raycaster test:
objectsForRayCasterArray.push(oneTree);
objectsForRayCasterArray.push(theSun);


// In my render() function, I do the usual raycasting business:
        rayCaster = new THREE.Raycaster();

function render() {
    requestAnimationFrame(render);

    controls.update();
    renderer.render(scene, camera);
        
    // Raycasting stuff:
    rayCaster.setFromCamera(mousePosition, camera);
     
    var intersectingObjectsArray = rayCaster.intersectObjects(objectsForRayCasterArray);
        
    if (intersectingObjectsArray.length > 0) {
        if (intersectedObject != intersectingObjectsArray[0].object) {
            console.log(“Intersected!”);
        }      
    }

NOTE: when I use this same code but instead of a Tree I just place a regular Cube on my Sphere object, everything works just fine. The raycaster detects the Cube and fires the Alert.

Upvotes: 2

Views: 167

Answers (1)

M -
M -

Reputation: 28482

My best guess is that since you're nesting the treeFoliage inside treeTrunk, and that inside mesh, you're going to have to use a recursive intersection test.

According to the docs, intersectObjects() accepts a second argument to perform a recursive hit-test. This means it will iterate through all descendants, instead of just doing a shallow check of top-level objects:

rayCaster.intersectObjects(objectsForRayCasterArray, true);

Upvotes: 2

Related Questions