2017-12-28 17 views
0

Ich benutze Three.js und versuche, eine Skybox mit meinem eigenen Shader einzubauen. Ich kann das Problem nicht alleine finden und bekomme keine Konsolenwarnungen oder Fehler.Three.js skybox rendering als roter Würfel verschwindet dann?

Ich habe die Skybox klein gemacht, um zu sehen, ob sie gerade geladen wurde, wenn die Seite geladen wird, blinkt sie rot auf und verschwindet dann, wenn ich die Skybox vergrößere, ist alles nur weiß.

Meine js:

// Cubemap 
var deception_pass = new THREE.CubeTextureLoader() 
    .setPath('img/deception_pass/') 
    .load([ 
    'deception_pass_ft.png', 'deception_pass_bk.png', 
    'deception_pass_up.png', 'deception_pass_dn.png', 
    'deception_pass_rt.png', 'deception_pass_lf.png' 
    ]); 

var cubemap = { type: 't', value: deception_pass } 

// Skybox 
var skyboxUniforms = { 
    cubemap : cubemap, 
}; 

var skyboxMaterial = new THREE.ShaderMaterial({ 
    uniforms: skyboxUniforms, 
}); 

var loader = new THREE.FileLoader(); 
    loader.load('glsl/skybox.vs.glsl', function(shader) { 
    skyboxMaterial.vertexShader = shader 
    }); 
    loader.load('glsl/skybox.fs.glsl', function(shader) { 
    skyboxMaterial.fragmentShader = shader 
    }); 

var skyboxGeometry = new THREE.BoxGeometry(10, 10, 10); 
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial); 
scene.add(skybox) 

Vertex-Shader:

uniform samplerCube cubemap; 
varying vec3 worldPos; 

    void main() { 

    worldPos = vec3(modelMatrix * vec4(position, 1.0)); 

    // Move position with camera 
    gl_Position = projectionMatrix * viewMatrix * vec4(position + cameraPosition, 1.0); 
} 

Fragment-Shader:

uniform samplerCube cubemap; 
varying vec3 worldPos; 

void main() { 

    vec4 color = textureCube(cubemap, worldPos); 

    gl_FragColor = color; 
} 

Antwort

1

Update: mein Fehler gefunden - ich die materielle Seite Eigenschaft für meine Skybox fehlte . Die unten angegebenen

var skyboxMaterial = new THREE.ShaderMaterial({ 
    uniforms: { 
     skybox: { type: "t", value: cubemap }, 
    }, 
    side: THREE.DoubleSide 
}) 
Verwandte Themen