如何使用 Raycaster Three.js 获取组对象的名称

Question

我想用 raycaster 获取组的名称，但我决定取这个名字，我把这个名字取空，我的代码是这个

我需要做的是，当鼠标在组网格上时，我需要提醒我组的名称或我知道我击中特定网格的东西

` // +++++++++++++++++++++++ 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>