Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/454.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Three.js skybox渲染为红色立方体然后消失?_Javascript_Three.js_Glsl_Webgl - Fatal编程技术网

Javascript Three.js skybox渲染为红色立方体然后消失?

Javascript Three.js skybox渲染为红色立方体然后消失?,javascript,three.js,glsl,webgl,Javascript,Three.js,Glsl,Webgl,我正在使用Three.js并尝试使用我自己的着色器放入skybox。我自己似乎找不到问题,也没有收到任何控制台警告或错误 我将skybox缩小,以查看它是否正在加载,当页面加载时,它会闪烁为红色,然后消失,如果我放大skybox,它就全是白色 我的js: // Cubemap var deception_pass = new THREE.CubeTextureLoader() .setPath( 'img/deception_pass/' ) .load( [ 'deception_

我正在使用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;
}

更新:发现我的错误-我丢失了skybox的material side属性。下面的人把它修好了

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