Le Raycaster ne détecte pas les Cubes

Question

Comment combiner un carré et un rectangle en un seul objet qu'un Raycaster peut détecter avec succès ?

J'ai créé un objet "arbre" personnalisé en créant un "tronc", qui n'est qu'un long rectangle, puis en collant un objet carré sur ce tronc. J'ai ensuite "planté" cet arbre au sommet d'une sphère, et j'essaie de faire en sorte que mon objet "Arbre" ne soit pas endommagé. raycaster pour le détecter. Ça ne marche pas.

Voici mon 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!”);
        }      
    }

REMARQUE : lorsque j'utilise ce même code mais qu'au lieu d'un Tree Je place juste un Cube sur mon Sphere tout fonctionne très bien. Le site raycaster détecte le Cube et tire le Alert .

Answer 1

Je pense que puisque vous imbriquez le treeFoliage à l'intérieur de treeTrunk et qu'à l'intérieur mesh vous allez devoir utiliser un test d'intersection récursif.

Selon les documents, intersectObjects() accepte un second argument pour effectuer un hit-test récursif. Cela signifie qu'il va itérer à travers tous les descendants, au lieu de faire une vérification superficielle des objets de niveau supérieur :

rayCaster.intersectObjects(objectsForRayCasterArray, true);