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