three.js添加场景背景和天空盒(skybox)
本文我们介绍在three.js中如何给3D场景添加背景,我们有3种方式来实现这个目的。
通过html添加背景元素,这实际上一个2D背景;
在three.js加载图片并设置为scene.background,这种方法的好处是可以被后处理(post-processing)效果所影响;
在three.js中绘制天空盒作为背景。
第一种是直接在canvas的css样式中设置background(或者background-image),
然后three.js中设置渲染的alpha为true,这样就表示3D场景是透明的,不会隐藏后面的背景。
我们直接在这个立方体例子的基础上进行修改:https://wow.techbrood.com/fiddle/54855
修改后结果如下:
第二种方法也很简单,代码示例如下:
const loader = new THREE.TextureLoader(); const bgTexture = loader.load('/path/to/sky.jpg'); scene.background = bgTexture;
不过这种情况下,背景图片可能会被拉伸,解决方法是设置背景贴图的offset和repeat属性来绘制其中一部分:
// Set the repeat and offset properties of the background texture // to keep the image's aspect correct. // Note the image may not have loaded yet. const canvasAspect = canvas.clientWidth / canvas.clientHeight; const imageAspect = bgTexture.image ? bgTexture.image.width / bgTexture.image.height : 1; const aspect = imageAspect / canvasAspect; bgTexture.offset.x = aspect > 1 ? (1 - 1 / aspect) / 2 : 0; bgTexture.repeat.x = aspect > 1 ? 1 / aspect : 1; bgTexture.offset.y = aspect > 1 ? 0 : (1 - aspect) / 2; bgTexture.repeat.y = aspect > 1 ? 1 : aspect;
但这个方法和第一种方法基本类似,其实还是个2D背景。
更多的情况下,我们需要使用一个3D环境背景,也就是所谓的天空盒(Skybox)。
skybox其实就是一个box模型(这个box一般可以是cube或者sphere),把sky图像绘制在上面。我们把相机放在box里面,这样看起来就像是在一个环境背景中。
实现skybox最常见的方法是制作一个立方体,对其应用纹理,从内部绘制它。在立方体的每一侧放置一个纹理(使用纹理坐标),看起来像地平线上的某个图像。使用天空球体(sky sphere)或天空圆顶(sky dome)也是比较常见的。只需创建一个立方体或球体,应用一个纹理,将其标记为THREE.BackSide,这样我们渲染的是内部而不是外部,然后直接或类似地将其放置在上面的场景中,或者,创建两个场景,一个特殊的场景来绘制skybox/sphere/dome,另一个普通的场景来绘制其他所有内容。使用普通的远景相机来绘制,不需要正交照相机。
实现天空盒的另外一个方法是使用Cubemap,立方体贴图是一种特殊的纹理,它有六个面。它不使用标准纹理坐标,而是使用从中心向外的方向来决定如何获得颜色。要使用它们,我们使用THREE.CubeTextureLoader()加载它们,然后将其用作场景的背景:
最新评论
- 相关文章
WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
使用HTML5 Canvas实现的界面元素截屏功能
HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...
WebVR简介和常用资源链接
什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...
Three.js入门教程2 - 着色器(上)
CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
WebGL入门教程5 - 详解纹理滤镜(Texture Filter)
WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
这个参数用来处理当对象出现缩放时,纹理如何处理中间...如何使用WebGL创建一个逼真的下雨动画
之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...
如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合
如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce...如何使用CSS3/SCSS实现逼真的车窗雨滴效果
在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop
更多...