Three.js：纹理未加载到Safari浏览器中

Question

    var OBJLoader2Example = function ( elementToBindTo ) {
                this.renderer = null;
                this.canvas = elementToBindTo;
                this.aspectRatio = 1;
                this.recalcAspectRatio();

                this.scene = null;
                this.cameraDefaults = {
                    posCamera: new THREE.Vector3(-450.0, 240.0, 500.0 ),
                    posCameraTarget: new THREE.Vector3( 50, 0, 50 ),
                    near: 0.1,
                    far: 10000,
                    fov: 12
                };
                this.camera = null;
                this.cameraTarget = this.cameraDefaults.posCameraTarget;

                this.controls = null;
            };

            OBJLoader2Example.prototype = {

                constructor: OBJLoader2Example,

                initGL: function () {
                    this.renderer = new THREE.WebGLRenderer( {
                        canvas: this.canvas,
                        antialias: true,
                        autoClear: true
                    } );
                    this.renderer.setClearColor( 0xafafaf );

                    this.scene = new THREE.Scene();

                    this.camera = new THREE.PerspectiveCamera( this.cameraDefaults.fov, this.aspectRatio, this.cameraDefaults.near, this.cameraDefaults.far );
                    this.resetCamera();


                    // controls

                    this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );

                    this.controls.enableDamping = true; 
                    this.controls.autoRotate = true;
                    // an animation loop is required when either damping or auto-rotation are enabled
                    this.controls.dampingFactor = 0.25;

                    this.controls.screenSpacePanning = false;

                    this.controls.minDistance = 60;
                    this.controls.maxDistance = 80;
                    this.controls.enablePan = false;
                    this.controls.maxPolarAngle = Math.PI / 2;

                    var ambientLight = new THREE.AmbientLight( 0x6c6c6c );
                    var directionalLight1 = new THREE.DirectionalLight( 0xffffff );
                    var directionalLight2 = new THREE.DirectionalLight( 0xffffff );
                    var directionalLight3 = new THREE.DirectionalLight( 0xffffff );


                    directionalLight1.position.set( -100, -50, 100 );
                    directionalLight2.position.set( 100, 50, -100 );
                    directionalLight3.position.set( 100, 50, 100 );


                    this.scene.add( directionalLight1 );
                    this.scene.add( directionalLight2 );
                    this.scene.add( directionalLight3 );
                    this.scene.add( ambientLight );




                },

                initContent: function () {
/*loader code*/
        jQuery("body.variableproduct .woocommerce-product-gallery__wrapper .canvasouter").append("<div id='canvasloader'><div id='canvasloaderinner'></div></div>");
    const loadingManager = new THREE.LoadingManager( () => {

        const loadingScreen = document.getElementById( 'canvasloader' );



        var clname= 'fade-out';
        jQuery(loadingScreen).addClass(clname);


        // optional: remove loader from DOM via event listener
        loadingScreen.addEventListener( 'transitionend', onTransitionEnd );

    } );

    /*loader code over*/                
                    var modelName = 'demo_table';
                    this._reportProgress( { detail: { text: 'Loading: ' + modelName } } );



                    var scope = this;
                    var objLoader = new THREE.OBJLoader2(loadingManager);



                    var callbackOnLoad = function ( event ) { 
                        scope.scene.add( event.detail.loaderRootNode );
                        console.log( 'Loading complete: ' + event.detail.modelName );
                        scope._reportProgress( { detail: { text: '' } } );


                    };
                var onLoadMtl = function ( materials ) {  onLoadMtl.minFilter = THREE.LinearFilter;  


                        objLoader.setMaterials( materials );
                        objLoader.setModelName( modelName );
                        objLoader.setLogging( true, true );

                        objLoader.load( 'https://www.example.com/abc.obj', callbackOnLoad, null, null, null, false );
                    };

                    objLoader.loadMtl( 'https://www.example.com/abc.mtl', null, onLoadMtl );


                },


                _reportProgress: function( event ) {
                    var output = THREE.LoaderSupport.Validator.verifyInput( event.detail.text, '' );
                    console.log( 'Progress: ' + output );

                },

                resizeDisplayGL: function () {
                    this.recalcAspectRatio();
                    this.renderer.setSize( this.canvas.offsetWidth, this.canvas.offsetHeight, false );

                    this.updateCamera();
                },

                recalcAspectRatio: function () {
                    this.aspectRatio = ( this.canvas.offsetHeight === 0 ) ? 1 : this.canvas.offsetWidth / this.canvas.offsetHeight;
                },

                resetCamera: function () {
                    this.camera.position.copy( this.cameraDefaults.posCamera );
                    this.cameraTarget.copy( this.cameraDefaults.posCameraTarget );

                    this.updateCamera();
                },

                updateCamera: function () {
                    this.camera.aspect = this.aspectRatio;
                    this.camera.lookAt( this.cameraTarget );
                    this.camera.updateProjectionMatrix();
                },

                render: function () {
                    if ( ! this.renderer.autoClear ) this.renderer.clear();
                    this.controls.update();
                    this.renderer.render( this.scene, this.camera );
                }

            };

            var app = new OBJLoader2Example( document.getElementById( 'example' ) );

            var resizeWindow = function () {
                app.resizeDisplayGL();
            };

            var render = function () {
                requestAnimationFrame( render );
                app.render();
            };

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


            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {

                requestAnimationFrame( animate );

                controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

                render();

            }

            function render() {

                renderer.render( scene, camera );

            }
/*loader code*/

function onTransitionEnd( event ) {

    const element = event.target;
    element.remove();

}
/*loader code over*/            
            console.log( 'Starting initialization phase...' );
            app.initGL();
            app.resizeDisplayGL();
            app.initContent();

            render();

---

这是我的代码，当我运行此代码时，它将显示chrome / mozila / IE中的所有内容。但特别是在safari浏览器中，此代码不会在我的对象上加载纹理，除了纹理外，所有其他东西均已正确加载。在Safari中，我的对象看起来很黑，没有纹理。

错误： WebGL：INVALID_VALUE：textImage2D：错误的图像数据

WebGL：INVALID_OPERATION：generationMipmap：level0不是2的幂或大小都不相同

那么有没有补丁可以解决此问题？我知道存在“图像尺寸”错误，但在最后阶段更改图像尺寸不是一个好主意。我已经尝试过将图像尺寸更改为2048x1024，但是纹理看起来很拉伸。