# OBJLoader.parse impossible to add in scene

**URL:** <https://discourse.threejs.org/t/objloader-parse-impossible-to-add-in-scene/26393>\
**Category:** Questions\
**Tags:** loaders, geometry\
**Created:** [May 18, 2021, 3:23pm UTC](https://discourse.threejs.org/t/objloader-parse-impossible-to-add-in-scene/26393 "2021-05-18T15:23:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arnie\_Leduc](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arnie_leduc/32/18079_2.png) [@Arnie\_Leduc](https://discourse.threejs.org/u/Arnie_Leduc)\
**Post date:** [May 18, 2021, 3:23pm UTC](https://discourse.threejs.org/t/objloader-parse-impossible-to-add-in-scene/26393/1 "2021-05-18T15:23:20Z")

</div>

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

```javascript
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

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 19, 2021, 8:24am UTC](https://discourse.threejs.org/t/objloader-parse-impossible-to-add-in-scene/26393/2 "2021-05-19T08:24:29Z")

</div>

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

```javascript
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?

---

<div class="post-metadata">

**Author:** ![Arnie\_Leduc](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arnie_leduc/32/18079_2.png) [@Arnie\_Leduc](https://discourse.threejs.org/u/Arnie_Leduc)\
**Post date:** [May 19, 2021, 10:29am UTC](https://discourse.threejs.org/t/objloader-parse-impossible-to-add-in-scene/26393/3 "2021-05-19T10:29:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 19, 2021, 10:44am UTC](https://discourse.threejs.org/t/objloader-parse-impossible-to-add-in-scene/26393/4 "2021-05-19T10:44:54Z")

</div>

There was a similar issue lately: [Error when using OBJLoader to load OBJ Model](https://discourse.threejs.org/t/error-when-using-objloader-to-load-obj-model/25964)

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.