GLTFloader loading 100% but not appearing

Questions
,
1

I’m new to three.js and trying to load a gltf model. The model is loading 100% (from xhr) but it’s not showing up. Even the lighting was set. The model is perfet in gltf-viewer. I’m on Chrome Android and other codes downloaded from github are loading gltfs. Here is my code…

import { OrbitControls } from "https://cdn.skypack.dev/@three-ts/orbit-controls"

import { CSS3DRenderer, CSS3DObject } from 'https://cdn.skypack.dev/three-css3d';

import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js'

// camera...

const camera = new THREE.PerspectiveCamera( 75, innerWidth/innerHeight, 0.01, 1000 );
camera.position.z = 300

const loader = new GLTFLoader();

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

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

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

const light = new THREE.HemisphereLight(0xffffff, 0x000000, 2);
scene.add(light);

loader.load('model.glb',
(gltf) => {
  const model = gltf.scene;
  model.scale.set(10, 10, 10)
  scene.add(model);
  renderer.render(scene, camera);
}, (xhr) => {
  console.log(xhr.loaded/xhr.total *100 +'%')
}, (error) => {
  console.log(error)
} )

function animate() {
  renderer.render(scene, camera);
  controls.update();
} animate();

Where am i missing? Can you guys please help me out :pensive:

2 
import { OrbitControls } from "https://cdn.skypack.dev/@three-ts/orbit-controls"

import { CSS3DRenderer, CSS3DObject } from 'https://cdn.skypack.dev/three-css3d';

import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js'

// camera...

const camera = new THREE.PerspectiveCamera( 75, innerWidth/innerHeight, 0.01, 10000 );
camera.position.z = 300

const loader = new GLTFLoader();

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

const renderer = new THREE.WebGLRenderer()
renderer.setSize(800, 600);
renderer.setPixelRatio(devicePixelRatio);
document.body.appendChild(renderer.domElement);

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

const light = new THREE.HemisphereLight(0xffffff, 0x000000, 2);
scene.add(light);

loader.load('model.glb',
(gltf) => {
 gltf.scene.traverse( function ( child ) {
 if ( child.isMesh ) {
 child.material.wireframe = true;
}
}); 
const model = gltf.scene;
  model.scale.set(1, 1, 1)
  scene.add(model);
}, (xhr) => {
  console.log(xhr.loaded/xhr.total *100 +'%')
}, (error) => {
  console.log(error)
} )

function animate() {
  renderer.render(scene,camera);
  controls.update();
}
animate();
3

It’s not working, the same result again…

4

can you upload full archive for test ?

5

instead of HemisphereLight try first THREE.PointLight(0xffffff,1.1) or/and THREE.AmbientLight(0xffffff,0.5);

camera.position.z= 300 is a lot ? what are dimension of your objet ?

6

You are render the scene just at one frame, you have to render it in each frame !

7

indeed miss :
animId = requestAnimationFrame(animate) in function animate()

function animate() {
animId = requestAnimationFrame(animate)
controls.update();
renderer.render(scene,camera);

}

animId is use if you want to stop anim thank an event with cancelAnimationFrame(animId)