Yesterday I posted a question on StackOverflow about an issue with my code (Uncaught TypeError: THREE.MTLLoader is not a constructor 2.0). Initially, I thought I had solved the problem but now new questions have surfaced:
Even though I have installed 'three-mtl-loader' using npm, the object doesn't seem to be visible, despite being able to confirm its existence through console.log.
Now, I am encountering the following error, which might be the reason for the object's invisibility:
THREE.MeshPhongMaterial: .shading has been removed. Use the boolean .flatShading instead.
get @ three.js:43339
WebGLPrograms.getParameters @ three.js:17838
initMaterial @ three.js:21734
setProgram @ three.js:21929
WebGLRenderer.renderBufferDirect @ three.js:20964
renderObject @ three.js:21722
renderObjects @ three.js:21695
WebGLRenderer.render @ three.js:21463
render @ main.ts:163
requestAnimationFrame (async)
render @ main.ts:162
requestAnimationFrame (async)
render @ main.ts:162
requestAnimationFrame (async)
...
The current state of my code is as follows:
import * as THREE from 'three'
import * as OBJLoader from 'three-obj-loader'
OBJLoader(THREE)
import * as MTLLoader from 'three-mtl-loader'
//create global variables so models can be accessed outside loader functions
var model1, model2;
var mtlLoader = new MTLLoader();
mtlLoader.setPath('http://blabla/objects/');
mtlLoader.load('bla.obj.mtl', function(materials){
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('http://blabla/objects/');
objLoader.load('bla.obj', function(object){
var object1 = object.clone();
model1 = object;
model2 = object1;
scene.add(model1);
scene.add(model2)
});
});
I'm unsure if this is similar to another issue discussed here: https://github.com/sohamkamani/three-object-loader/issues/9. For instance, when trying the code snippet:
let child;
for(let i = 0; i < object.children.length; i++) {
child = object.children[i];
scene.add(new THREE.Mesh(child.geometry, new THREE.MeshPhongMaterial({ })));
}
A white mesh is inserted, but incorporating the mtl-file color like they do in the example seems time-consuming for each mesh individually due to cloning the model for two separate instances. Can object.traverse possibly aid without manual loader modifications?
Any assistance is greatly appreciated :D
EDIT After attempting various solutions unsuccessfully, summarizing the issues below may provide insight into what's missing or misconfigured:
The method mentioned previously isn't solving the problem as delineated in comments. Steps were taken to update to the latest version of three resulting in a persisting error flagged only as a warning, while objects remain unseen. Adjusting to flatshading within the OBJloader resolves the warnings yet visibility remains elusive - sans alterations to file configurations.
THREE.MeshPhongMaterial: .shading has been removed. Use the boolean .flatShading instead set @ three.js:43344 parse @ index.js:628 (anonymous) @ index.js:58 (anonymous) @ three.js:30483 XMLHttpRequest.send (async) load @ three.js:30563 load @ index.js:56 (anonymous) @ main.ts:117 (anonymous) @ index.js:36 (anonymous) @ three.js:30090 XMLHttpRequest.send (async) load @ three.js:30146 load @ index.js:34 s @ _prelude.js:1 e @ _prelude.js:1 (anonymous) @ _prelude.js:1Utilizing solely the three-obj-loader functions correctly as demonstrated in this post: Uncaught TypeError: THREE.MTLLoader is not a constructor
Duplicating both the OBJLoader and MTLLoader scripts (https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/OBJLoader.js and https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/MTLLoader.js) into the three/src/loaders directory alongside including these exports in three.js:
export { MTLLoader} from './loaders/MTLLoader.js' export { OBJoader} from './loaders/OBJLoader.js'
Subsequently loading them as depicted below:
import {MTLLoader} from 'three'
import {OBJLoader} from 'three'
Results in a
Uncaught TypeError: THREE.MTLLoader is not a constructorconsole.log(MTLLoader) and console.log(OBJLoader) return undefined statuses. Perhaps, they're incorrectly integrated within the framework since web-based reference scenarios are abundant (<script src="js/loaders/OBJLoader.js"></script>Faced with similar hurdles while implementing OBJLoader2.
- As a last resort, experimentations encompassed integrating the Three examples’ obj and mtl loaders by referencing them directly within three.js:
leading to analogous 'not a constructor' setback`export { OBJLoader } from '../examples/js/loaders/OBJLoader.js'