Struggling to make a model from an .obj file load and be visible in Three.js. New to this, so seeking help!
Here is my code so far:
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x000000);
const mountNode = document.querySelector("#canvas");
mountNode.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
50,
window.innerWidth / window.innerHeight,
0.1,
10000
);
camera.position.z = -10000;
// loader instance
const loader = new THREE.OBJLoader2();
const callbackOnLoad = function(event) {
console.log("event", event);
scene.add(event.detail.loaderRootNode);
};
loader.load(
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/373299/flower.obj",
callbackOnLoad,
null,
function(error) {
console.log("An error happened", error);
},
null,
false
);
However, all I see is a black screen. Any ideas on what might be causing this issue?
I suspect it could be related to the model's material or camera position. Any feedback would be greatly appreciated!
Codepen link: https://codepen.io/jmsherry/pen/XQLXmm?editors=0010
Thank you for your assistance!