Three.js Skybox Texture Problema.
-
12-12-2019 - |
Pregunta
Estoy tratando de crear una caja de SkyBox simple usando tres.js, pero se ha encontrado con un problema con la textura que estoy aplicando al cubo solo trabajando en el exterior, y no se muestra en el interior del cubo.
Aquí está mi código Skybox:
var path = assetPath + skyboxPrefix;
var urls = [ path + 'alpine_front.jpg',
path + 'alpine_back.jpg',
path + 'alpine_left.jpg',
path + 'alpine_right.jpg',
path + 'alpine_top.jpg' ];
var cubeTexture = THREE.ImageUtils.loadTextureCube( urls );
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = cubeTexture;
var skyboxMaterial = new THREE.ShaderMaterial( {
uniforms : shader.uniforms,
fragmentShader : shader.fragmentShader,
vertexShader : shader.vertexShader,
depthWrite : false
} );
var skyboxGeom = new THREE.CubeGeometry( 10000, 10000, 10000 );
skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );
skybox.flipSided = true;
scene.add(skybox);
Aquí hay una versión en vivo http://projects.harrynorthver.com/landscape/src/
¡Muchas gracias en avanzado!
Solución
object.flipSided
se ha ido desde R50.Se reemplazó con object.material = THREE.BackSide
.Comprobando Ejemplos actualizados que utilizan la misma característica y también esto migration página debe ser útil en casos como este.
Otros consejos
También he visto el interruptor "Flipido" en otros ejemplos y no logró que funcione (podría estar desactualizado).Lo que funciona para mí (con una esfera) está estableciendo una escala negativa:
skybox.scale.x = -1;