Блог

Главная - Вопросы по программированию - Почему мой код из трех js медленно работает в lighthouse и на мобильном телефоне?

Почему мой код из трех js медленно работает в lighthouse и на мобильном телефоне?

#javascript

Вопрос:

Не могли бы вы, пожалуйста, сказать мне, как я могу оптимизировать свой код из ТРЕХ JS? У меня производительность около 60 в LightHouse. Я хочу асинхронно загрузить все 3 модели только в одну сцену и добавить ее в 3 элемента div. Я предполагаю, что это может оптимизировать загрузку и веб-страницу, но, может быть, есть другие способы оптимизировать этот код?

ПОЛНЫЙ КОД: https://jsfiddle.net/nzj2xv3s/

 import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';
// import {FBXLoader} from 'https://cdn.jsdelivr.net/npm/three@0.118.1/examples/jsm/loaders/FBXLoader.js';
// import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';

const container = document.querySelector("#canvas");
const container2 = document.querySelector(".number2");
const container3 = document.querySelector(".number3");



const addObject = (container, modelpath, lightIntensity) => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, container.offsetWidth / container.offsetHeight, 0.1, 1000 );
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true  });
    const light = new THREE.AmbientLight();
    light.intensity = lightIntensity

    renderer.setPixelRatio( container.devicePixelRatio );
    renderer.setSize( container.offsetWidth, container.offsetHeight );
    container.appendChild( renderer.domElement );
    // const controls = new OrbitControls( camera, renderer.domElement );

    scene.add( light );

    const loader = new GLTFLoader();

    loader.load(modelpath, function( gltf ) {
        const model = gltf.scene;

        model.material = new THREE.MeshLambertMaterial({
            color: 0xff0000,
            side: THREE.DoubleSide
        });
        scene.add(model);
        camera.position.z = 5

        function animate() {
            requestAnimationFrame( animate );
            // controls.update();
            // model.rotation.x  = 0.01;
            model.rotation.y  = 0.001;
            renderer.render( scene, camera );
        }
        animate()
    });


}


addObject(container, '3dmodel/scene.gltf', 3);
addObject(container2, 'meat/scene.gltf', 3);
addObject(container3, 'tushenka/scene.gltf', 4);
Метки: