Hello, I’m trying to use the object loader to render an obj in blob format. I checked in the documentation that the correct option would be to use loader.parse(), however, the scene is rendered but the mesh is not rendered. If I consult the result of the asynchronous function, it is possible to verify that the model was indeed loaded.
my Main.js
import { initialize } from "./objLoader";
const canvas = document.getElementById('canvas')
fetch('/models/model.obj')
.then(res =>
initialize(canvas, res)
.then(e => console.log(e))
)
my async function:
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
let camera;
export async function initialize(canvas, objBlob) {
const objLoader = new OBJLoader()
const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true})
const scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(
20,
canvas.clientWidth / canvas.clientHeight,
0.1,
1000
);
const controls = new OrbitControls(camera, renderer.domElement)
objLoader.parse(
"",
await objBlob.text(),
(object) => {
scene.add(object)
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
},
(error) => {
console.log(error)
}
)
function animate() {
requestAnimationFrame(animate)
controls.update()
renderer.render(scene, camera)
}
animate()
return scene;
}
The result:
