Gltf loaded, but not showing

Questions
,
1

hi guys, i am new to three js and 3d modeling in general so sorry in advance if this is just a stupid mistake
this is my js code:

ipad.glb (132 Bytes)

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import * as dat from 'dat.gui'

// loader for blender assets
const loader = new GLTFLoader()

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

// main camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000000000)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 1
scene.add(camera)

// oint light
const pointLight = new THREE.PointLight(0xffffff, 0.1)

pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4

scene.add(pointLight)

// main renderer
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#hero'),
  alpha:true
});

// ipad load function
loader.load( 'assets/blender/ipad.gltf', function(gltf){

  gltf.scene.scale.set(300, 300, 300)
	scene.add( gltf.scene );

	});


renderer.setPixelRatio(window.devicePixelRatio);;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(30);

renderer.render(scene, camera)

the file renders just fine on https://gltf-viewer.donmccurdy.com/
I have tried creating a simle shape to make sure my scene and cameras work, and it did, i get no errors in the console, which means everything is loaded,

I would appreciate any help thanks

2

Isaac,

You are likely looking inside of the glTF, so try moving your camera back or reducing it’s scale to you see it then adjust accordingly.

Mark

3

Hi!

You call it once and, when you call it, your model is not loaded yet, as loading is asynchronous.
I would use an animation loop in this case, so instead of that line use this:

renderer.setAnimationLoop( () => {
    renderer.render(scene, camera);
})

Also, your point light is not that bright (0.1). Try to set DirectionalLight (brightness 1) with AmbientLight (brightness 0.5) first, and then, when you see that it works and you can see your model, play with other type of light sources.

4

The file you uploaded doesn’t even render on gltf viewer. It’s empty. Are you sure it’s the correct file?