three.js 天空盒子使用方法

原创 2016年08月31日 15:50:22

Three.js 天空盒子使用方法研究

所谓的天空盒子就是一个超级大的BOX盒子,在渲染手段上使用了skyboxShader而已,这个shader存在于THREE.js库中。
稍微详细一点展开,天空盒子分为六个方形的图片。

function makeSkybox( urls, size ) {
                var skyboxCubemap = new THREE.CubeTextureLoader().load( urls );
                skyboxCubemap.format = THREE.RGBFormat;

                var skyboxShader = THREE.ShaderLib['cube'];
                skyboxShader.uniforms['tCube'].value = skyboxCubemap;
                console.log('执行了添加天空盒子语句');

                return new THREE.Mesh(
                    new THREE.BoxGeometry( size, size, size ),
                    new THREE.ShaderMaterial({
                        fragmentShader : skyboxShader.fragmentShader, 
                        vertexShader : skyboxShader.vertexShader,
                        uniforms : skyboxShader.uniforms, 
                        depthWrite : false, 
                        side : THREE.BackSide
                    })
                );
            }

urls是一个数组,包含六张照片的地址
size是天空盒子的大小,不宜太小,根据场景内其他物体的大小设置
相机的视野要大于天空盒子的边长才行,否则会出现黑色现象。

scene.add( makeSkybox( [
                'textures/skybox/px.jpg', // right
                'textures/skybox/nx.jpg', // left
                'textures/skybox/py.jpg', // top
                'textures/skybox/ny.jpg', // bottom
                'textures/skybox/pz.jpg', // back
                'textures/skybox/nz.jpg'  // front
            ], 8000 ));

天空盒子urls的导入顺序如上所示。天空盒子的效果见截图。
天空盒子实际浏览效果

天空盒子实际效果截图

大家注意,在实际网络传输中,六张图片大小还是比较大的,直接加载时会出现一种现象,就是先黑一下,过一会才出现天空的图案。最好先设置盒子为不可见,待六张图片全部加载完毕后,再设为可见。

版权声明:本文为博主原创文章,转载时应附上本文链接。 如有其他任何问题需要交流或帮助,请邮件联系博主 mcoder2014@sina.com

用Three.js创建一个简易的天空盒

本文创建的天空盒是用六张图片来创建的。笔者会论述两种方法来创建,都是最简单基本的方法,不涉及着色器的使用。 一种是创建一个盒子,然后将图片作为盒子6个面的纹理贴上来创建。 另一种则是简单的将纹理作...
  • qq_37994494
  • qq_37994494
  • 2017年08月02日 11:26
  • 1068

#ThreeJS#之外景天空盒子

使用立方体贴上图片材质后实现天空盒子,可以作为房间外部的场景
  • hbzhlt
  • hbzhlt
  • 2017年03月27日 16:57
  • 749

加入天空盒-04

//添加天空盒 scene.background = new THREE.CubeTextureLoader() .setPath( '../skybox/' ) .load( [ '...
  • qq_18377515
  • qq_18377515
  • 2017年05月25日 20:26
  • 730

Export To Three.js导出天空盒

Export To Three.js插件支持两种类型的天空盒:1.由6张贴图组成的天空盒;2.由1张全景图组成的天空盒 天空盒导出设置说明: •ExportSkybox :是否导出天空盒 •Radi...
  • LucasEvan
  • LucasEvan
  • 2017年08月13日 23:54
  • 366

[webGL学习]基于three.js构建WebGL实例第五讲

今天,我们将继续学习webgl(three.js)这门课程,今天我们将向您展示如何以三种不同的方式为您的场景创建一个美丽的环境(天空盒):立方天空盒 侧面),球形天空盒(单周围纹理)和球形着色器天空盒...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016年10月11日 17:20
  • 4135

【Unity3D】地形和天空盒子

Unity3D自带地形和天空盒子,可以很轻易就做出3D地形和天空贴图。无须写一行代码。下面举一个例子说明如下图的场景实现: 一、地形 1、通过【GameObject】->【3D Objec...
  • yongh701
  • yongh701
  • 2017年05月19日 20:34
  • 1699

Unity3D - 使用天空盒子(Using Skyboxes)

在场景中,天空盒子(skybox)是代表天空或是远景的全景纹理图片。理解天空盒子(Understanding skybox)天空盒是一个全景视图,分为六个纹理,表示沿主轴(上,下,左,右,前,后)可见...
  • biezhihua
  • biezhihua
  • 2017年08月13日 22:19
  • 1754

[webGL学习]基于three.js构建WebGL实例第六讲

演示地址 今天我们继续webGL的课程。 今天我们开始另一个主题,我们将使用sprites和纹理动画。 如果你不知道,sprites只是图像,可以附加到对象上。 这些sprites图像总是与我们的...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016年10月13日 08:39
  • 3314

DirectX天空球和天空盒子模型

在一些大型的3D游戏中,有几个必不可少的元素,比如说天空和大地,这些元素的存在可以增加3D场景的真实感。三维场景中天空和大地场景的模拟其实很简单,这种场景跟古人所说的“天圆地方”有着异曲同工之妙。天空...
  • u011000290
  • u011000290
  • 2015年11月21日 11:48
  • 1947

Direct3D学习(七):DirectX下天空盒子的实现

概述三维场影里的天空并不是“真正”的天空,而是用图片拼起来的,欺骗我们眼睛。通常把大家所在的场景用一个几何体包裹起来,再在里面贴上从各个角度的风景图,就好像一个真正的环境一样。想想CS之类的天空,是不...
  • xoyojank
  • xoyojank
  • 2007年05月29日 03:28
  • 13742
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:three.js 天空盒子使用方法
举报原因:
原因补充:

(最多只允许输入30个字)