three.js - get object name with mouse click

Question

I had loaded 3 external model with the name into my scene using json loader and now i want to get the name of the model/object by clicking it.

Below is the that i ha

Answer 1

Try to make through this example. Look at messages in the console.

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

});

// if use drag and drop

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

The parent of the clickedObject is probably undefined. Perhaps you can console log the clickedObject and see which path you need to access the id.