three.js - 用鼠标点击获取对象名称

Question

我已经使用json加载器将名称加载到我的场景中的3个外部模型，现在我想通过单击它来获取模型/对象的名称。

下面是我曾使用加载模型

var object_material = new THREE.MeshBasicMaterial({     
        color: 0xd6d6d6,        
        side: THREE.DoubleSide   
       }); 

    var loader = new THREE.JSONLoader(); 
    loader.load("models/"+file, 
        function(geometry, object_material) 
        { 

      var object = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(object_material));    

         model = new THREE.Object3D(); 
         model.id=file; 
         model.name='sample'+file; 
         model.userData.id='sampledata'+file; 
         model.add(object);  
         model.position.set(obj_x,obj_y,obj_z);             

         model.mirroredLoop = true; 
         model.castShadow = true; 
         model.receiveShadow = true;   

         scene.add(model); 

        } 
       ); 

下面是我的鼠标按下功能

function onMouseDown(event) { 

    event.preventDefault(); 

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

    var vector = new THREE.Vector3(mouse.x, mouse.y, 1); 
    projector.unprojectVector(vector, camera); 


     var pLocal = new THREE.Vector3(0, 0, -1); 
     var pWorld = pLocal.applyMatrix4(camera.matrixWorld); 
     var ray = new THREE.Raycaster(pWorld, vector.sub(pWorld).normalize()); 
     // Get meshes from all objects 
     var getMeshes = function(children) { 
      var meshes = []; 
      for (var i = 0; i < children.length; i++) 
      { 
       if (children[i].children.length > 0) { 
        meshes = meshes.concat(getMeshes(children[i].children)); 
       } else if (children[i] instanceof THREE.Mesh) { 
        meshes.push(children[i]); 
       } 
      } 
      return meshes; 
     }; 
     function attributeValues(o) 
     { 
      var out = []; 
      for (var key in o) { 
      if (!o.hasOwnProperty(key)) 
      continue; 
      out.push(o[key]); 
      } 
      return out; 
     } 
     var objects = attributeValues(this.o3dByEntityId); 
     var meshes = getMeshes(objects); 

    var intersects = ray.intersectObjects(meshes);  
    raycaster.set(camera.position, vector.sub(camera.position).normalize()); 
    var intersects = raycaster.intersectObjects(scene.children); 

    console.log(scene); 
    // this console displays all the objects under children - THREE.Object3D - name as name: "sample513.js" 

    if (intersects.length > 0) 
    { 
     // but for the clickedObject - the length is > 0 and name is empty 
     var clickedObject = intersects[0].object; 
     console.log(clickedObject.parent.userData.id); // return as undefined 

     if (INTERSECTED != intersects[ 0 ].object) 
     {        
      INTERSECTED= intersects[ 0 ].object;     
      name = INTERSECTED.name;      
     } 

    } else { 

     console.log('intersects.length is 0'); 

    } 
} 

偶虽然我曾在userData提供的型号名称，我是无法检索它。任何人都可以指导我如何在点击时检索对象的名称

Answer 1

试着通过这个example。查看控制台中的消息。

<script src="js/controls/EventsControls.js"></script> 

EventsControls = new EventsControls(camera, renderer.domElement); 

EventsControls.attachEvent('onclick', function() { 

    console.log('this.focused.name: ' + this.focused.name); 

}); 

//如果使用拖放

EventsControls.attachEvent('dragAndDrop', function() { 

    this.container.style.cursor = 'move'; 
    this.focused.position.y = this.previous.y; 

}); 

EventsControls.attachEvent('mouseOut', function() { 

    this.container.style.cursor = 'auto'; 

}); 

var jsonLoader = new THREE.JSONLoader(); 
jsonLoader.load("models/Tux.js", addModelToScene); 


function addModelToScene(geometry, materials) { 

    var material = new THREE.MeshFaceMaterial(materials); 
    model = new THREE.Mesh(geometry, material); 
    model.scale.set(10, 10, 10); model.name = 'Tux'; 
    model.rotation.x = -Math.PI/2; 
    model.position.set(175, 45, 125); 
    scene.add(model); 
    EventsControls.attach(model); 

} 

Answer 2

clickedObject的父级可能是未定义的。也许你可以通过控制台登录clickedObject并查看你需要访问该id的路径。