Hello guys,
The three.js editor is a good reference. It supports drag’n’drop and the glTF format. The drag’n’drop event listeners are located here:
document.addEventListener( 'drop', function ( event ) {
event.preventDefault();
if ( event.dataTransfer.types[ 0 ] === 'text/plain' ) return; // Outliner drop
if ( event.dataTransfer.items ) {
// DataTransferItemList supports folders
editor.loader.loadItemList( event.dataTransfer.items );
} else {
editor.loader.loadFiles( event.dataTransfer.files );
}
} );
The Loader class of the editor holds the implementation for the actual loading/parsing process.
case 'glb':
{
reader.addEventListener( 'load', async function ( event ) {
const contents = event.target.result;
const { DRACOLoader } = await import( '../../examples/jsm/loaders/DRACOLoader.js' );
const { GLTFLoader } = await import( '../../examples/jsm/loaders/GLTFLoader.js' );
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '../examples/js/libs/draco/gltf/' );
const loader = new GLTFLoader();
loader.setDRACOLoader( dracoLoader );
loader.parse( contents, '', function ( result ) {
const scene = result.scene;
scene.name = filename;
This file has been truncated. show original
@Gundeep_Singh BTW: Please do not use too many tags for your topics. One-three are sufficient.
ok sir from next time I didn’t use
Sir I have created HTML webpage, how I connect input element with JavaScript in typescript file @Mugen87