android – Why does my three.js looks good on the computer, but the model render order is strangeness on the mobile device?

I new to THREE.js and I use Github uploaded my project, it looks good on my computer. But why? The model render order is strangeness on my cell phone. I guess the problem is z-fighting but i was shrink the model .It is useless . what can i do?

On the computer it looks like:

On the cell phone it looks like:enter image description here

Here is the complete code:

<script type="x-shader/x-vertex" id="vertexshader">

    varying vec2 vUv;

    void main() {

        vUv = uv;

        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

        }

</script>

<script type="x-shader/x-fragment" id="fragmentshader">

    uniform sampler2D baseTexture;
    uniform sampler2D bloomTexture;

    varying vec2 vUv;

    void main() {

        gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( 
bloomTexture, vUv ) );

    }

</script>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
        {
            "imports": {
                "three": "./build/three.module.js"
            }
        }
</script>

<script type="module">
    //import
    import * as THREE from 'three';
    import { OrbitControls } from './jsm/controls/OrbitControls.js';
    import Stats from './jsm/libs/stats.module.js';
    import { GUI } from './jsm/libs/lil-gui.module.min.js';
    import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
    import { RenderPass } from './jsm/postprocessing/RenderPass.js';
    import { UnrealBloomPass } from './jsm/postprocessing/UnrealBloomPass.js';

    // moudle import
    import { FBXLoader } from './Loader/FBXLoader/FBXLoader.js';
    import { OBJLoader } from './Loader/OBJLoader.js';
    import { MTLLoader } from './Loader/MTLLoader.js';
    import { GLTFLoader } from "./Loader/GLTFLoader.js";
    import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';

    const ENTIRE_SCENE = 0, BLOOM_SCENE = 1;

    //set bloomLayer
    const bloomLayer = new THREE.Layers();
    bloomLayer.set(BLOOM_SCENE);

    //set params
    let params = {
        exposure: 1,
        bloomThreshold: 0.41,
        bloomStrength: 0.66,//強度
        bloomRadius: 0.05,
        scene: 'Scene with Glow'
    };

    const darkMaterial = new THREE.MeshBasicMaterial({ color: 'black' });
    const materials = {};

    /*--------renderer--------*/
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    //scene
    const scene = new THREE.Scene();

    /*--------相機--------*/
    const camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 5000);
    camera.position.set(0, 500, 2500);
    camera.lookAt(0, 0, 0);

    // OrbitControls
    let controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set(0, 0, 0);
    controls.enablePan = false;
    controls.maxPolarAngle = Math.PI / 2;
    controls.enableDamping = true;

    // AmbientLight
    scene.add(new THREE.AmbientLight(0xffffff, 1));

    //Render
    const renderScene = new RenderPass(scene, camera);

    // set bloom
    const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
    bloomPass.threshold = params.bloomThreshold;
    bloomPass.strength = params.bloomStrength;
    bloomPass.radius = params.bloomRadius;

    //bloomComposer
    const bloomComposer = new EffectComposer(renderer);
    bloomComposer.renderToScreen = false;
    bloomComposer.addPass(renderScene);
    bloomComposer.addPass(bloomPass);

    //finalPass
    const finalPass = new ShaderPass(
        new THREE.ShaderMaterial({
            uniforms: {
                baseTexture: { value: null },
                bloomTexture: { value: bloomComposer.renderTarget2.texture }
            },
            vertexShader: document.getElementById('vertexshader').textContent,
            fragmentShader: document.getElementById('fragmentshader').textContent,
            defines: {}
        }), 'baseTexture'
    );
    finalPass.needsSwap = true;

    const finalComposer = new EffectComposer(renderer);
    finalComposer.addPass(renderScene);
    finalComposer.addPass(finalPass);

    //燈光
    const light1 = new THREE.PointLight(0xddffdd, 1);
    light1.position.z = 0;
    light1.position.y = 300;
    light1.position.x = 200;
    scene.add(light1);

    //FBX moudle
    let FBX_name = ['group0'];
    let FBX_loader = ['loader0'];
    let FBX_url = [
        './moudle/2022-04-13-FINALTEST.fbx',
    ];

    //FBX moudle

    for (let i = 0; i < FBX_name.length; i++) {
        FBXimport(FBX_name[i], FBX_loader[i], FBX_url[i]);
    }

    function FBXimport(object_name, object_loader, object_url) {
        object_loader = new FBXLoader();
        object_loader.load(object_url, function (object) {
            object_loader = new THREE.AnimationMixer(object);
            object.traverse(function (child) {
                if (child.isMesh) {
                    child.castShadow = true;
                    child.receiveShadow = true;
                }
            });
            object.position.set(0, 0, 0);
            object.name = object_name;
            object.children[0].name = object_name;
            scene.add(object);
            object.scale.set(0.1, 0.1, 0.1);
            object.layers.enable(BLOOM_SCENE);
        });
        const group = scene.getObjectByName(object_name);
    }



    //OBJ moudle
    var objLoader = new OBJLoader();
    var mtlLoader = new MTLLoader();
    var url = "./moudle/2022-04-13-FINALTEST.mtl";
    var OBJMoudels;
    mtlLoader.load(url, function (materials) {
        materials.preload();
        objLoader.setMaterials(materials);
        OBJMoudels = objLoader.load('./moudle/2022-04-13-FINALTEST.obj', function (object) {
            object.traverse(function (node) {
                if (node instanceof THREE.Mesh) {
                    node.castShadow = true; 
                    node.receiveShadow = true; //default
                }
            })
            object.position.set(0, 0, 0);
            object.name = "plane";
            object.children[0].name = "plane";
            scene.add(object);
            object.scale.set(0.1, 0.1, 0.1);
        });
    });

    // raycaster
    const raycaster = new THREE.Raycaster();

    const mouse = new THREE.Vector2();
    setTimeout(window.addEventListener('mousemove', onMouseMove), 1000);

    // onMouseMove
    function onMouseMove(event) {

        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

        raycaster.setFromCamera(mouse, camera);
        let intersects;

        for (let i = 0; i < scene.children[2].children.length; i++) {
            // ENTIRE_SCENE=0
            // BLOOM_SCENE=1
            scene.children[2].children[i].layers.set(ENTIRE_SCENE);
        }

        if (raycaster.intersectObjects(scene.children)[0]) {

            intersects = raycaster.intersectObjects(scene.children);

            const intersects_object_name = intersects[0].object.name;

            if (intersects_object_name != "plane" && intersects_object_name != "Object010") {
                intersects[0].object.layers.enableAll(BLOOM_SCENE);
            }

        }
    }

    //window.onresize
    window.onresize = function () {

        const width = window.innerWidth;
        const height = window.innerHeight;

        camera.aspect = width / height;
        camera.updateProjectionMatrix();

        renderer.setSize(width, height);

        bloomComposer.setSize(width, height);
        finalComposer.setSize(width, height);

        render();

    };

    function disposeMaterial(obj) {

        if (obj.material) {

            obj.material.dispose();

        }

    }

    //render
    function render() {

        switch (params.scene) {

            case 'Scene only':
                renderer.render(scene, camera);
                break;

            case 'Scene with Glow':

            default:
                // render scene with bloom
                renderBloom(true);

                // render the entire scene, then render bloom scene on top
                finalComposer.render();
                break;

        }

    }
    function renderBloom(mask) {

        if (mask === true) {
            renderer.setClearColor(0x000000); // all must be black, including background
            scene.traverse(darkenNonBloomed);
            bloomComposer.render();
            renderer.setClearColor(0xffffff); // set the color you want
            scene.traverse(restoreMaterial);
        } else {
            camera.layers.set(BLOOM_SCENE);
            bloomComposer.render();
            camera.layers.set(ENTIRE_SCENE);
        }
    }

    function darkenNonBloomed(obj) {
        if (obj.isMesh && bloomLayer.test(obj.layers) === false) {
            materials[obj.uuid] = obj.material;
            obj.material = darkMaterial;
        }
    }

    function restoreMaterial(obj) {

        if (materials[obj.uuid]) {

            obj.material = materials[obj.uuid];
            delete materials[obj.uuid];

        }

    }

    function animate() {
        controls.update();
        render();
        requestAnimationFrame(animate);
    };
    animate();

</script>

Here is example if needed https://smile881225.github.io/AskQuestions/

Leave a Comment