Custom GLB Model didn't display on firefox browser

Questions
1

Here’s my html code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0;}
		</style>
		<script type="importmap">
			{
				"imports": {
				"three": "https://unpkg.com/three/build/three.module.js",
				"three/addons/": "https://unpkg.com/three/examples/jsm/"
				}
			}
		</script>
	</head>
	<body>
		<script type="module" src="main.js"></script>
	</body>
</html>

Here’s my main.js file:

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new GLTFLoader();

loader.load('assets/untitled.glb', function (gltf) {
    scene.add(gltf.scene);

    // Only render once after the model is loaded
    renderer.render(scene, camera);
}, undefined, function (error) {
    console.error(error);
});

Please help.

2

Are there any errors in the console? Is the model working Chrome / gltf-model viewer ?

3

UPDATE :Here’s my codepen:https://codepen.io/Khruse/pen/NWEJXPe

I’ve tried to set up a camera and use materials from public URL. still not displaying.

But i tried all of the threejs tutorials (creating a scene, drawing lines, and text) all of them worked and displayed. except when i try to load a glb model.

And I’ve tried to view the web using chrome, and still not displaying.

4

It’s really important to open the JS console and look at errors there. In the codepen you’ll see a 404 “Failed to load resource”, there is no main.js in a Codepen, the script is just loaded automatically.

The other issues going on here are:

  1. The model is very small and the camera is distant. Try a camera position of <0, 0, 2.5>.
  2. No lights in the scene. Try setting a background color or adding scene.add(new THREE.AmbientLight());.
  3. render() is called only once, and not in the loader callback. You can either call render again after adding the model to the scene, or look at three.js examples for how to set up a render loop that renders repeatedly on every frame.

With that you should see something like:

Screenshot 2023-08-04 at 10.15.53 PM

2 Likes
5

Solved. Thank you !