Load 3d Model (.glb) not work on IOS Phone

if use this link work on IOS PHONE

If I Load 3d Model (.glb) not work on IOS Phone and work on Android and PC with win10.

if I use this code for a cube, it work on IOS Phone, Android and PC with win10.

const geometry = new THREE.BoxGeometry(1,1,1)
const material = new THREE.MeshBasicMaterial({
color:'red'
})
const boxMesh = new THREE.Mesh(geometry,material)
scene.add(boxMesh)

Why the link of sketchfab load 3d model and work fine?

the problem is my code?

			import * as THREE from '/three.js-master/build/three.module.js'
			console.log(THREE);			

			import {GLTFLoader} from '/three.js-master/examples/jsm/loaders/GLTFLoader.js'
			console.log(GLTFLoader);

			import {OrbitControls} from '/three.js-master/examples/jsm/controls/OrbitControls.js'
			console.log(OrbitControls);

			const canvas = document.querySelector('.webgl')
			const scene = new THREE.Scene()
			
			const loader = new GLTFLoader()
			
			loader.load('/scene.glb', function(glb){
				console.log(glb)
				const root = glb.scene
				
				const a = 1.5
				root.scale.set(a,a,a)
				scene.add(root)
			}, function(xhr){
				console.log((xhr.loaded/xhr.total * 100) + "% loaded")
			}, function(error){
				console.log('Errore capitato')
			})

			const lightIntensity = 0.9
			const light = new THREE.AmbientLight(0xffffff,lightIntensity)
			const b = 5
			light.position.set(b,b,b)
			scene.add(light)

			//BOX WORK FINE IN IOS PHONE
			/*const geometry = new THREE.BoxGeometry(1,1,1)
			const material = new THREE.MeshBasicMaterial({
				color:'red'
				color:'red'
			})
			const boxMesh = new THREE.Mesh(geometry,material)
			scene.add(boxMesh)*/

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

			const camera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 100)
			camera.position.set(0,1,2)
			scene.add(camera)

			const rendered = new THREE.WebGL1Renderer({
				canvas: canvas
			});
			rendered.setSize( sizes.width, sizes.height)
			rendered.setPixelRatio(Math.min(window.devicePixelRatio,2))
			rendered.shadowMap.enabled = true
			rendered.gammaOutput = true

			const controls = new OrbitControls(camera, rendered.domElement)
			
			controls.target.set( 0, 0.01, 0);

			controls.autoRotate = true;

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

Can You help me?

Did you try with another format / model?

Wild guess - but most likely the asset is just not being delivered at all. If you have a Mac nearby, you can see console on Safari on Mac to see errors thrown in your iPhone’s browser - see here.

1 Like

Latest iOS version support WebGL 2. Do you mind checking if the error goes away if you use WebGLRenderer?

Sketchfab gives two .GLB versions of the file — one with 1K textures, another with 2K textures. Does the version using 1K textures work on iOS for you? Both seem OK on my iPhone 11:

Aside, it would be best to use more than just ambient lighting for a metallic PBR material.