Question

我有一个场景，我想添加一个背景，我有一个png图像（2k分辨率），但是当我在PC上尝试它是正确的大小，在移动设备上是很多＆＃34;不成比例＆＃ 34; 我的代码如下：

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 } );

DEMO ：https://jsfiddle.net/f2Lommf5/5052/

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

2 个答案: