Javascript Три. Js Загрузка GLTF очень медленная по сравнению с другими программами просмотра GLTF - PullRequest
Новая
       100

Javascript Три. Js Загрузка GLTF очень медленная по сравнению с другими программами просмотра GLTF

2 голосов
/ 09 июля 2020

Здравствуйте, я пытаюсь реализовать средство просмотра 3D-моделей, используя 3. Js, однако у меня проблема со временем загрузки, и я не знаю, в чем проблема.

В качестве примера Я пытаюсь загрузить эту модель сюда (ссылка для скачивания): https://opensplit.com/gltf/assets/PromoModel.glb

Вы можете протестировать это в этой gltf Viewer здесь, например: https://gltf-viewer.donmccurdy.com/

Он обычно появляется через несколько секунд.

Однако вы можете видеть, как смехотворно долго это занимает на моем веб-сайте: https://opensplit.com/ Та же модель занимает сейчас больше двух минут на загрузку .. это не может быть правильным, почему это так медленно?

Вот мой код: 

<canvas id="canvas"></canvas>   
<br>            
<div style="margin:15px; margin-bottom:0px;">
    <progress id="load_lowPoly" value="0" max="100"></progress>
        
    <div id="lowPoly_progress">Loading Raw Model</div>
</div>
<div id="progressElement" style="background: green; width:0%;"></div>
<div id="previewquali" style="margin:15px; margin-top:0px;">
    Material Quality: loading.. 
</div>
<script src="../gltf/libraries/three.js"></script>
<script src="../gltf/libraries/OrbitControls.js"></script>
<script src="../gltf/libraries/GLTFLoader.js"></script>
<script src="../gltf/libraries/RGBELoader.js"></script>
<script src="../gltf/libraries/DRACOLoader.js"></script>
<script src="../gltf/libraries/EquirectangularToCubeGenerator.js"></script>
<script src="../gltf/libraries/PMREMGenerator.js"></script>
<script src="../gltf/libraries/PMREMCubeUVPacker.js"></script>  

<script>
    window.addEventListener( "resize", this.onWindowResize, false );    
    var manager = new THREE.LoadingManager();   
    var loader = new THREE.TextureLoader()
    var windowHeight = 800; 
    var camera = new THREE.PerspectiveCamera( 47, (window.innerWidth/window.innerHeight) / windowHeight, 0.01, 100000 );
    var renderer = new THREE.WebGLRenderer( { canvas: document.getElementById( "canvas" ), antialias: true, alpha: true } );
    var controls = new THREE.OrbitControls( camera, renderer.domElement );
    var scene = new THREE.Scene();
    var loadAsset = true;
    var percentComplete;
    var gltfSource;
    var envMap;
    var mesh;
    onWindowResize();
    init();
    animate();
    
    function onWindowResize() {
        camera.aspect = (window.innerWidth/1.15) / windowHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth/1.15, windowHeight );
    }

    function init() {   
        camera.position.z = 0;
        camera.position.y = 0;
        camera.position.x = 2000.00;
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth/1.15, windowHeight );
        renderer.physicallyCorrectLights = true;
        renderer.gammaOutput = true;
        renderer.gammaFactor = 2.8;
        renderer.setClearColor( 0xf2f2f2, 1 );
        updateWindow();
        createCubeMap( "../gltf/hdri/machine_shop_02_1k.hdr", 1024 );
        loadDraco6141012( "../gltf/assets/PromoModel.glb" );
    }

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

    function createCubeMap( src, res ) {
        new THREE.RGBELoader().setDataType( THREE.UnsignedByteType ).load( src, function ( texture ) {  
            var cubeGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: res } );
            var pmremGenerator = new THREE.PMREMGenerator( cubeGenerator.renderTarget.texture );
            var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
            envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
            cubeGenerator.update( renderer );
            pmremGenerator.update( renderer );
            pmremCubeUVPacker.update( renderer );
            pmremGenerator.dispose();
            pmremCubeUVPacker.dispose();
        } );
    }
    
    function loadDraco6141012( src ) {
        var loader = new THREE.GLTFLoader();
        loader.setDRACOLoader( new THREE.DRACOLoader() );
        loader.load( src, function( gltf ) {
            gltf.scene.traverse( function ( child ) {
                if ( child.isMesh ) {
                    child.material.envMap = envMap;
                    child.material.envMapIntensity = 0.8;
                    mesh = child;
                }
            } );
            scene.add( gltf.scene );
        }, function ( xhr ) {
            if ( xhr.lengthComputable ) {
                percentComplete = xhr.loaded / xhr.total * 100;
                console.log( "Loading Model - " + Math.round(percentComplete, 2) + "%" );
                document.getElementById("lowPoly_progress").innerHTML = "Loading Raw Model " + Math.round(percentComplete, 2) + "%";
                document.getElementById("load_lowPoly").value = percentComplete;
            }
        } );
    }
                
    function updateWindow() {
        onWindowResize();
    }

</script>

Я думал, что это самый простой способ сделать это . Но, как вы сами видите на моем веб-сайте, загрузка занимает целую вечность. Как я могу исправить эту проблему?

Ответы [ 2 ]

2 голосов
/ 09 июля 2020

Вот мое предположение:

Ваш веб-сайт работает медленно, так как сначала ему нужно загрузить файл glb, что занимает некоторое время.

Вы, вероятно, сравнили его с веб-сайтом Dons, загрузив glb на свой компьютер и перетащите его в программу просмотра. Таким образом, загрузка уже завершена, и все происходит локально на вашем компьютере, поэтому вам не нужно больше ждать ... что, конечно, быстрее.

Как вы могли бы решать подобные проблемы в будущем? Откройте инструменты разработчика в Chrome, go в «Performance» и начните запись. Обновите sh свою веб-страницу. Когда модель станет видимой, остановите запись. Теперь вы можете увидеть небольшой раскрывающийся список (или что-то в этом роде) под названием «Сеть» под визуализированными кадрами в профилировщике. Если вы откроете его, вы увидите, что загрузка файла .glb заняла 1,2 минуты.

0 голосов
/ 09 июля 2020

Вы можете посмотреть код программы просмотра Dons здесь: https://github.com/donmccurdy/three-gltf-viewer

...