How to import a custom model in threejs?

Question

I've seen many questions about the same problem, but all of the answers I tried don't work for me. I want to import my 3D model in threejs with the code below:

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<!-- <script src="js/3d.js"></script> -->
<script>
    
    /**
 * Base
 */
// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

//Material
const material = new THREE.MeshToonMaterial({ color: '#ffeded'})

/**
 * Object Meshes
 */


const mesh1 = new THREE.Mesh(
    new THREE.TorusGeometry(1, 0.4, 16, 60),
    material
)
const mesh2 = new THREE.Mesh(
    new THREE.ConeGeometry(1, 2, 32),
    material
)
const mesh3 = new THREE.Mesh(
    new THREE.TorusKnotGeometry(0.8, 0.35, 100, 16),
    material
)

scene.add(mesh1,mesh2, mesh3)

function loadGLTF() {
    let gbLoader = new THREE.GLTFLoader();

    gbLoader.load('GB.gltf', (gltf) => {
        // gbMesh.scale.set(0.1, 0.1, 0.1);
        scene.add(gltf.scene);
    });
}



/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

// Position

const objectsDistance = 4

mesh1.position.y = - objectsDistance * 0
mesh2.position.y = - objectsDistance * 1
mesh3.position.y = - objectsDistance * 2


const sectionMeshes = [ mesh1, mesh2, mesh3 ]

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(35, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 100
scene.add(camera)

/**
 * Lights
 */
 const directionalLight = new THREE.DirectionalLight('#ffffff', 1)
 directionalLight.position.set(1, 1, 0)
 scene.add(directionalLight)

 /**
 * Scroll
 */
let scrollY = window.scrollY

window.addEventListener('scroll', () =>
{
    scrollY = window.scrollY
})

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    alpha: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Animate camera
    camera.position.y = - scrollY / sizes.height * objectsDistance

    // Animate meshes
    for(const mesh of sectionMeshes)
    {
        mesh.rotation.x = elapsedTime * 0.1
        mesh.rotation.y = elapsedTime * 0.12
    }

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

</script>

<script>
 AOS.init({
     once: true,
 });
</script>

Everything else works perfectly, but my model won't show up on my screen.

results of the code in my navigator

I'm using a MAMP server to execute my code and I put my .gltf file in the same directory as my js one.

Does anyone have a solution ?

Answer 1

Your loading code is inside the loadGLTF() function... but it looks like you never call the function..

either call the loadGLTF function somewhere, maybe just before calling tick(), or move the loading code outside of the loadGLTF function.