Three.js 360 Panoviewer - 低图像质量/像素化纹理

Question

我在使用 Three.js 的 360 panoviewer 上遇到了质量较低的纹理问题，我一直在使用此代码，据我所知，我的设置是相同的。

但即使使用相同的图像，我的版本的质量也要低得多？

我的看起来有点变形，但所有三人组的几何形状看起来都一样。

原版 -

我的副本 -

这是我复制的原始版本 - https://codepen.io/msummers40/pen/ALboOA

这是我的代码：

var camera, scene, renderer;

            var dataContainer = document.getElementById('data-container');
            var imageFile = dataContainer.getAttribute('data');

            var isUserInteracting = false,
            onMouseDownMouseX = 0, onMouseDownMouseY = 0,
            lon = 0, onMouseDownLon = 0,
            lat = 0, onMouseDownLat = 0,
            phi = 0, theta = 0;

            init();
            animate();

            function init() {
                var eWidth = window.innerWidth; // * 0.8;
                var eHeight = window.innerHeight; // * 0.8;

                var container, mesh;
                container = document.getElementById( 'gallery-modal' );

                camera = new THREE.PerspectiveCamera( 75, eWidth / eHeight, 1, 1100 );
                camera.target = new THREE.Vector3( 0, 0, 0 );

                scene = new THREE.Scene();

                var geometry = new THREE.SphereGeometry( 500, 60, 40 );
                // invers the geometry on the x-axis so that all of the faces point inwards
                geometry.scale( - 1, 1, 1 );

                var material = new THREE.MeshBasicMaterial( {
                    map: new THREE.TextureLoader().load(  imageFile )
                } );

                // find out what this done - recommended by thrax
                material.map.minFilter = THREE.LinearFilter;


                mesh = new THREE.Mesh( geometry, material );

                scene.add( mesh );
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( eWidth, eHeight );
                // renderer.setSize( '800', '400' );


                container.appendChild( renderer.domElement );

                // Controls to move the image
                document.addEventListener( 'mousedown', onDocumentMouseDown, false );
                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'mouseup', onDocumentMouseUp, false );
                document.addEventListener( 'wheel', onDocumentMouseWheel, false );

                document.addEventListener( 'dragover', function ( event ) {

                    event.preventDefault();
                    event.dataTransfer.dropEffect = 'copy';

                }, false );

                document.addEventListener( 'dragenter', function ( event ) {

                    document.body.style.opacity = 0.5;

                }, false );

                document.addEventListener( 'dragleave', function ( event ) {

                    document.body.style.opacity = 1;

                }, false );

                // Gallery parent container
                var galleryDOM = document.getElementById('gallery');

                // Modal
                var modal = document.getElementById('gallery-modal');

                    // Click on individual gallery items
                    galleryDOM.addEventListener('click', function(e) {

                        // if click is on IMG
                        if(e.target.localName == 'div' && e.target.getAttribute('data-image')) {
                            // Show Modal
                            modal.style.display = "block";

                            // Define new image
                            var newestImage = e.target.getAttribute('data-image');

                            // Apply newestImage to material object in THREEjs
                            if(newestImage) {
                                material.map = new THREE.TextureLoader().load(newestImage);
                            }
                        }
                    });

                    // Closes out of modal by clicking outside
                    window.onclick = function(event) {
                        if (event.target == modal) {
                            modal.style.display = 'none';
                        }
                    }

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

            }

            function onWindowResize() {

                var eWidth = window.innerWidth; //* 0.8;
                var eHeight = window.innerHeight; //* 0.8;

                camera.aspect = eWidth / eHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( eWidth, eHeight );

            }

            function onDocumentMouseDown( event ) {

                event.preventDefault();

                isUserInteracting = true;

                onPointerDownPointerX = event.clientX;
                onPointerDownPointerY = event.clientY;

                onPointerDownLon = lon;
                onPointerDownLat = lat;

            }

            function onDocumentMouseMove( event ) {

                if ( isUserInteracting === true ) {

                    lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
                    lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

                }

            }

            function onDocumentMouseUp( event ) {

                isUserInteracting = false;

            }

            function onDocumentMouseWheel( event ) {

                camera.fov += event.deltaY * 0.05;
                camera.updateProjectionMatrix();

            }

            function animate() {

                requestAnimationFrame( animate );
                update();

            }

            function update() {

                if ( isUserInteracting === false ) {

                    lon += 0.1;

                }

                lat = Math.max( - 85, Math.min( 85, lat ) );
                phi = THREE.Math.degToRad( 90 - lat );
                theta = THREE.Math.degToRad( lon );

                camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
                camera.target.y = 500 * Math.cos( phi );
                camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

                camera.lookAt( camera.target );

                /*
                // distortion
                camera.position.copy( camera.target ).negate();
                */

                renderer.render( scene, camera );

            }

Answer 1

所以事实证明它根本不在这段代码中。我也在使用 WP 和

我有一个函数可以调整任何超过 1060 的图像的大小

这在 Three.js 之前就已经弄乱了图像。