CODEWITHSUNDEEP
javascriptwebglthree.jsskybox
Roman B.
Roman B.

Reputation: 75

three.js skybox assigned to camera

I'm trying to make skybox assigned to player camera. When camera moves(also skybox moves with it), texture get stretched. How to get rid of this?

Code:

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

Upvotes: 3

Views: 2808

Answers (2)

Ronen Ness
Ronen Ness

Reputation: 10740

I know it's a closed question but I want to offer an alternative that does not require an additional scene, for future seekers:

  1. start by reading and following this tutorial: http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/

  2. now create the following shader (I added it to three.js ShaderLib, but if you don't want to temper with three' source code add it outside):

    '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")

    },

  3. create your skybox like this:

        // urls is a list of textures to use
var cubemap = THREE.ImageUtils.loadTextureCube(urls); 
cubemap.format = THREE.RGBFormat; 

var shader = THREE.ShaderLib['skybox']; // init the skybox shader we created above
shader.uniforms['tCube'].value = cubemap; // apply 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
);

        // THIS IS IMPORTANT! or the skybox will get culled after you move the camera too far..
skybox.frustumCulled = false;

Upvotes: 1

Roman B.
Roman B.

Reputation: 75

So, after digging into Three.js examples, I found a way how to do this. http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/ is outdated. A way used in examples is to add skybox into second scene with fixed camera, and render both scenes. Look at webgl_materials_cars.html example.

Also because I use 3rd person camera assigned to character, I must get world rotation from character camera to skybox camera. This can be done on render with:

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

Upvotes: 2

Related Questions