【第22期】观点:IT 行业加班,到底有没有价值?

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的导入顺序如上所示。天空盒子的效果见截图。
天空盒子实际浏览效果

天空盒子实际效果截图

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

版权声明:本文为博主原创文章,转载时,请附上本文链接 举报

相关文章推荐

three.js学习 函数使用方法散记

var shape = three.shape(): 1.传入顶点数组 three.shape([]) 2.shape.moveto lineto (最后要lineto顶点closepath) ...

js中join函数的使用方法

         Join 函数获取一批字符串,然后用分隔符字符串将它们联接起来,从而返回一个字符串。          Split 函数获取一个字符串,然后在分隔符处将其断开,从而返回一批字符串。   但是,这两个函数之间的主要区别在于:Join 可以使用任何分隔符字符串将多个字符串连接起来,而 Split  只能使用一个字符分隔符将字符串断开。简单地说,如果你用split,是把一串字符(根据某个分

欢迎关注CSDN程序人生公众号

关注程序员生活,汇聚开发轶事。

iphone下Three20库(From Facebook)的设置使用方法

Three20是一个编译的静态类库 ,在Xcode中的项目实用此类库也非常方便,以下是一些基础步骤: 1,从Three20 Git上获取 最新文件 ,在终端命令 输入:git clone git://github.com/joehewitt/three20.git,必须确保此项目文件必须有一个固定的存放路径</

H5打造3d场景不完全攻略(二): Amazing CSS3D

对的,本文就是着重介绍如何使用CSS3中的3D变换打造出H5中的3D效果。灵感来源于造物节团队的3d引擎,因为使用方法比较复杂,也没有开源的API文档,于是想自己另外造个轮子,便开始了相关内容的学习和...

iphone 下Three20库(From Facebook)的设置使用方法

原文地址:http://www.cnblogs.com/chen1987lei/archive/2010/03/10/1682796.html Three20是一个编译的静态类库,在Xcode中的项目实用此类库也非常方便,以下是一些基础步骤: 1,从Three20 Git上获 取 最新文 件 ,在终端命 令 输入:git clone git://github.com/joeh
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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