在三个.js中保持比例作为场景背景的纹理

Question

>我有一个想要添加背景的场景，我有一个 PNG 图像(2K 分辨率(，但是当我在 PC 上尝试时，它的大小合适，在移动设备上"不成比例"我的代码如下：

var texture = THREE.ImageUtils.loadTexture('img/texture.png');

并将其添加为背景就是这样：

  scene = new THREE.Scene();
  scene.background = texture;

我已经通过一些搜索看到，也许我必须为背景创建一个单独的场景，但我认为这不是最简单的解决方案，也许有更好的解决方案？

(一如既往，对不起我的英语不好(

Answer 1

你可以尝试用THREE.ShaderMaterial来解决这个问题

class MyBackgroundPlane extends THREE.Mesh{
    constructor(){
        super( 
            new THREE.PlaneBufferGeometry(2,2,1,1), 
            new THREE.ShaderMaterial({
                uniforms:{
                    uTexture: { value: null },
                    uAspect: { value: 1 }
                },
                vertexShader: `
                    varying vec2 vUv;
                    uniform float uAspect;
                    void main(){
                        vUv = uv; //pass coordinates to screen
                        vUv.x *= uAspect; //scale the coordinates
                        gl_Position = vec4(position.xy, 1., 1.);
                    }
                `,
                fragmentShader:`
                    varying vec2 vUv;
                    uniform sampler2D uTexture;
                    void main(){
                        gl_FragColor = texture2D( uTexture, vUv );
                    }
                `
            })
        )
        this.frustumCulled = false
    }
    setAspect( aspect ){
        this.material.uniforms.uAspect.value = aspect
    }
    setTexture( texture ){
        this.material.uniforms.uTexture.value = texture
    }
}

你必须弄清楚当它的肖像和它的风景时需要发生什么。

一种方法可能是使用uniform vec2 uScale;，然后根据方向以不同的方式设置垂直和水平方面。

场景图也可以做同样的事情，例如，将一个常规平面附加到摄像机上，然后管理它的比例。

Answer 2

作为替代方案，您可以使用基于 CSS 的背景：

#background {
    background-image: url('http://youring.com/test/img/texture.png');
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

只需像这样创建渲染器，这样就可以透视画布：

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );

演示：https://jsfiddle.net/f2Lommf5/5052/