Import 3D .glp model now showing up

Questions
,
1

Hi there, I’m new to Three.js and recently tried following a tutorial on importing a custom 3D model from Blender. Unfortunately, I encountered an issue where my model wouldn’t appear in the scene. I first checked if the GLB file was corrupted, but it seemed fine. I also attempted to rescale the model, but it still didn’t show up. According to the tutorial, a copy of the model should have been placed in the ‘dist’ folder, but I couldn’t find it there. Any suggestions on how to troubleshoot this further would be appreciated!

Here is the code:

import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';

const renderer = new THREE.WebGLRenderer();

renderer.shadowMap.enabled = true;

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

const orbit = new OrbitControls(camera, renderer.domElement);

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

camera.position.set(0,2,5);
orbit.update();

// const boxGeometry = new THREE.BoxGeometry();
// const boxMaterial = new THREE.MeshBasicMaterial({color: 0x00FF00});
// const box = new THREE.Mesh(boxGeometry, boxMaterial);
// scene.add(box);

// Add ambient light to the scene
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Color, Intensity
scene.add(ambientLight);

// Add directional light to the scene
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // Color, Intensity
directionalLight.position.set(5, 10, 5); // Set light position
directionalLight.castShadow = true; // Enable shadow casting
scene.add(directionalLight);

// Optional: Add helper to visualize the directional light
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight);
scene.add(directionalLightHelper);

const loader = new GLTFLoader();

loader.load( '../assets/monkey.glb', function ( gltf ) {

    const model = gltf.scene;
   
	scene.add( model );

}, undefined, function ( error ) {

	console.error( error );

} );


function animate(){
    renderer.render(scene, camera);//allows for orbit control to be shown 
}
renderer.setAnimationLoop(animate);

Here is the screen shot of the folder I was talking about:

image
image1103×560 36.7 KB

2

Helloy have you added a cube or sphere to the scene to confirm, you can see anything where your camera is looking?

Alternatively: try adding another glb instead of the monkey.glb. Use a file from external source that is known to work. :slightly_smiling_face::+1:

3

The location of the model depends on how your application is being compiled and hosted, which we don’t know – perhaps you can share a link to the full code, or the tutorial, or both? Are you using a bundler like Vite or Webpack, and if so which one?

Do any errors appear in the JavaScript console? Does the GLB appear correctly in online viewers?

4

Yeah, I have added other shapes and the only issue came up when I tried importing a custom model. I tried another version of a 3D model and it did not work. But thank you for the tip!

5

Here is the link to the tutorial

I did not use any blunder but I can try to use Vite or Webpack to see if it will fix the issue.

There was no error message in the JS console. When I ran the program the other 3D objects, such as the box and sphere, showed up except for the custom model.