Three.js未填充的SkyBox
我正试图使我的skybox不受Three.js未填充的SkyBox,three.js,culling,skybox,Three.js,Culling,Skybox,我正试图使我的skybox不受camera.far参数的影响。我想用它剔除所有其他场景对象,而不是天空盒 当我设置skyBox.frustumCulled=false时没有区别skyBox当然是网格 这是通过添加另一个渲染过程来完成的吗?如果是这样的话,我需要两个不同的摄像头,一个具有非常高的远距值,以允许查看skybox,对吗?如何有效地做到这一点 为清晰起见,以下是用于绘制skybox的my terrain对象代码片段: shader = THREE.ShaderLib["cube"
camera.far
参数的影响。我想用它剔除所有其他场景对象,而不是天空盒
当我设置skyBox.frustumCulled=false时代码>没有区别<代码>skyBox
当然是网格
这是通过添加另一个渲染过程来完成的吗?如果是这样的话,我需要两个不同的摄像头,一个具有非常高的远距值,以允许查看skybox,对吗?如何有效地做到这一点
为清晰起见,以下是用于绘制skybox的my terrain对象代码片段:
shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = this.cubetexture;
mat = new THREE.ShaderMaterial({
uniforms: shader.uniforms,
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
depthWrite: false,
side: THREE.BackSide
});
geo = new THREE.BufferGeometry().fromGeometry(new THREE.BoxGeometry(1024, 1024, 1024));
mesh = new THREE.Mesh(geo, mat);
mesh.rotation.y += 90;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 50;
mesh.frustumCulled = false;
mesh.matrixAutoUpdate = false;
mesh.rotationAutoUpdate = false;
mesh.updateMatrix();
this.skybox = mesh;
scene.add(this.skybox);
您正在“主”场景中添加skybox。完成skydome的更好方法是创建一个新场景。这将是你的“主要”场景的“背景”。还有一个关于skydomes v.s.SkyBox的讨论,简单地说,一个盒子可以保存多边形,一个圆顶看起来更好。在本例中,我将使用圆顶/球体
var renderer = new THREE.WebGLRenderer( {alpha: true, antialias: true} );
var mainScene = new THREE.Scene();
var mainCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000 );
var skydome = {
scene: new THREE.Scene(),
camera: new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000 );
};
skydome.material = new THREE.MeshBasicMaterial({color: 0x0F0F0F}) //the material for the skydome, for sake of lazyness i took a MeshBasicMaterial.
skydome.mesh = new THREE.Mesh(new THREE.SphereGeometry(100, 20, 20), skydome.material);
skydome.scene.add(skydome.mesh);
现在,在渲染功能期间,只调整skydome摄影机的旋转,而不调整位置
var render = function(){
requestAnimationFrame( render );
skydome.camera.quaternion = mainCamera.quaternion;
renderer.render(skydome.scene, skydome.camera); //first render the skydome
renderer.render(mainScene, mainCamera);//then render the rest over the skydome
};
renderer.autoclear = false; //otherwise only the main scene will be rendered.
哇!看起来棒极了,我迫不及待地想回家试试=]嗯,这是一个很好的答案,但由于某种原因,在实现了您的代码后,我发现只有我的skybox被渲染:(