Well I've made some progress since the last question a couple of days ago, but am still quite new at Javascript and Three.js, and am running into this new issue.

I'm attempting to pass some three.js geometry loaded from an OBJ file as the detail associated with a custom event, so that I can process it further. It makes sense to do it this way as the OBJLoader is running asynchronously:

function loadObjAsMesh( obj ) {  // Obj Resource URL: Example: 'assets/monster.obj'

    var geometry;
    var mesh;

    loader = new THREE.OBJLoader();
            
    console.log('About to call loader.load');       
            
    loader.load(
        obj , function ( object ) { 
        
            console.log('Starting to run loader.load CALLBACK');
            
            geometry = new THREE.Geometry().fromBufferGeometry( object.children["0"].geometry );
                        
            mesh = new THREE.Mesh ( geometry, sceneEntities.materials.bluePhongSolid ); 
            
            console.log( mesh );
            
            scene.add( mesh ); 
            
            console.log ( 'About to dispatch the Finished Loading Event' );
            
            dispatchEvent( sceneSyntheticEvents.objectFinishedLoading, { 
                detail : { 
                    passedMesh : mesh 
                        }
                    }                   
                );
            
            console.log ( 'Just Dispatched the Finished Loading Event' );
            console.log ( sceneSyntheticEvents.objectFinishedLoading );
            
            console.log('Done running loader.load CALLBACK');       
        
            }   );
    
    console.log('Done calling loader.load');
}

Well I've made some progress since the last question a couple of days ago, but am still quite new at Javascript and Three.js, and am running into this new issue.

I'm attempting to pass some three.js geometry loaded from an OBJ file as the detail associated with a custom event, so that I can process it further. It makes sense to do it this way as the OBJLoader is running asynchronously:

function loadObjAsMesh( obj ) {  // Obj Resource URL: Example: 'assets/monster.obj'

    var geometry;
    var mesh;

    loader = new THREE.OBJLoader();
            
    console.log('About to call loader.load');       
            
    loader.load(
        obj , function ( object ) { 
        
            console.log('Starting to run loader.load CALLBACK');
            
            geometry = new THREE.Geometry().fromBufferGeometry( object.children["0"].geometry );
                        
            mesh = new THREE.Mesh ( geometry, sceneEntities.materials.bluePhongSolid ); 
            
            console.log( mesh );
            
            scene.add( mesh ); 
            
            console.log ( 'About to dispatch the Finished Loading Event' );
            
            dispatchEvent( sceneSyntheticEvents.objectFinishedLoading, { 
                detail : { 
                    passedMesh : mesh 
                        }
                    }                   
                );
            
            console.log ( 'Just Dispatched the Finished Loading Event' );
            console.log ( sceneSyntheticEvents.objectFinishedLoading );
            
            console.log('Done running loader.load CALLBACK');       
        
            }   );
    
    console.log('Done calling loader.load');
}

Then, here's the eventlistener:

function events() {
    
    sceneSyntheticEvents.objectFinishedLoading = new CustomEvent('objectFinishedLoading');
    
    console.log ( 'About to catch the Finshed Loading Event' );
    
    addEventListener('objectFinishedLoading', function (e) { console.log ( e.detail.passedMesh ); }, false);
    
    console.log ( 'Just Caught the Finished Loading Event' );
}

The event is successfully firing and getting 'heard' by the listener. The problem is that the event.detail is null. I've tried formatting the detail several different ways - no dice so I'm pretty sure it's not an issue with syntax or conventions.

I've got a boatload of instrumentation in the app as you can see, and what that clearly shows is that the issue is happening as soon as the event fires. It's not that the listener is not getting the e.detail. Somehow the detail is not being included in the event at all at the instant it fires.

I even tried testing with an integer a few different ways, thinking that the problem was the mesh. I tried this for instance:

            dispatchEvent( sceneSyntheticEvents.objectFinishedLoading, { 
                detail : { 
                    passedMesh : "32" 
                        }
                    }

and...

            dispatchEvent( sceneSyntheticEvents.objectFinishedLoading, { 
                detail :  "32" 
                    }

Even with that, the console reports:

CustomEvent {isTrusted: false, detail: null, type: "objectFinishedLoading", target: Window, currentTarget: Window…}

detail: null? "detail" in quotes, not in quotes, no diff.

I'm clearly in over my head on this one. Any ideas?

• javascript
• event-handling
• dom-events

1 Answer 1

The dispatchEvent method takes a single parameter, the event object.

You need to pass the detail object to the event constructor. In your case you are passing the event options as a second argument to dispatchEvent which won't have any impact.

addEventListener('my-custom-event', function(e) {
  console.log('event handler', e.type);
  console.log(e.detail)
}, false);

var event = new CustomEvent('my-custom-event', {
  detail: {
    key: 'detail-value'
  }
})
dispatchEvent(event);