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