# Threejs does not load gltf model on chrome android

**URL:** <https://discourse.threejs.org/t/threejs-does-not-load-gltf-model-on-chrome-android/27675>\
**Category:** Questions\
**Tags:** android, gltf\
**Created:** [June 30, 2021, 2:34pm UTC](https://discourse.threejs.org/t/threejs-does-not-load-gltf-model-on-chrome-android/27675 "2021-06-30T14:34:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pritish\_Sawant](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pritish_sawant/32/19250_2.png) [@Pritish\_Sawant](https://discourse.threejs.org/u/Pritish_Sawant)\
**Post date:** [June 30, 2021, 2:34pm UTC](https://discourse.threejs.org/t/threejs-does-not-load-gltf-model-on-chrome-android/27675/1 "2021-06-30T14:34:24Z")

</div>

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`

```javascript
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](https://github.com/PritishSawant/MyFirstAttemptThreejsDisplay3dmodelsGltf)

Here is my website link [https://objective-colden-92d01d.netlify.app](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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 30, 2021, 2:36pm UTC](https://discourse.threejs.org/t/threejs-does-not-load-gltf-model-on-chrome-android/27675/2 "2021-06-30T14:36:27Z")

</div>

/cc

> <https://stackoverflow.com/questions/68195657/threejs-does-not-load-gltf-model-on-chrome-android>

---

<div class="post-metadata">

**Author:** ![Pritish\_Sawant](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pritish_sawant/32/19250_2.png) [@Pritish\_Sawant](https://discourse.threejs.org/u/Pritish_Sawant)\
**Post date:** [July 1, 2021, 4:09am UTC](https://discourse.threejs.org/t/threejs-does-not-load-gltf-model-on-chrome-android/27675/3 "2021-07-01T04:09:46Z")

</div>

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](https://stackoverflow.com/questions/59140439/allowing-more-webgl-contexts)