配置
配置
Viewer对象初始化提供了灵活度非常高的配置参数，可在初始化时设置场景、渲染器、相机、交互、后处理、光源、辅助器、调试等相关参数，方便JSON导入和导出。
// 实例化一个Viewer对象，option为配置项
var viewer = new VT.Viewer(option);
一个完整的Viewer实例化参数配置对象如下：
{
// 三维程序挂载的DIV对象，如果不提供，则默认挂载到body对象上
container: "",
// 初始化视角
view: {...},
// 场景
scene: {...},
// 渲染器
renderer: {...},
// 交互
interact: {...},
// 调试
debugger: {...},
}
挂载容器
挂载容器是指三维应用渲染器的挂载HTMLElement对象，可以设置为空、HTML查询字符串、HTMLElement对象：
- 当设置为空时会自动挂载到body对象上；
- 设置为HTML查询字符串时，程序为默认查询，如果查询不到，依然挂载到body对象上；
{
container: "#container"
}
初始化视角
初始化视角或视点，是指相机的位置和中心点的位置，通常用于保存三维应用的某个特定视角，如主视图、内部视图等，是一个JSON对象。初始化视角可调用viewer方法获取，不推荐直接手动设置数值。
通过交互界面调整到适合的视角时，可调用viewer.getView方法获取视角值，以下是方法调用后的结果输出示例：
{
view: {
// 相机位置
"position": [
6.2791192837739676,
4.285399942474186,
5.194127521520281
],
// 中心点
"center": [
0,
0,
0
],
"far": 100000,
"near": 0.05,
"aspect": null,
"fov": 60,
"isOrtho": false,
"zoom": 1,
// 相机旋转角度
"rotation": [
-0.6898280801202505,
0.7504741260592082,
0.5125187807862368,
"XYZ"
]
}
}
场景配置
场景配置提供了场景背景、环境贴图、辅助轴线、辅助网格、默认光源的配置。
场景背景
场景背景是指三维主场景的背景，可设置为透明背景、颜色背景、天空盒子背景、拉伸图片背景、椭圆贴图背景、环境贴图背景不同类型的背景。
默认背景为颜色值为#333333的颜色背景。
透明背景
透明背景可将三维场景和页面上的DIV元素和样式相融合，更好地发挥CSS样式设置。
// Viewer初始化时的场景背景参数
{
scene: {
background: null,
}
}
或
viewer.scene.setBackground(null);
颜色背景
颜色背景将颜色做为主场景的背景，一般在独立显示某个室内场景、元素时使用。
// Viewer初始化时的场景背景参数
{
scene: {
background: "#F2F2F2",
}
}
或
viewer.scene.setBackground("#F2F2F2");
天空盒子背景
天空盒子是常见的室外场景背景，如天晴、多云、夜晚的呈现等，引擎默认内置的天空盒子ID：cloudy、cloudy2、dark、midnight、milkyway、overcast、universe
| id | 备注 |
|---|---|
| cloudy | 多云 |
| cloudy2 | 多云2 |
| dark | 暗黑 |
| midnight | 夜晚 |
| milkyway | 银河 |
| overcast | 阴天 |
| universe | 星空宇宙 |
// Viewer初始化时的场景背景参数
{
scene: {
background: {
skyboxPath: "./resources/skybox/cloudy/"
},
}
}
或
viewer.scene.setBackground({
skyboxPath: "./resources/skybox/cloudy/"
});
椭圆贴图背景
椭圆贴图背景类似于天空盒子，但不同的是，它是将远景制作成一张宽幅图片纹理，贴在椭圆几何体上，由于椭圆的半径足够大，人眼视觉看上去像天空盒子一样。
// Viewer初始化时的场景背景参数
{
scene: {
background: {
isSky: true,
image: "./resources/texture/skybox.jpg"
},
}
}
或
viewer.scene.setBackground({
isSky: true,
image: "./resources/texture/skybox.jpg"
});
拉伸图片背景
拉伸图片背景指定了一个图片为整个渲染容器的背景图片，填充时会拉伸。
// Viewer初始化时的场景背景参数
{
scene: {
background: {
image: "./images/skybox.jpg"
},
}
}
或
viewer.scene.setBackground({
image: "./images/skybox.jpg"
});
环境贴图背景
环境贴图背景使用HDR文件来渲染场景周边环境，类似于全景相机
// Viewer初始化时的场景背景参数
{
scene: {
background: {
hdr: "./hdr/skybox.hdr"
},
}
}
或
viewer.scene.setEnvironment ({
hdr: "./hdr/skybox.hdr"
});
雾化效果
场景雾化效果是在设置最近、最远距离后，离中心点越远的物体越模糊，场景雾化效果默认参数如下，设置visible为true时可生效，具体效果仍需要设置雾颜色、最近距离、最远距离三个参数。
{
scene: {
fog: {
visible: false, // 默认不可见
color: "#ffffff", // 颜色
near: 10, // 代表从该距离起物体开始受雾效果影响
far: 30, // 代表从该距离之后物体完全看不清
},
}
}
或
viewer.scene.setFog({
visible: true, // 默认不可见
color: "#ffffff", // 颜色
near: 10, // 代表从该距离起物体开始受雾效果影响
far: 30, // 代表从该距离之后物体完全看不清
})
默认光源
如果不禁用默认光源，场景会初始化几种类型的光源，包括环境光、半球光、镜头光、CSM系统，默认光源参数如下，默认光源将提供基础光照效果。
不同的场景，光源各项参数需要不断调整才能达到理想中的效果，引擎内置的光源仅提供基础光照，在了解光源对象和光源如何配置后，建议禁用内置光源。
{
scene: {
defaultLights: {
// 是否启用默认光源，默认为启用
enable: true,
// 平行光系统
csm: {
// 默认开启
enable: true,
// 最远距离
maxFar: 100,
// 层级数
cascades: 4,
// 光源颜色
lightColor: "#FFFFFF",
// 光源强度
lightIntensity: 0.15,
// 光方向
lightDirection: [-0.577, -0.577, 0.577]
},
// 环境光
ambientLight: {
// 强度
intensity: 0.8,
// 颜色
color: 0xffffff
},
// 半球光
hemisphereLight: {
// 强度
intensity: 0.5,
// 顶部光线颜色
color: 0xffffff,
// 底部光线颜色
groundColor: 0x888888
},
// 镜头跟随平行光
secondaryLight: {
// 强度
intensity: 0.2,
// 颜色
color: 0xFFFFFF,
// 透明度
alpha: 0.5,
// 方位
beta: 0.866
},
},
}
}
环境光
HDR环境贴图可以通过 Scene 的初始化参数和 scene.setEnvironment 方法设置，可以通过将纹理贴图到模型上面来模拟环境纹理反光。
HDR全称High-Dynamic Range（高动态光照渲染），通过HDR，显示器或相机可以很好的表现超出其亮度范围的图像，也可以简单理解为HDR能大幅提高画面细节的明暗对比度。直白点讲，HDR是指一个图像中最亮处和最暗处之间的比值，能够让图像明亮的地方更亮，而黑色的地方更黑暗深邃。
{
scene: {
env: "./hdrs/3.hdr"
}
}
或
viewer.scene.setEnvironment("./hdr/3.hdr");
辅助网格
辅助网格在初始搭建场景，尤其是小场景时非常有帮助，它将辅助你拖拽对象位置，调整布局，辅助网格默认参数如下，可设置visible为true，查看网格对象。
{
scene: {
helper: {
grid: {
// 网格可见
visible: false,
// 网格大小
size: 200,
// 网格数量
divisions: 200,
// 颜色1
color1: "#1b1b1b",
// 颜色2
color2: "#050505",
// 位置
position: [0, 0, 0],
}
}
}
}
辅助坐标轴
辅助坐标轴将在[0,0,0]点位置自动创建一个X、Y、Z方向的轴线，辅助模型和对象的位置调整，辅助坐标轴默认参数如下，可设置visible为true查看坐标轴。
{
scene: {
helper: {
axes: {
// 坐标轴可见
visible: false,
// 坐标轴长度
size: 2000,
}
}
}
}
渲染配置
渲染配置可以设置是否强制渲染、FPS帧率、后处理效果，默认配置如下：
{
renderer: {
// 强制渲染
"forceRender": true,
// 默认FPS帧率，当forceRender为false生效
"fps": 60,
// 后处理通道
"postEffect": {
// 是否允许，默认关闭
"enable": false,
// 光辉效果
"bloom": {
// 是否允许，默认关闭
"enable": false,
// 力度
"strength": 0.14,
// 半径
"radius": 0.4,
// 起点阈值
"threshold": 0.7
},
// 颜色调整
"colorCorrection": {
// 是否允许，默认关闭
"enable": false,
// 暴光度
"exposure": 0,
// 明度
"brightness": 0,
// 对比度
"contrast": 1,
// 饱和度
"saturation": 1,
// 伽马值
"gamma": 0.6
},
// 去锯齿
"FXAA": {
// 是否允许，当后处理允许时，默认开启
"enable": true
},
// 外轮廓
"outline": {
// 是否允许，当后处理欢和，默认开启
"enable": true,
// 边缘力度
"edgeStrength": 2,
// 边缘渐变
"edgeGlow": 1,
// 边缘厚度
"edgeThickness": 0.5,
// 闪烁周期，单位为秒
"pulsePeriod": 0,
// 可见边缘色
"visibleEdgeColor": "#ed2a2a",
// 隐藏边缘色
"hiddenEdgeColor": "#190a05"
}
}
}
}
强制渲染
渲染引擎默认情况下开启了强制渲染机制，调用了requestAnimationFrame方法循坏渲染器渲染，同一个场景在不同计算机环境和浏览器中的渲染帧率是不一样的，这种方式尽可能的保证三维应用所需资源和效果。
不同的三维应用在不同的访问环境下最终呈现的效果和性能不完全一样，因此，为了使应用保持一致的性能和效果，如果应用中默认没有动画，或者交互简单，可以关闭强制渲染。
FPS帧率
FPS是每秒刷新速度，默认为60，根据情况可以设置得更低，如30，只有当强制渲染关闭时，这个参数才会生效。
注意
根据项目实际情况总结，当FPS低于30时，会有明显卡顿。
后处理
后处理(Post Pocessing)通常是指应用到2d图像上的某种特效或者是滤镜。渲染引擎最终将三维场景渲染成一张2d图像呈现到屏幕上，一般来说，图像被直接渲染成 canvas 然后在浏览器中被展示，然而在结果被输出到 canvas 之前，我们也可以通过另外的一个 render target 应用一些后期效果，如颜色调整、光辉效果、模糊、图像锐化、单元格阴影、运动模糊等，这被称为 Post Processing，因为它发生在主场景渲染过程之后。
引擎内置了bloom、colorCorrection、outline、FXAA四种后处理组件，具体配置见上方配置项详情。