Three.js - Get Object Name With Mouse Click

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 had used to load

Solution 1:

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

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

EventsControls = newEventsControls( 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 = newTHREE.JSONLoader();
jsonLoader.load( "models/Tux.js", addModelToScene ); 


functionaddModelToScene( geometry, materials ) {

   var material = newTHREE.MeshFaceMaterial( materials );
   model = newTHREE.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 );

}

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