MTLLoader: Cannot read property ‘elements’ of undefined

Uncaught TypeError: Cannot read property ‘elements’ of undefined

at Matrix3.copy (three.module.js?0371:3277)
at refreshUniformsCommon (three.module.js?0371:23180)
at setProgram (three.module.js?0371:22963)
at WebGLRenderer.renderBufferDirect (three.module.js?0371:21822)
at renderObject (three.module.js?0371:22575)
at renderObjects (three.module.js?0371:22548)
at WebGLRenderer.render (three.module.js?0371:22312)
at Object3D.draw (Object3D.js?2363:160)`

I have a 3D model (.obj) using three from npm. This is an ES6 project using Webpack.

I am using these dependencies:

import * as THREE from 'three';
import OBJLoader from 'three-obj-loader';
import MTLLoader from 'three-mtl-loader';
import OrbitControls from 'three-orbitcontrols';

The model is resolved and loaded. Texture files are resolved and loaded – the .mtl and the single .png

If I call:

mtlLoader.load(materialUrl, ( materials ) => {
    materials.preload();
			
    objLoader.setMaterials( materials );

The app crashes on the error listed above. On objLoader.setMaterials.

If I comment that out the App works.

Three.js version
  • Dev
  • r88
  • npm latest
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • [] All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

NVIDIA GTX 970 in Sli. Asus motherboard. Output over HDMI 2.0. Doesn’t seem to be related to either hardware, or OS.

Author: Fantashit

2 thoughts on “MTLLoader: Cannot read property ‘elements’ of undefined

  1. Hi @maurocolella , I figured out my problem and it might work for you.

    This warning message “Uncaught TypeError: Cannot read property ‘elements’ of undefined” is produced because of the “three-mtl-loader” from npm uses a old THREE version and its TextureLoader won’t add matrix parameter after loading.

    The solution is ask the maintainer of this package update it’s package.json. Temporary solution is enter node_modules/.1.0.2@three-mtl-loader and run npm install three@latest --save to update it.

Comments are closed.