camera equipped with a three.js skybox

Question

camera equipped with a three.js skybox

I need help with creating a skybox attached to the player camera. When the camera moves, the skybox also moves causing the texture to stretch. How can I prevent this stretching issue?

Here is the code snippet I'm using:

var textureCube = THREE.ImageUtils.loadTextureCube( urls );
textureCube.format = THREE.RGBFormat;
var shader = THREE.ShaderUtils.lib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;

cubematerial = new THREE.ShaderMaterial({
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: shader.uniforms,
    depthWrite: false,
    side: THREE.BackSide
});
skyBox = new THREE.Mesh(new THREE.CubeGeometry(1000,1000,1000), cubematerial);
camera.add(skyBox);

javascript webgl three.js skybox

Answer 1

Answer №1

After exploring various Three.js examples, I came across a solution for achieving a specific effect. The tutorial at is no longer up-to-date. Instead, the method used in these examples involves adding a skybox to a separate scene with a fixed camera, and then rendering both scenes simultaneously. For more details, refer to the webgl_materials_cars.html example.

Since I am utilizing a third-person camera linked to a character, it is necessary to synchronize the world rotation between the character's camera and the skybox camera. This synchronization can be achieved during the render process with the following code snippet:

function render(){
<...>
    skyboxCamera.rotation.setEulerFromRotationMatrix( new THREE.Matrix4().extractRotation( camera.matrixWorld ), skyboxCamera.eulerOrder );
    renderer.render(skyboxScene, skyboxCamera);
    renderer.render(scene, camera);
<...>
}

Answer 2

After exploring various Three.js examples, I came across a solution for achieving a specific effect. The tutorial at is no longer up-to-date. Instead, the method used in these examples involves adding a skybox to a separate scene with a fixed camera, and then rendering both scenes simultaneously. For more details, refer to the webgl_materials_cars.html example.

Since I am utilizing a third-person camera linked to a character, it is necessary to synchronize the world rotation between the character's camera and the skybox camera. This synchronization can be achieved during the render process with the following code snippet:

function render(){
<...>
    skyboxCamera.rotation.setEulerFromRotationMatrix( new THREE.Matrix4().extractRotation( camera.matrixWorld ), skyboxCamera.eulerOrder );
    renderer.render(skyboxScene, skyboxCamera);
    renderer.render(scene, camera);
<...>
}

Answer 3

Answer №2

Although it's a closed question, I have an alternative solution that eliminates the need for an extra scene in case anyone is interested:

Begin by following this tutorial closely:

You can then implement the following shader (I've included it in three.js ShaderLib, but if you prefer not to modify three's source code, add it separately):

'skybox': {

uniforms: { "tCube": { type: "t", value: null },
            "tFlip": { type: "f", value: -1 } },

vertexShader: [

    "varying vec3 vWorldPosition;",
    
    THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
    
    "void main() {",
    
    "   vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
    "   vWorldPosition = worldPosition.xyz;",
    
    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position + cameraPosition, 1.0 );",
    
        THREE.ShaderChunk[ "logdepthbuf_vertex" ],
    
    "}"
    
].join("\n"),

fragmentShader: [

    "uniform samplerCube tCube;",
    "uniform float tFlip;",
    
    "varying vec3 vWorldPosition;",
    
    THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],

    "void main() {",
    
    "   gl_FragColor = textureCube( tCube, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ) );",
    
        THREE.ShaderChunk[ "logdepthbuf_fragment" ],
    
    "}"
    
].join("\n")

},

To create your skybox, follow these steps:

// urls should contain the textures to be used
var cubemap = THREE.ImageUtils.loadTextureCube(urls); 
cubemap.format = THREE.RGBFormat; 

var shader = THREE.ShaderLib['skybox']; // initialize the custom skybox shader
shader.uniforms['tCube'].value = cubemap; // assign textures to shader

// create shader material
var skyBoxMaterial = new THREE.ShaderMaterial( {
  fragmentShader: shader.fragmentShader,
  vertexShader: shader.vertexShader,
  uniforms: shader.uniforms,
  depthWrite: false,
  side: THREE.BackSide
});

// create skybox mesh
var skybox = new THREE.Mesh(
  new THREE.CubeGeometry(1000, 1000, 1000),
  skyBoxMaterial
);

// Ensuring the skybox remains visible even after moving the camera too far away
skybox.frustumCulled = false;

Answer 4

Although it's a closed question, I have an alternative solution that eliminates the need for an extra scene in case anyone is interested:

Begin by following this tutorial closely:

You can then implement the following shader (I've included it in three.js ShaderLib, but if you prefer not to modify three's source code, add it separately):

'skybox': {

uniforms: { "tCube": { type: "t", value: null },
            "tFlip": { type: "f", value: -1 } },

vertexShader: [

    "varying vec3 vWorldPosition;",
    
    THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
    
    "void main() {",
    
    "   vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
    "   vWorldPosition = worldPosition.xyz;",
    
    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position + cameraPosition, 1.0 );",
    
        THREE.ShaderChunk[ "logdepthbuf_vertex" ],
    
    "}"
    
].join("\n"),

fragmentShader: [

    "uniform samplerCube tCube;",
    "uniform float tFlip;",
    
    "varying vec3 vWorldPosition;",
    
    THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],

    "void main() {",
    
    "   gl_FragColor = textureCube( tCube, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ) );",
    
        THREE.ShaderChunk[ "logdepthbuf_fragment" ],
    
    "}"
    
].join("\n")

},

To create your skybox, follow these steps:

// urls should contain the textures to be used
var cubemap = THREE.ImageUtils.loadTextureCube(urls); 
cubemap.format = THREE.RGBFormat; 

var shader = THREE.ShaderLib['skybox']; // initialize the custom skybox shader
shader.uniforms['tCube'].value = cubemap; // assign textures to shader

// create shader material
var skyBoxMaterial = new THREE.ShaderMaterial( {
  fragmentShader: shader.fragmentShader,
  vertexShader: shader.vertexShader,
  uniforms: shader.uniforms,
  depthWrite: false,
  side: THREE.BackSide
});

// create skybox mesh
var skybox = new THREE.Mesh(
  new THREE.CubeGeometry(1000, 1000, 1000),
  skyBoxMaterial
);

// Ensuring the skybox remains visible even after moving the camera too far away
skybox.frustumCulled = false;

camera equipped with a three.js skybox

Answer №1

Answer №2

Similar questions

Error: The property 'price' is not defined and cannot be read

Having difficulty accessing a PHP ajax post request

"Embrace the power of Ajax and JSON with no regrets

When the open button is clicked, the Div will toggle between open and closed states

Utilizing Nicknames in a JavaScript Function

Struggling with JavaScript conditional statements

What is the process for reversing styles on the second click?

Tips for refreshing a DOM element after inserting with jQuery

Determine if offcanvas element is visible upon initialization in Bootstrap 5 Offcanvas

Switch between showing or hiding at least three divs

Guide to attaching and displaying an image on a Three.js map

When the `back` button is clicked in a browser from a different domain, does it trigger a page reload?

Issue: The GET request to a third-party API using Fetch API encountered a "TypeError: Failed to fetch" error

add an svg string element to a pre-existing svg element

What could be causing my res.statusCode to switch from 200 to 404 after using collection.replaceOne?

Conceal the menu on jQuery click event anywhere on the page

Discovering feedback from JavaScript

When the value of a Formcontrol is changed using valueAccessor.writeValue(), it remains unchanged

`Sending binary data to client through GraphQL: A comprehensive guide`

An easy guide to sorting outcomes using JSON