场景背景

在场景初始化时，通过设置初始化的第二个参数对象中的 background 属性来自定义不同的场景背景。

以下列举了一些我们常用的场景背景参数：

• 近地天空盒 enableSkybox
• 地面网格 enableGrid
• 空间背景色 backgroundColor
• 空间背景图|背景渐变 backgroundImage

1. background 属性参数

1.1 近地天空盒

通过enableSkybox的值来判断是否打开近地天空盒。 参数定义如下：

interface Background {
  // 近地天空盒
  enableSkybox: boolean;
}

1.2 地面网格

通过enableGrid的值来判断是否打开地面网格。 参数定义如下：

interface Background {
  // 地面网格
  enableGrid: boolean;
}

1.3 空间背景色

通过backgroundColor的值来设置自定义背景颜色。

1.3.1 backgroundColor数据结构

interface Background {
  // 空间背景色
  backgroundColor: Color;
}

1.3.2 Color数据结构

type Color = [number, number, number, number] | string

• 当color为数组时，分别对应为 r, b, g, alpha。
• 当color为字符串时，可以设置如下形式的值：
  • 十六进制字符串 "#00FF00"
  • 表示颜色名字的字符串 "green"
  • "hsl(120, 100%, 50%)"
  • "hsla(120, 100%, 50%, 0.5)"
  • "rgba(0, 255, 0, 0.5)"
  • "rgb(0, 255, 0)"

1.4 空间背景图|背景渐变

通过backgroundImage的值来设置自定义背景渐变色和环境背景图， 其参数定义如下：

interface Background {
  // 空间背景图|背景渐变
  backgroundImage: {
    image: string;
    size: string;
    position: string;
  };
}

一般有两种使用形式，代码示例如下：

• 图片

    backgroundImage: {
      image: 'url(https://cdn.hb6oss.xstore.ctyun.cn/img/01.jpg)',// 背景图片地址
      size: '100% 100%',// 图片大小
      position: '0 0',// 图片铺放位置
    }
  

• 颜色渐变

    backgroundImage: {
      image: 'linear-gradient(135deg, rgba(161, 196, 253, 0.5) , rgba(13, 67, 66, 1))', // 渐变的背景图层
      size: '100% 100%',// 图片大小
      position: '0 0',
    }
  

2. 注意事项

设置场景背景，无论是 local 或 global 模式，场景都是有自己的默认的渐变背景色。

代码示例如下：

const scene = new ubm.Scene('app', {
  viewingMode: 'global',
  background: {
    // 需要关闭近地天空盒
    enableSkybox: false,
    backgroundImage: {
      //设置空间背景渐变
      image: 'linear-gradient(blue, pink)',
      size: '100% 100%',
      position: '0 0',
    }
  }
})