Preload imported OBJ and MTL files in Phaser 3.60 for reuse in Three.js Extern

The Three.js examples employ loaders to load files in-scene on the fly, but in Phaser we have a preloader function so that you don’t have to wait for repeated loads every time you restart a Phaser scene with a Three scene in it. (I use tableau here as a distinctive variable name for the Three scene to avoid confusion with the Phaser scene.)

In the preloader.js Phaser scene in preload():

this.load.text('importedobj', 'assets/objects/imported.obj');
this.load.text('importedmtl','assets/objects/imported.mtl');

In the Phaser scene where you are using Three.js as an extern, first three lines at the top of the file and the others in create():

import * as THREE from 'three';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';// [ … ]

tableau = new THREE.Scene();
tableau.add( new THREE.AmbientLight( 0xc0c0c0 ) );

let importedmtl = new MTLLoader().parse( this.cache.text.get('importedmtl') );
let importedobj = new OBJLoader().setMaterials( importedmtl ).parse( this.cache.text.get('importedobj') );
tableau.add( importedobj );

Thanks as always to photonstorm for guiding me on this syntax.

Exit mobile version