Threejs does not load gltf model on chrome android

Questions
,
1

I am trying to display a simple GLTF 3d model in my website. It works on desktop Mac and windows as well as on iOS in safari and Firefox. But it does not work on Android’s chrome? It works on Desktop chrome as well.

Following is my code sample. It is in ReactJS

import React from "react";
import { useCallback } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

const MyCanvas = ({ source }) => {
  const canvasRef = useCallback((node) => {
    if (node !== null) {
      const scene = new THREE.Scene();
      const gltfLoader = new GLTFLoader();

      gltfLoader.load(
        source,
        (gltf) => {
          console.log("success");
          // gltf.scene.scale.set(0.5, 0.5, 0.5);
          scene.add(gltf.scene);
        },
        () => {
          console.log("progress");
        },
        () => {
          console.log("error");
        }
      );

      const floor = new THREE.Mesh(
        new THREE.PlaneBufferGeometry(10, 10),
        new THREE.MeshStandardMaterial({
          color: "#444444",
          metalness: 0,
          roughness: 0.5,
        })
      );
      floor.receiveShadow = true;
      floor.rotation.x = -Math.PI * 0.5;
      scene.add(floor);

      /**
       * Lights
       */
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
      scene.add(ambientLight);

      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
      directionalLight.castShadow = true;
      directionalLight.shadow.mapSize.set(1024, 1024);
      directionalLight.shadow.camera.far = 15;
      directionalLight.shadow.camera.left = -7;
      directionalLight.shadow.camera.top = 7;
      directionalLight.shadow.camera.right = 7;
      directionalLight.shadow.camera.bottom = -7;
      directionalLight.position.set(5, 5, 5);
      scene.add(directionalLight);

      const sizes = {
        width: window.innerWidth - 20,
        height: 200,
      };

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

      // Controls
      const controls = new OrbitControls(camera, node);
      controls.target.set(0, 0.75, 0);
      controls.enableDamping = true;

      const renderer = new THREE.WebGLRenderer({
        canvas: node,
      });
      renderer.shadowMap.enabled = true;
      renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      renderer.setSize(sizes.width, sizes.height);
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
      // renderer.render(scene, camera);
      const tick = () => {
        // Update controls
        controls.update();

        // Render
        renderer.render(scene, camera);

        // Call tick again on the next frame
        window.requestAnimationFrame(tick);
      };

      tick();
    }
  }, []);

  return <canvas ref={canvasRef} className="webgl"></canvas>;
};

export default MyCanvas;

For full sample you can refer my GitHub repo GitHub - PritishSawant/MyFirstAttemptThreejsDisplay3dmodelsGltf

Here is my website link https://objective-colden-92d01d.netlify.app

I am using Android 10 and the chrome for android version is 91.0.4472.120. I have tried in Android 9 as well but does not work

2

/cc

3

Ok the issue was i was displaying large list of 3d models and the canvas was a child in the list so a list of 10 items were having 10 canvas as child resulting in were large number of WebGL Contexts . To resolve it i followed this Allowing more WebGL contexts