three.js添加场景背景和天空盒(skybox)

techbrood 发表于 2019-11-11 18:25:03

标签: three.js, webgl, skybox

- +

本文我们介绍在three.js中如何给3D场景添加背景,我们有3种方式来实现这个目的。

  1. 通过html添加背景元素,这实际上一个2D背景;

  2. 在three.js加载图片并设置为scene.background,这种方法的好处是可以被后处理(post-processing)效果所影响;

  3. 在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()加载它们,然后将其用作场景的背景:




possitive(4) negative(1) views2009 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 3D感知和建模关键硬件技术:双目、3D结构光和TOF

    无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...

  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...

  • 使用CSS3 box-decoration-break特性实现多行文本样式

    当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
    按照规范...

  • 前端开发框架技术选型:Angular2 VS React VS jQuery

    Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...

  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...

  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • WebGL入门教程5 - 详解纹理滤镜(Texture Filter)

    WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
    这个参数用来处理当对象出现缩放时,纹理如何处理中间...

  • 如何使用WebGL实现空气高温热变形动画特效

    我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...

  • 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...

  • 如何使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...

  • SVG过滤器feColorMatrix矩阵变换效果用法详解

    在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...

  • 使用CSS3实现流星雨动画教程

    很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...

  • 更多...