three.js: изображение в средстве просмотра панорам рябит

В настоящее время я знакомлюсь с 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();
    });

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


person Sempervivum    schedule 01.11.2018    source источник


Ответы (1)


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

введите здесь описание изображения

person Marquizzo    schedule 01.11.2018
comment
Отлично, это сработало, теперь края прямые! Большое спасибо за этот совет! - person Sempervivum; 02.11.2018