Creating a True Skybox with TSL Shader Node

Based on your requirements, you need to create a skybox effect using Three.js' TSL (Three.js Shader Language) nodes without using scene.background or a camera-following sphere.

To create a true skybox effect with an equirectangular texture, you need to convert the mesh's world position direction into appropriate UV coordinates for the equirectangular texture. Here's how you can modify your code:

JAVASCRIPTCopied
const material = new THREE.MeshBasicMaterial({
  side: THREE.DoubleSide,
})

const texture = await getSkyboxTexture(textureLoader)

material.colorNode = THREE.Fn(() => {
  // Get the world position of the current fragment
  const worldPosition = THREE.positionWorld();
  
  // Normalize to get the direction vector from the center
  const direction = THREE.normalize(worldPosition);
  
  // Convert the direction vector to spherical coordinates
  // Calculate phi (horizontal angle)
  const phi = THREE.atan2(direction.x, direction.z);
  
  // Calculate theta (vertical angle)
  const theta = THREE.asin(direction.y);
  
  // Convert spherical coordinates to equirectangular UV coordinates
  // U coordinate: map phi from [-π, π] to [0, 1]
  const u = THREE.add(THREE.mul(phi, 1 / (Math.PI * 2)), 0.5);
  
  // V coordinate: map theta from [-π/2, π/2] to [0, 1]
  const v = THREE.add(THREE.mul(theta, 1 / Math.PI), 0.5);
  
  // Create UV vector
  const equirectUV = THREE.vec2(u, v);
  
  // Sample the texture with the calculated UVs
  return THREE.texture(texture, equirectUV, null);
})()

This approach:

1. Takes the world position of each fragment on your skybox mesh
2. Normalizes it to get a direction vector from the center
3. Converts this direction to spherical coordinates (phi and theta)
4. Maps these spherical coordinates to equirectangular UV coordinates
5. Uses these coordinates to sample your equirectangular sky texture

The result will be a skybox that appears infinitely distant because the texture mapping is based on direction vectors rather than actual positions, creating the parallax effect you're looking for.

Make sure your skybox mesh is centered at the origin (0,0,0) for this to work correctly. The camera position won't affect the appearance of the skybox since we're using normalized direction vectors.