Three.js天空盒纹理问题。

时间:2012-10-01 08:56:27

标签: javascript webgl three.js

我正在尝试使用Three.js创建一个简单的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);

这是一个实时版http://projects.harrynorthover.com/landscape/src/

非常感谢先进!

2 个答案:

答案 0 :(得分:5)

object.flipSided自r50以来已经消失。它被object.material = THREE.BackSide取代。在这种情况下,检查updated examples that use the same feature以及此migration页面应该很方便。

答案 1 :(得分:1)

我还在其他示例中看到了“flipSided”开关,并没有让它工作(可能已经过时)。对我来说(对于球体)有用的是设置负标度:

skybox.scale.x = -1;