[英]Three.js skybox rendering as red cube then disappearing?
我正在使用Three.js,并尝试使用自己的着色器将其放入天空盒中。 我似乎无法独自找到问题,也没有收到任何控制台警告或错误。
我将天空盒缩小,以查看它是否正在加载,当页面加载时,它会闪烁红色然后消失,如果我放大天空盒,它们全都是白色。
我的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的材料副属性。 下面修复它
var skyboxMaterial = new THREE.ShaderMaterial({
uniforms: {
skybox: { type: "t", value: cubemap },
},
side: THREE.DoubleSide
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.