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
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!