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;