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

我使用json loader将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

 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  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

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

  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的路径。