Three.js-Skybox显示黑色
Three.js - Skybox showing black
我在Three.js中向简单场景添加skybox时遇到问题!
我用于skybox的代码是:
var skyBox = new THREE.Mesh( new THREE.BoxGeometry( 1500, 1500, 1500 ), shaderMaterial );
sceneCube.add( skyBox );
遮光板材料定义如下:
shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;
var shaderMaterial = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
我只想把一些简单的图像显示为Skybox,所以我用它来加载图像:
var path = "Desert-";
var format = '.png';
var urls = [
path + 'LEFT' + format, path + 'RIGHT' + format,
path + 'TOP' + format, path + 'BOT' + format,
path + 'FRONT' + format, path + 'BACK' + format
];
textureCube = new THREE.CubeTextureLoader().load( urls );
运行我的代码不会在web控制台中引发任何错误。作为我使用的基本场景http://threejs.org/examples/#webgl_geometry_cube.
我真的很想在网上找到答案,但我在这里找不到我做错了什么。
谢谢你的帮助!
这里是我使用的完整代码(我发布这篇文章是因为我真的试图应用所有的解决方案,这些解决方案都发布在这里)。
<script>
var camera, scene, renderer, cameraCube, sceneCube;
var mesh, shader;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 400;
cameraCube = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
var path = "textures/Desert-";
var format = '.png';
var urls = [
path + 'LEFT' + format, path + 'RIGHT' + format,
path + 'TOP' + format, path + 'BOTTOM' + format,
path + 'FRONT' + format, path + 'BACK' + format
];
console.log(urls);
textureCube = new THREE.CubeTextureLoader().load( urls );
// Skybox
shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;
var shaderMaterial = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
var skyBox = new THREE.Mesh( new THREE.BoxGeometry( 1500, 1500, 1500 ), shaderMaterial );
sceneCube.add( skyBox );
var texture = new THREE.TextureLoader().load( urls[3] );
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render( sceneCube, cameraCube );
renderer.render( scene, camera );
}
如果使用多个渲染过程,如下所示:
renderer.render( sceneCube, cameraCube );
renderer.render( scene, camera );
您需要设置
renderer.autoClear = false;
以防止第二渲染过程清除第一渲染过程。
three.js r.76
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- Three.js-Skybox显示黑色
- Collada模型在Three.js中显示为黑色
- 推送提交后,如果输入字段为黑色,则显示验证检查或以红色字母显示警告
- 带有黑色禁用背景的引导模态显示
- 阴影框(图片库插件)仅显示黑色窗口
- Three.js:如何知道是否所有纹理都已完全加载并显示(并且没有黑色矩形残留)
- 使用CanvasRenderer的three.js纹理,但使用WebGLRenderer显示为黑色
- PHP图片上传:透明度显示为黑色
- Three.js Collada模型显示黑色,没有灯光,直到鼠标移动
- 在图片css的右上角显示带有黑色覆盖的图标