Ensuring texture consistency for scene backgrounds in three.js

Question

Ensuring texture consistency for scene backgrounds in three.js

I am facing an issue with adding a background to a scene using a PNG image of 2k resolution. The background appears correctly sized on PC, but on mobile devices, it looks disproportionated. Here is the code snippet I am using:

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

To set the texture as the background of the scene, I simply do this:

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

I have come across suggestions to create a separate scene for the background, but I am looking for a simpler solution. Is there a better way to address this issue?

(Please excuse any errors in my English)

javascript css image three.js textures

Answer 1

Answer №1

If you want to tackle this problem, consider utilizing the 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
    }
}

You'll need to determine the adjustments required for portrait and landscape orientations.

Consider using uniform vec2 uScale; to customize the vertical and horizontal aspects based on the orientation.

Another option is connecting a plane to a camera in the scene graph and managing its scale accordingly.

Answer 2

If you want to tackle this problem, consider utilizing the 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
    }
}

You'll need to determine the adjustments required for portrait and landscape orientations.

Consider using uniform vec2 uScale; to customize the vertical and horizontal aspects based on the orientation.

Another option is connecting a plane to a camera in the scene graph and managing its scale accordingly.

Answer 3

Answer №2

Consider using a CSS-based background as an alternative method:

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

To allow transparency through the canvas, create your renderer like this:

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

Check out the DEMO here: https://jsfiddle.net/f2Lommf5/5052/

Answer 4

Consider using a CSS-based background as an alternative method:

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

To allow transparency through the canvas, create your renderer like this:

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

Check out the DEMO here: https://jsfiddle.net/f2Lommf5/5052/

Ensuring texture consistency for scene backgrounds in three.js

Answer №1

Answer №2

Similar questions

Difficulty encountered when displaying JavaScript variable content within HTML in a React component

Inquiry regarding the grid structure within my react application

What is the best way to retrieve information from a database using JSON with PHP, JQUERY, and

determining the perfect size of a container by analyzing its content

Issues arise when using res.send() with ExpressJS and Mongoose

Creating a PDF document using HTML code

Error (CODE5022) JavaScript detected in Internet Explorer 10

Error: The function setEmail is not defined. (In 'setEmail(input)', 'setEmail' is not recognized) (Cannot utilize hooks with context API)

When hovering over slick text, it becomes hidden because of non-responsive CSS. Are there any solutions to make it responsive?

Triggering the Bootstrap modal multiple times with each increment

Creating a hierarchical tree in JavaScript and generating nested UL/LI output with ExpressJS

Ways to automatically close browser tab upon successful submission of a form

JavaScript Array join() method returns an empty string

How can I extract specific data from a JSON response and populate a select dropdown with AngularJS?

Ways to retrieve a specific item from a constantly changing knockout observableArray without employing a foreach loop

Ways to show text on a donut chart when hovering with the mouse

What sets Angular 2 apart when it comes to utilizing [ngStyle] versus [style.attribute]?

Sorting rows dynamically with jQuery Tablesorter

Displaying numerous database rows through SQL with the aid of PHP and JavaScript (specifically AJAX) on the frontend of a website

Guide on making a JavaScript button with both "light and dark" modes