three.js: изображение в панораме рифленое

Question

В настоящее время я знакомлюсь с three.js и создал простую программу просмотра панорам: http://webentwicklung.ulrichbangert.de/threejs-image-on-sphere-inside.html К сожалению, вертикальные края столбов рифленые. При использовании программы просмотра панорам Panorama Studio все в порядке: http://ulrichbangert.de/heimat/Halberstadt/2018-06-10_Halberstadt_Dom_Panorama.html

    var width = window.innerWidth,
        height = window.innerHeight;

    var scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight(0x333333));
    var light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(5, 3, 5);
    scene.add(light);

    var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
    camera.position.z = 1;
    camera.fov = Math.max(100, Math.min(200, camera.fov));
    camera.updateProjectionMatrix();

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);

    var loader = new THREE.TextureLoader();
    loader.load('images/panorama.jpg', function (texture) {
        texture.anisotropy = renderer.getMaxAnisotropy();
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        var sphere = new THREE.Mesh(
            new THREE.SphereGeometry(20, 32, 32),
            material
        );
        sphere.scale.x = -1;
        sphere.rotation.x = -0.5;
        scene.add(sphere);
        var animate = function () {
            requestAnimationFrame(animate);
            sphere.rotation.y += 0.002;
            renderer.render(scene, camera);
        };
        animate();
    });

Что здесь не так?

Answer 1

Попробуйте добавить больше подразделений к вашему SphereGeometry. Прямо сейчас у вас есть 32 lat & long подразделения, которые создают некоторые неприглядные прямолинейные деформации вашей текстуры. Если вы сделаете что-то вроде new THREE.SphereGeometry(20, 100, 100), вы получите лучшую точность при наложении текстур.