javascript - que - three.js skybox asignado a la cámara

webgl three js documentation

Question

Estoy tratando de hacer que Skybox esté asignado a la cámara del jugador. Cuando la cámara se mueve (también se mueve con Skybox), la textura se estira. ¿Cómo deshacerse de esto?

Código:

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

Answer 1

Entonces, después de indagar en los ejemplos de Three.js, encontré la forma de hacerlo. http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/ está desactualizado. Una forma utilizada en los ejemplos es agregar skybox en la segunda escena con cámara fija y representar ambas escenas. Mira el ejemplo webgl_materials_cars.html.

Además, debido a que uso una cámara de tercera persona asignada al personaje, debo obtener una rotación mundial desde la cámara de caracteres a la cámara de la caja del cielo. Esto se puede hacer en render con:

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

Answer 2

Sé que es una pregunta cerrada, pero quiero ofrecer una alternativa que no requiera una escena adicional, para futuros buscadores:

1. Comience leyendo y siguiendo este tutorial: http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/

2. Ahora crea el siguiente shader (lo agregué a three.js ShaderLib, pero si no quieres atemperarlo con tres ''código fuente, agrégalo afuera):

   ''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. crea tu skybox así:

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