6 * 1 Format picture UV vertices are mapped into cube splices where there are gaps

Questions
, ,
1

six pictures inline, UV vertices are mapped into cube splices where there are gaps.
original picture:
demo

looks like this： -----------------------
image

main Code like this: -----------------


       container = document.getElementById('container');
        camera = new THREE.PerspectiveCamera(75, videoWidth / videoHeight, 1, 1100);
      
        scene = new THREE.Scene(); // 创建一个新的场景对象
        window.movieGeometry = new THREE.BoxGeometry(256, 256, 256);

        var textureLoader = new THREE.TextureLoader();
        window.texture = textureLoader.load('./images/demo.png');
        texture.minFilter = THREE.UVMapping;
        texture.magFilter = THREE.NearestFilter;
        window.movieMaterial = new THREE.MeshBasicMaterial({
            map: texture,
            side: THREE.BackSide,
        });
        // 6*1格式
        const left = [new THREE.Vector2(0, 0), new THREE.Vector2(1/6, 0), new THREE.Vector2(1/6, 1), new THREE.Vector2(0, 1)];
        const right = [new THREE.Vector2(1/6, 0), new THREE.Vector2(2/6, 0), new THREE.Vector2(2/6, 1), new THREE.Vector2(1/6, 1)];
        const top = [new THREE.Vector2(2/6, 0), new THREE.Vector2(3/6, 0), new THREE.Vector2(3/6, 1), new THREE.Vector2(2/6, 1)];
        const bottom = [new THREE.Vector2(3/6, 0), new THREE.Vector2(4/6, 0), new THREE.Vector2(4/6, 1), new THREE.Vector2(3/6, 1)];
        const front = [new THREE.Vector2(4/6, 0), new THREE.Vector2(5/6, 0), new THREE.Vector2(5/6, 1), new THREE.Vector2(4/6, 1)];
        const back = [new THREE.Vector2(5/6, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1), new THREE.Vector2(5/6, 1)];

        window.uvAttribute = movieGeometry.getAttribute('uv');
        const index = movieGeometry.getIndex();
        uvAttribute.setXY(index.getX(0), right[2].x, right[2].y);
        uvAttribute.setXY(index.getX(1), right[1].x, right[1].y);
        uvAttribute.setXY(index.getX(2), right[3].x, right[3].y);
        uvAttribute.setXY(index.getX(3), right[1].x, right[1].y);
        uvAttribute.setXY(index.getX(4), right[0].x, right[0].y);
        uvAttribute.setXY(index.getX(5), right[3].x, right[3].y);

        uvAttribute.setXY(index.getX(6), left[2].x, left[2].y);
        uvAttribute.setXY(index.getX(7), left[1].x, left[1].y);
        uvAttribute.setXY(index.getX(8), left[3].x, left[3].y);
        uvAttribute.setXY(index.getX(9), left[1].x, left[1].y);
        uvAttribute.setXY(index.getX(10), left[0].x, left[0].y);
        uvAttribute.setXY(index.getX(11), left[3].x, left[3].y);

        uvAttribute.setXY(index.getX(12), top[2].x, top[2].y);
        uvAttribute.setXY(index.getX(13), top[1].x, top[1].y);
        uvAttribute.setXY(index.getX(14), top[3].x, top[3].y);
        uvAttribute.setXY(index.getX(15), top[1].x, top[1].y);
        uvAttribute.setXY(index.getX(16), top[0].x, top[0].y);
        uvAttribute.setXY(index.getX(17), top[3].x, top[3].y);

        uvAttribute.setXY(index.getX(18), bottom[2].x, bottom[2].y);
        uvAttribute.setXY(index.getX(19), bottom[1].x, bottom[1].y);
        uvAttribute.setXY(index.getX(20), bottom[3].x, bottom[3].y);
        uvAttribute.setXY(index.getX(21), bottom[1].x, bottom[1].y);
        uvAttribute.setXY(index.getX(22), bottom[0].x, bottom[0].y);
        uvAttribute.setXY(index.getX(23), bottom[3].x, bottom[3].y);

        uvAttribute.setXY(index.getX(24), front[2].x, front[2].y);
        uvAttribute.setXY(index.getX(25), front[1].x, front[1].y);
        uvAttribute.setXY(index.getX(26), front[3].x, front[3].y);
        uvAttribute.setXY(index.getX(27), front[1].x, front[1].y);
        uvAttribute.setXY(index.getX(28), front[0].x, front[0].y);
        uvAttribute.setXY(index.getX(29), front[3].x, front[3].y);

        uvAttribute.setXY(index.getX(30), back[2].x, back[2].y);
        uvAttribute.setXY(index.getX(31), back[1].x, back[1].y);
        uvAttribute.setXY(index.getX(32), back[3].x, back[3].y);
        uvAttribute.setXY(index.getX(33), back[1].x, back[1].y);
        uvAttribute.setXY(index.getX(34), back[0].x, back[0].y);
        uvAttribute.setXY(index.getX(35), back[3].x, back[3].y);
        window.movieScreen = new THREE.Mesh(movieGeometry, movieMaterial);
        const position = {x: 0, y: 0, z: 0 };
        movieScreen.position.set(position.x, position.y, position.z);

        scene.add(movieScreen);
        // // 渲染场景
        camera.position.set(0, 0, 0.01);
        renderer = new THREE.WebGLRenderer({
            devicePixelRatio: window.devicePixelRatio,
            alpha: true,
            clearColor: 0xffffff,
            antialias: true,
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(videoWidth , videoHeight);
        container.appendChild(renderer.domElement);

I do not know how to solve, hope to get help, thank you

2

Have you looked at the CubeTextureLoader class of Three.js yet?

3

THREE.CubeTextureLoader can only load cube maps if each side of the map is defined in a single file.

However, there are cube map definitions that put the entire cube map into a single file like the one from the OP. Unfortunately, there are different layouts like vertical and horizontal cross, column and row layouts. Each one requires a different processing.

@hy212 Do you mind organizing your code similar to webgl_panorama_cube. It shows how to process a cube map in the row layout and renders it as a panorama (without visible seams).

4

The application scenario here is video stream in Cubemap format。
webgl_panorama_cube has used imageLoader，t looks fine if it’s a picture，But it’s a video frame。
I’m new to this and don’t know what to do，Could you give me some guidance？

6

Sorry, I can’t help here. When I’ve worked with panorama videos in the past, they always were in the equirectangular format so I could use the approach from webgl_video_panorama_equirectangular.