하늘 상자가 빨간색 큐브로 렌더링되면 사라 집니까?

Question

저는 Three.js를 사용하고 제 자신의 쉐이더로 스카이 박스를 넣으려고합니다. 혼자서 문제를 찾지 못해서 콘솔 경고 나 오류가 발생하지 않습니다.

Skybox를 작게 만들었는지, 페이지가로드 될 때 빨간색으로 깜박이며 사라질 때 skybox를 작게 만들었습니다. skybox를 확대하면 모두 흰색입니다.

내 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) 

버텍스 쉐이더 :

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

조각 쉐이더 :

uniform samplerCube cubemap; 
varying vec3 worldPos; 

void main() { 

    vec4 color = textureCube(cubemap, worldPos); 

    gl_FragColor = color; 
} 

Answer 1

업데이트 : 내 실수 발견 - 내 스카이 박스의 재료 측면 속성을 실종됐다 . 아래 내용은 수정 됨

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