OBJLoader.parse impossible to add in scene

Hello ! I’m just getting started with three js. I would like to render a obj from a string with mtl also as a string. To do so, I used OBJLoader.parse. The issue occurs when I try scene.add(…)

I wonder what I’m missing

const Load3D = (domElement, objString, mtlString) => {

  const scene = new THREE.Scene()
  const element = domElement
  const width = element.offsetWidth
  const height = element.offsetHeight
  const camera = setCamera(width / height)
  const renderer = setRenderer(width, height, scene, camera)
  setControls(camera, renderer)
  setLights(scene)

  window.addEventListener(
    'resize',
    onWindowResize(element, camera, renderer),
    false
    )
  scene.camera = camera
  scene.element = domElement

  // MATERIALLOADER

  var materialloader = new MTLLoader()
  var material = materialloader.parse(mtlString)
  material.preload();

  // OBJLOADER

  var loader = new OBJLoader()
  loader.setMaterials(material)
  var forme = loader.parse(objString)
  fitCameraToObject(scene.camera, forme,scene.lights)

  //ISSUE

  scene.add(forme)
  render(element, renderer, scene, camera)





  // This part is a test and works just fine.

  //var geometry = new THREE.BoxGeometry(50,50,50);
  //var mat = new THREE.MeshBasicMaterial({color : '#A52A2A'});

  //var cubeA= new THREE.Mesh(geometry, mat);
  //cubeA.position.set(100, 100,0);
  //var cubeB = new THREE.Mesh(geometry, mat);
  //cubeB.position.set(-100, -100, 0);
  //var group = new THREE.Group();
  //group.add(cubeA);
  //group.add(cubeB)
  //fitCameraToObject(scene.camera, group, scene.lights)
  //scene.add(group)


}



const setLights = (scene) => {
  const ambient = new THREE.AmbientLight(0xffffff, 0.15)
  const backLight = new THREE.DirectionalLight(0xffffff, 0.3)
  const keyLight = new THREE.DirectionalLight(
    new THREE.Color('#EEEEEE'),
    0.3
  )
  const fillLight = new THREE.DirectionalLight(
    new THREE.Color('#EEEEEE'),
    0.2
  )

  keyLight.position.set(-100, 0, 100)
  fillLight.position.set(100, 0, 100)
  backLight.position.set(100, 0, -100).normalize()

  const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6)
  hemiLight.groundColor.setHSL(0.095, 1, 0.95)
  hemiLight.position.set(0, 100, 0)
  scene.add(hemiLight)

  scene.add(ambient)
  scene.add(keyLight)
  scene.add(fillLight)
  scene.add(backLight)

  scene.lights = { keyLight, fillLight, backLight, ambient }
  return scene
}


const setControls = (camera, renderer) => {
  const controls = new OrbitControls(
    camera,
    renderer.domElement
  )
  controls.enableZoom = true
  camera.controls = controls
  return controls
}

const setRenderer = (width, height) => {
  const renderer = new THREE.WebGLRenderer({antialias: true})
  renderer.setSize(width, height)
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setClearColor(new THREE.Color('#e5e5e5'))
  return renderer
}


const render = (element, renderer, scene, camera) => {
  element.appendChild(renderer.domElement)
  const animate = () => {
    window.requestAnimationFrame(animate)
    renderer.render(scene, camera)
  }
  animate()
  return scene

Can you please try it first without MTLLoader? Meaning does it work if you just do this:

var loader = new OBJLoader();
var object = loader.parse(objString);

fitCameraToObject(scene.camera, object, scene.lights);
scene.add(object);

Besides, please explain in more detail what’s going wrong. E.g. do you see a runtime error in the browser console?

I tried to do so. I have the same error.

I have:
OBJLoader : 1.260986328125 ms

Then I have this error multiple times in the console:

Uncaught TypeError: Cannot read property ‘getUniforms’ of undefined

There was a similar issue lately: Error when using OBJLoader to load OBJ Model

I don’t know the root cause but using the latest version of three.js and the loaders solved the issue. Please ensure that your loaders and the core library are definitely from the same release.