Bent lines in panoramic viewer

Questions
1

Hi there,
I’ve created a simple panoramic viewer. Unfortunately the lines near the edges of the browser window are bent. I’ve tried both, the perspective and the orthographic camera but the issue is the same.
When using the panoramic viewer of the software Panorama Studio the lines are straight.
Is there a way to fix this?

[code] var width = window.innerWidth,
height = window.innerHeight;
var mirrorCube, mirrorCubeCamera; // for mirror material
var mirrorSphere, mirrorSphereCamera; // for mirror material

    var scene = new THREE.Scene();
    // var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    // var camera = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2,
    //     window.innerHeight / 2, -window.innerHeight / 2, 1, 1000);
    var camera = new THREE.OrthographicCamera(-50, 50,
        50, -50, 1, 1000);
    camera.position.set(0, 0, 50);
    camera.fov = Math.max(100, Math.min(200, camera.fov));
    camera.updateProjectionMatrix();

    var controls = new THREE.OrbitControls(camera, document.body);
    controls.enablePan = false;
    controls.enableZoom = false;
    controls.autoRotate = true;
    controls.autoRotateSpeed = 1;
    function onMouseWheel(event) {
        if (event.wheelDeltaY) { // WebKit
            camera.fov -= event.wheelDeltaY * 0.05;
        } else if (event.wheelDelta) { // Opera / IE9
            camera.fov -= event.wheelDelta * 0.05;
        } else if (event.detail) { // Firefox
            camera.fov += event.detail * 1.0;
        }
        camera.fov = Math.max(40, Math.min(100, camera.fov));
        camera.updateProjectionMatrix();
    }
    document.addEventListener('mousewheel', onMouseWheel, false);
    document.addEventListener('DOMMouseScroll', onMouseWheel, false);

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

    var loader = new THREE.TextureLoader();
    loader.load('images/Panorama-Salzwedel-Museumsplatz_full.jpg', function (texture) {
        texture.anisotropy = renderer.capabilities.getMaxAnisotropy()
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        material.side = THREE.DoubleSide
        var sphere = new THREE.Mesh(
            // new THREE.SphereGeometry(20, 100, 100),
            new THREE.SphereGeometry(100, 100, 100),
            material
        );
        // sphere.scale.x = -1;
        // sphere.scale = new THREE.Vector3(-1, 1, 1);
        scene.add(sphere);

        renderer.render(scene, camera);
        function animate() {
            requestAnimationFrame(animate);
            controls.update();

            renderer.render(scene, camera);
        }
        animate();
    });[/code]

Best regards - Ulrich

2

Can you please try to apply your equirectangular panorama like so?

scene.background = loader.load('images/Panorama-Salzwedel-Museumsplatz_full.jpg' );

Note this only works with a current three.js release. So try it with r121.

3

Thanks for this advice. This works as far as the lines are straight now. However the complete image is displayed as is, no projection and no way to interact. It’s the same view as if I had embedded the image by use of a HTML img tag.

4

Oh wait, I’ve forgot something. It should be:

const texture = loader.load('images/Panorama-Salzwedel-Museumsplatz_full.jpg' );
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
2 Likes
5

You’re my hero, this works great, no more bent lines!

May I ask an additional question? You are loading the texture without a callback. Obviously this works synchronously. Is this a new feature in latest versions of threejs?

6

Actually no^^. You just get a texture object that you can immediately use to configure your material. The actual texture upload to the GPU happens automatically by the renderer when the loading process has finished. This is not a new API, it works since the introducing of TextureLoader.

7

Thanks for this explanation. Anyway, this way loading is much easier to code.

This is the final result:


I composed it from different demos for threejs.
Best regards - Ulrich
8

Very nice!