Question

我正在将Three.js与gltf加载器一起使用，以将单个.glb资源加载到页面上。它可以在本地运行，尽管随后我将其上载到Netlify，但该模型未加载，并且xhr progressEvent的总数为0。我检查了该模型是否仍在“网络”标签中加载，但仍未在页面中显示。

似乎以前曾发生过此问题，但不确定是否需要更改任何使用环境变量的Netlify时如何解决它。 https://github.com/mrdoob/three.js/issues/15584

HTML


    <div class="model-wrapper">
      <div id="model_target" class="loading"> 
        <div class="myimage fade" id="placeholder">
           <img src="images/placeholder.png" height="328px"/></div>
            </div>
       </div>

    <!-- THREE.js -->
    <script src="https://threejs.org/build/three.js"></script>

    <!-- GLTFLoader.js -->
    <script src="https://cdn.rawgit.com/mrdoob/three.js/r92/examples/js/loaders/GLTFLoader.js"></script>

JS
```


   let camera, scene, renderer;
                    const mouse = new THREE.Vector2();
                    const look = new THREE.Vector2();
                    const windowHalf = new THREE.Vector2( window.innerWidth / 
     2, window.innerHeight / 2 );
                    var plane = new THREE.Plane(new THREE.Vector3(0, 0, 0.4), 
     -9);
                    var raycaster = new THREE.Raycaster();
                    var pointOfIntersection = new THREE.Vector3();
                    let modelLoaded = false;

                    let placement = document.getElementById("model_target")



                    window.addEventListener('DOMContentLoaded', init);


                    function init() {

                        scene = new THREE.Scene();

                        camera = new THREE.PerspectiveCamera( 60, 1, 1, 1000);
                        camera.position.set(5, 3, 28)
                        //camera.position.y = 13;


                        var light = new THREE.DirectionalLight("#fff", 1.5); 
                        var ambient = new THREE.AmbientLight("#FFF");
                        light.position.set( 0, -70, 100 ).normalize();
                        scene.add(light);
                       // scene.add(ambient);

                        var texture = new THREE.Texture();

                        var loader = new THREE.GLTFLoader();

                        THREE.Cache.enabled = true;

                        // Load a glTF resource
                        loader.load(
                            // 3d model resource 
                            './assets/models/mrktechy3.glb',
                            // called when the resource is loaded
                            function ( gltf ) {

                                    mesh = gltf.scene;
                                    mesh.scale.set( 5, 5, 5 );
                                    scene.add( mesh );

                            },
                            // called when loading is in progress
                            function ( xhr ) {

                                    // Loading progress of model
                                    console.log(xhr);
                                    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
                                    if((xhr.loaded / xhr.total * 100) == 100){
                                        modelLoaded = true;

                                        //Loading overlay
                                        var placeholder = document.getElementById("placeholder");
                                        placeholder.classList.add("faded");
                                        placement.classList.remove("loading");
                                    }

                            },
                            // called when loading has errors
                            function ( error ) {

                                    console.log( 'An error happened' );

                            }
                        );


                        //scene.background = new THREE.Color(0xfff); //Set background color 


                        renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true  } );
                        renderer.setSize( 800, 500 );

                        placement.appendChild( renderer.domElement );

                        renderer.setClearColor(0x000000, 0); 
                        renderer.gammaOutput = true;

                        document.addEventListener( 'mousemove', onMouseMove, false );

                        window.addEventListener( 'resize', onResize, false );

                        render()

                    } 

                    function onMouseMove( event ) {

                        if (modelLoaded){
                            mouse.x = ( event.clientX / window.innerWidth ) * 2 - 0;
                        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 0;

                        raycaster.setFromCamera(mouse, camera);
                        raycaster.ray.intersectPlane(plane, pointOfIntersection);
                        mesh.lookAt(pointOfIntersection);
                        }

                    }



                    function onResize( event ) {

                        const width = 800 ;
                        const height = 500;

                        windowHalf.set( width / 2, height / 2 );

                        camera.aspect = width / height;
                        camera.updateProjectionMatrix();
                        renderer.setSize( width, height );     
                    }

                    var easeAmount = 8;

                    function update(){
                        look.x += (mouse.x-look.x)/easeAmount;
                        look.y += (mouse.y-look.y)/easeAmount;
                        raycaster.setFromCamera(look, camera);
                        raycaster.ray.intersectPlane(plane, pointOfIntersection);
                        mesh.lookAt(pointOfIntersection);
                    }



                    function render() {

                        camera.aspect = renderer.domElement.clientWidth / renderer.domElement.clientHeight;
                        camera.updateProjectionMatrix();

                        requestAnimationFrame( render );

                        if (modelLoaded){
                            update();
                        }

                        renderer.render( scene, camera );

                    }                 
  ```

任何glb资源都可以在代码中替换，并且可以在本地工作，但在托管时不能工作。

Answer 1

在IIS设置中，尝试为gltf添加mime类型。像这样：

application/gltf-buffer .gltf

这解决了我的问题。

glb / gltf模型未在Netlify上加载，但在本地加载

1 个答案: