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