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

Question

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

` // +++++++++++++++++++++ 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);
}}`

Is [this](http://stackoverflow.com/questions/26202064/how-to-select-a-root-object3d-using-raycaster/26205768#26205768) what you mean? — WestLangley, Feb 16 '17 at 21:48
thnx bro . can you make a small example i am comfuse with that parent object — George C., Feb 16 '17 at 22:07

score 4 · Accepted Answer · answered Feb 17 '17 at 08:07

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>

Hello from the future, I just come back to say thank you. – George C. Apr 06 '19 at 22:41 — George C., Apr 06 '19 at 22:41

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

1 Answers1