Как получить имя объекта группы с Raycaster three.js

Question

Я хочу, чтобы получить имя группы с raycaster но InstEd взять имя я взять имя пустой код у меня есть эта

, что я СВАО сделать это ,, когда мышь находится над группой сетки, я СВАО, чтобы предупредить меня имя GoUp или somethithing, что я знаю, что я попал в специфическую сетку

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

Answer 1

Я думаю, что объяснение WestLangley в его связанном комментарии довольно хорошее, но вот пример, если вам нужна небольшая помощь для основной идеи. Я создал 4 куба, по 2 в каждой группе и добавил их в группы. При наведении курсора мыши на кубики, они будут входить их группу в консоли

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>