First load in Safari doesn't display the .glb

Hi everyone,
I am pretty new to three.js and am stuck at one very weird “bug”. In all the browsers my test has been working perfectly. But when I load the page on Safari with an empty cache, nothing appears. I need do reload the page, so that the file is displayed the way it is supposed do. Of course I cannot expect any user to understand that one needs to reload the page :confused:

Here is my Code:

let container;
let camera;
let controls;
let renderer;
let scene;

function init() {

  container = document.getElementById("scene-container");

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

  createCamera();
  createControls();
  createLights();
  loadModels();
  createRenderer();
  renderer.setAnimationLoop( () => {
update();
render();
onWindowResize();
  } );
}

 manager = new THREE.LoadingManager();

 manager.onLoad = function() {
   const loadingScreen = document.getElementById("loader-wrap");
   loadingScreen.classList.add("fade-out");
 };

function createCamera() {
  camera = new THREE.PerspectiveCamera( 35, container.clientWidth / container.clientHeight, 1, 100 );
  camera.position.set( 0, 0, 10 );
}

function createControls() {
  controls = new THREE.OrbitControls( camera, container );
  controls.enableZoom = false;
  controls.enableRotate = true;
  controls.enablePan = false;
  controls.dampingFactor = 0.5;
  controls.rotateSpeed = 0.5
  // controls.autoRotate  = true;
}


function createLights() {
  const hemisphereLight = new THREE.HemisphereLight( 0xf3f3f3, 0xcccccc, 0.5 );
  const ambientLight = new THREE.AmbientLight( 0xffffff, 1.6 );
  scene.add( ambientLight, hemisphereLight );
  const mainLight = new THREE.PointLight( 0xffffff, 10 );
  camera.add( mainLight );
  scene.add( camera );}


function loadModels() {
  let loader = new THREE.GLTFLoader(manager);
loader.load('assets/global/objects/test.glb', 
  function(gltf){
  gltf.scene.scale.set(2,2,2); // scale here  
    scene.add(gltf.scene);
});
}

function createRenderer() {
  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( container.clientWidth, container.clientHeight );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.gammaFactor = 2.2;
  renderer.physicallyCorrectLights = true;
  container.appendChild( renderer.domElement );
}

// perform any updates to the scene, called once per frame
// avoid heavy computation here
function update() {  
  controls.update();
}

// render, or 'draw a still image', of the scene
function render() {
  if ( gltf.scene ) gltf.scene.rotation.y += 0.01;
  renderer.render( scene, camera );
}

function onWindowResize() {
  camera.aspect = container.clientWidth / container.clientHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( container.clientWidth, container.clientHeight );
}

window.addEventListener( 'resize', onWindowResize );

// call the init function to set everything up
init();

});

In the Inspector tool I get the following Error Messages:

SyntaxError: JSON Parse error: Unexpected EOF
TypeError: undefined is not an object (evaluating ‘c.length’)
TypeError: undefined is not an object (evaluating ‘d.length’)

The testpage I am working on can be found here:
testpage

I am greatful for any tip!

That’s indeed strange. For some reasons, the initial request to your glTF asset returns null. The runtime error is the result of passing null to GLTFLoader.parse().

When importing the 3D model into the three.js editor, it works even on first try though.

Can you please try it with a different glTF asset from the repository? For instance this one? Does the same error occur?

BTW: 19MB quite big for such a model. Consider to DRACO compress your model via glTF-pipeline. Doing so will reduce the size to approx 3.3 MB. I’ve attached the converted file for testing purposes.

testDraco.glb (3.3 MB) .

Thanks @Mugen87. :slight_smile:
Yes so it seems the 3D model itself had a problem.

Anyway thank you for your quick reply and I will look into the DRACO compressor.