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

Question

我有一个要添加背景的场景，我有一个 png 图像（2k 分辨率），但是当我在 PC 上尝试它时它的大小合适，在移动设备上很多 "disproportionated" 我的代码如下：

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

只需像这样创建您的渲染器，就可以看到 canvas:

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

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

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

Texture which maintain proportion as scene background in three.js

javascript

css

textures

image

three.js