three.jsgroupname

How to get the name of the group object with Raycaster Three.js


I want to get the name of the group with raycaster but insted to take the name i take the name empty the code i have is this

what i nead to do is,, when the mouse is over the group mesh, i nead to alert me the name of the goup or somethithing that i know that i hit the specific mesh

enter image description here

` // +++++++++++++++++++++ RAY CASTER +++++++++++++++++++++

// creating group and add all the pieses
group = new THREE.Object3D(); //create an empty container
group.add(obj_body); //add a mesh with geometry to it
group.name = 'myGroupName';
scene.add(group);

ray_objects.push(group);


var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

window.addEventListener( 'mousemove', onMouseMove, false );
window.addEventListener( 'onDocumentMouseDown', onMouseMove, false );


function onMouseMove( event ) {

// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components

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

// console.log(mouse.x);
$("#x_pos").html(mouse.x);
$("#y_pos").html(mouse.y);


// update the picking ray with the camera and mouse position
raycaster.setFromCamera( mouse, camera );

// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects( ray_objects, true );

for ( var i = 0; i < intersects.length; i++ ) {



if (intersects.length > 0) {
    var firstIntersectedObject  = intersects[0];

    // alert(firstIntersectedObject);
    console.log(firstIntersectedObject);
    intersects[ 0 ].object.material.color.set( 0x00ff00  );
    // this will give you the first intersected Object if there aremultiple.

    renderer.render( selected_scene, camera );
}

// alert(intersects);
}}` 

Solution

  • I think WestLangley's explanation in his linked comment is pretty good but here is an example if you need a bit of help for the basic idea. I created 4 cubes, 2 in each group and added them to the groups. When you mouse over the cubes, they will log their group to the console

    http://codepen.io/anon/pen/NdmZZo

    var width = window.innerWidth;
    var height = window.innerHeight;
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
    
    var scene = new THREE.Scene();
    
    var group1 = new THREE.Object3D();
    var cubeGeometry = new THREE.CubeGeometry(50, 50, 50);
    
    var cube1 = new THREE.Mesh(cubeGeometry);
    cube1.position.set(0, 50, 50);
    var cube2 = new THREE.Mesh(cubeGeometry);
    cube2.position.set(0, 150, 50);
    
    cube1.userData.parent = group1;
    cube2.userData.parent = group1;
    group1.add(cube1);
    group1.add(cube2);
    group1.name = "Group 1";
    
    var group2 = new THREE.Object3D();
    var cube3 = new THREE.Mesh(cubeGeometry);
    cube3.position.set(300, 50, 50);
    var cube4 = new THREE.Mesh(cubeGeometry);
    cube4.position.set(300, 150, 50);
    
    cube3.userData.parent = group2;
    cube4.userData.parent = group2;
    group2.add(cube3);
    group2.add(cube4);
    group2.name = "Group 2";
    
    scene.add(group1);
    scene.add(group2);
    
    var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
    camera.position.z = 500;
    
    
    render();
    animate();
    
    
    function animate() {
      requestAnimationFrame( animate );
    
    }
    
    function render() {
      renderer.render( scene, camera );
    }
    
    
    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();
    
    
    
    function onMouseMove( event ) {
      // calculate mouse position in normalized device coordinates
      // (-1 to +1) for both components
      mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
      mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    
      // update the picking ray with the camera and mouse position
      raycaster.setFromCamera( mouse, camera );
    
      // calculate objects intersecting the picking ray
      var intersects = raycaster.intersectObjects( scene.children, true );
      if(intersects && intersects[0]) {
        console.log('GROUP IS ' + intersects[0].object.userData.parent.name)
      }
    }
    
    document.addEventListener('mousemove', onMouseMove)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>