ThingOrigin.js

场景参数 ​

初始化场景时，可选择传入场景参数 sceneParams

场景参数结构 ​

javascript
sceneParams: {
  // 自定义参数
  params: {
    indexedDB: {...},
    resource: {...},
  },
  // 场景参数
  scene: {
    renderQuality: {...},
    stats: {...},
    environment: {...},
    background: {...},
    ground: {...},
    fog: {...},
  },
  // 相机参数
  camera: {...},
  // 光源参数
  lights: [...],
  // 控制器参数
  controls: {
    orbit: {...},
    drag: {...},
    raycaster: {...},
    transform: {...},
    pointerLock: {...},
  },
  // 辅助工具参数
  helper: {
    axes: {...},
    view: {...},
    grid: {...},
  },
  // 后期处理参数
  effectComposer: {
    outlinePass: {...},
    bloomPass: {...},
  },
  // 物理引擎参数
  physicsSim: {...},
  // 模型列表
  modelList: [...],
  // 标记列表
  markerList: [...]
}

下面分别介绍各个参数具体含义。

params-自定义参数 ​

javascript
// 数据库参数（缓存模型）
indexedDB: {
  dataBaseName: 'ThingOrigin3D', // 数据库名
  tableName: 'ThingOrigin3D' // 表名
},
//资源访问路径
resource: {
  serverAddress: 'https://124.70.30.193:8443', // 服务器地址
  model: '/model2/load/ae5636a6-99f4-4780-9e3d-7affeb1c62da', // 模型访问地址
  font_Microsoft: '/model2/load/Microsoft.json', // 字体访问地址
  draco: '/file/content?path=gltf/', // draco访问地址
  ktx2: 'file/content?path=basis/', // ktx2访问地址
  rhino3dm: '/file/content?path=rhino3dm/', // rhino3dm访问地址
  physxWasm: '/file/loadFile/43' // physxWasm访问地址
}

indexedDB 为数据库参数，用于缓存模型。

参数名说明类型必填默认值
dataBaseName数据库名String是ThingOrigin3D
tableName表名String是ThingOrigin3D

resource 为资源访问路径参数。

参数名说明类型必填默认值
serverAddress服务器地址String是-
model模型访问地址String是-
font_Microsoft字体访问地址String是-
dracodraco 访问地址String是-
ktx2ktx2 访问地址String是-
rhino3dmrhino3dm 访问地址String是-
physxWasmphysxWasm 访问地址String是-

scene-场景参数 ​

javascript
// 渲染质量参数
renderQuality: {
  alpha: true, // 是否启用alpha通道
  autoClear: true, // 是否启用自动清除
  antialias: true, // 是否启用抗锯齿
  logarithmicDepthBuffer: true, // 解决穿模，精度0.001
  shadowMap: {
    enabled: false // 是否启用阴影
  },
  // 色调映射参数
  toneMapping: {
    type: 'ACESFilmicToneMapping', // 类型
    exposure: 1, // 曝光度
    typeList: [
      'NoToneMapping', // 无色调映射，直接输出线性颜色
      'LinearToneMapping', // 线性色调映射，将线性颜色映射到显示器的范围
      'ReinhardToneMapping', // Reinhard色调映射，模拟人眼对亮度的感知
      'CineonToneMapping', // Cineon色调映射，模拟电影胶片的色调映射
      'ACESFilmicToneMapping' // ACES Filmic色调映射，模拟电影和电视的色调映射
    ]
  }
},
// 性能监控参数
stats: {
  active: false, // 是否显示性能监控
  mode: 0 // 监控模式 0:画面每秒传输帧数（fps） 1：画面渲染的时间
},
// 环境光参数
environment: {
  active: true, // 是否启用环境光
  type: 'roomEnvironment', // 环境光类型
  typeList: [
    'roomEnvironment', // 室内环境
    'EquirectangularReflectionMapping', // 经纬线映射贴图
    'HDR' // HDR环境贴图
  ],
  EquirectangularReflectionMappingConfig: {
    url: '' // 贴图url，类型为EquirectangularReflectionMapping时此值必填
  },
  HDRConfig: {
    background: false, // 是否作为背景
    url: '/file/loadFile/35' // HDR图片地址
  },
  intensity: 1 // 环境光强度
},
// 背景
background: {
  type: 'sky', // 类型（sky:天空盒;color:颜色;img:图片;workshop:工厂;cubeMap:环境贴图）
  // 颜色
  color: {
    alpha: 1, // 透明度 取值范围0~1
    color: '#000000' // 背景颜色
  },
  intensity: 1, // 强度
  // 天空盒
  sky: {
    color: { top: '#86b6f5', line: '#ffffff', bottom: '#999999' }, // 天空盒颜色
    params: {
      spaceType: 'world', // 渐变空间类型：'world'（世界空间，默认）或 'screen'（屏幕空间）
      radius: 2500, // 半径
      widthSegments: 32, // 宽度分段数
      heightSegments: 15, // 高度分段数
      skyCenter: { x: 0, y: 0, z: 0 } // 天空盒中心点
    }
  },
  // 图片
  img: {
    url: '/public/img/sky.jpg'
  },
  // 立方体贴图
  cubeMap: {
    url: [
      '/public/cubmap/pos-x.jpg',
      '/public/cubmap/neg-x.jpg',
      '/public/cubmap/pos-y.jpg',
      '/public/cubmap/neg-y.jpg',
      '/public/cubmap/pos-z.jpg',
      '/public/cubmap/neg-z.jpg'
    ]
  },
  // 工厂
  workshop: {
    id: 7243,
    base: {
      modelUrl: '/model2/loadFileAsId/114783024'
    },
    modelType: 'glb'
  }
},
// 地面
ground: {
  active: true, // 是否显示
  // 基础信息
  base: {
    width: 5000, // 宽度
    height: 5000 // 高度
  },
  // 材质
  material: {
    type: 'color', // 材质类型(color: 颜色,image: 图片)
    doubleSide: true, // 是否双面渲染
    // 颜色材质参数
    color: {
      color: '#eee', // 颜色
      opacity: 1 // 透明度 0-1
    },
    // 图片材质参数
    image: {
      url: 'https://124.70.30.193:8443/image/download/grass.jpg', // 图片地址
      repeatX: 1000, // X方向重复次数
      repeatY: 1000 // Y方向重复次数
    }
  }
},
// 雾
fog: {
  active: false, // 是否启用雾效，关闭雾效可避免黑色雾让场景变暗
  cameraView: true, // 相机附近视野清晰
  color: '#9aa3ad' // 雾颜色，浅灰色雾
}

renderQuality 参数说明：

参数名说明类型必填默认值
alpha是否启用 alpha 通道Boolean否true
autoClear是否启用自动清除Boolean否true
antialias是否启用抗锯齿Boolean否true
logarithmicDepthBuffer解决穿模问题Boolean否true
shadowMap.enabled是否启用阴影Boolean否false
toneMapping.type色调映射类型String否ACESFilmicToneMapping
toneMapping.exposure曝光度Number否1

stats 参数说明：

参数名说明类型必填默认值
active是否显示性能监控Boolean否false
mode监控模式：0=FPS，1=渲染时间Number否0

environment 参数说明：

参数名说明类型必填默认值
active是否启用环境光Boolean否true
type环境光类型String否roomEnvironment
EquirectangularReflectionMappingConfig.url经纬线映射贴图 URLString条件-
HDRConfig.backgroundHDR 是否作为背景Boolean否false
HDRConfig.urlHDR 图片地址String条件-
intensity环境光强度Number否1

background 参数说明：

参数名说明类型必填默认值
type背景类型String否sky
color.alpha透明度 0~1Number否1
color.color背景颜色String否#000000
intensity强度Number否1
sky.params.radius天空盒半径Number否2500
img.url背景图片地址String条件-
workshop.id工厂模型 IDNumber条件-

ground 参数说明：

参数名说明类型必填默认值
active是否显示地面Boolean否true
base.width地面宽度Number否5000
base.height地面高度Number否5000
material.type材质类型（color/image）String否color
material.doubleSide是否双面渲染Boolean否true
material.color.color颜色材质颜色String条件#eee
material.image.url图片材质地址String条件-
material.image.repeatXX 方向重复次数Number条件1000
material.image.repeatYY 方向重复次数Number条件1000

fog 参数说明：

参数名说明类型必填默认值
active是否启用雾效Boolean否false
cameraView相机附近视野清晰Boolean否true
color雾颜色String否#9aa3ad

camera-相机参数 ​

javascript
type: 'PerspectiveCamera', // 相机类型（PerspectiveCamera：透视相机；OrthographicCamera：正交相机）
// 相机位置
position: {
  x: 0,
  y: 2,
  z: 20
},
// 相机中心点
lookAt: {
  x: 0,
  y: 0,
  z: 0
},
// 透视相机参数
perspective: {
  fov: 45, // 摄像机视锥体垂直视野角度
  near: 0.1, // 摄像机视锥体近端面
  far: 5000 // 摄像机视锥体远端面
}

camera 参数说明：

参数名说明类型必填默认值
type相机类型String否PerspectiveCamera
position.x相机 X 位置Number否0
position.y相机 Y 位置Number否2
position.z相机 Z 位置Number否20
lookAt.x目标点 X 位置Number否0
lookAt.y目标点 Y 位置Number否0
lookAt.z目标点 Z 位置Number否0
perspective.fov视锥体垂直视野角度Number否45
perspective.near视锥体近端面Number否0.1
perspective.far视锥体远端面Number否5000

lights-光源参数 ​

可以给场景添加多个光源

javascript
lights: [
    {
        name: 'factory_hemisphere', // 光源名称
        type: 'HemisphereLight', // 半球光
        color: '#f0f0ee', // 天空颜色，中性天光，避免整体偏蓝
        groundColor: '#9a948c', // 地面颜色，地面反弹光回到中性灰
        intensity: 1.0, // 强度
        position: { x: 0, y: 220, z: 0 }, // 位置
        visible: true // 可见性
    },
    {
        name: 'factory_ambient',
        type: 'AmbientLight', // 环境光
        color: '#f7f5f0', // 颜色
        intensity: 0.58, // 强度
        visible: true
    },
    {
        name: 'factory_main_sun',
        type: 'DirectionalLight', // 平行光
        castShadow: true, // 是否产生阴影
        color: '#fffaf2', // 主光改为中性白
        intensity: 2.4, // 强度
        position: { x: 150, y: 250, z: 120 },
        visible: true
    },
    {
        name: 'factory_fill_directional',
        type: 'DirectionalLight',
        castShadow: false,
        color: '#fff4e8',
        intensity: 1.0,
        position: { x: -130, y: 110, z: -90 },
        visible: true
    },
    {
        name: 'factory_top_fill',
        type: 'DirectionalLight',
        castShadow: false,
        color: '#fff8ee', // 额外顶补光，模拟厂房顶棚泛光
        intensity: 1.2,
        position: { x: 0, y: 300, z: 0 },
        visible: true
    }
]

光源类型说明：

类型说明
HemisphereLight半球光，模拟天空和地面的环境光照
AmbientLight环境光，均匀照亮场景中的所有物体
DirectionalLight平行光，模拟太阳光等远距离光源

光源公共参数：

参数名说明类型必填
name光源名称String是
type光源类型String是
color光源颜色String是
intensity光照强度Number否
visible是否可见Boolean否
position光源位置Object否
castShadow是否产生阴影Boolean否

controls-控制器参数 ​

可以添加多个控制器

javascript
// 智能相机控制器
orbit: {
  active: true, // 是否启用
  autoRotate: false, // 自动旋转
  autoRotateSpeed: 0.5, // 旋转速度
  enableDamping: true, // 惯性
  dampingFactor: 0.5, // 阻尼惯性
  enableZoom: true, // 是否启用滚轮缩放
  minDistance: 1, // 最小距离
  maxDistance: 2500 // 最大距离
},
// 拖拽控制器
drag: {
  active: false // 是否启用
},
// 射线投射控制器
raycaster: {
  active: true, // 是否启用
  // 鼠标事件
  events: {
    click: true, // 点击事件
    mousemove: true // 移动事件
  }
},
// 模型变换控制器
transform: {
  active: false // 是否启用
},
// 人工漫游控制器
pointerLock: {
  speed: 1000 // 移动速度
}

controls 参数说明：

参数名说明类型必填默认值
orbit.active是否启用智能相机控制器Boolean否true
orbit.autoRotate是否自动旋转Boolean否false
orbit.autoRotateSpeed自动旋转速度Number否0.5
orbit.enableDamping是否启用惯性Boolean否true
orbit.dampingFactor阻尼惯性系数Number否0.5
orbit.enableZoom是否启用滚轮缩放Boolean否true
orbit.minDistance最小距离Number否1
orbit.maxDistance最大距离Number否2500
drag.active是否启用拖拽控制器Boolean否false
raycaster.active是否启用射线投射控制器Boolean否true
raycaster.events.click是否启用点击事件Boolean否true
raycaster.events.mousemove是否启用鼠标移动事件Boolean否true
transform.active是否启用模型变换控制器Boolean否false
pointerLock.speed人工漫游移动速度Number否1000

如果想给模型设置变换器模式（平移，旋转和缩放），请参考 API 文档中的 TControl 模块的 setTransformMode。

helper-辅助参数 ​

javascript
// 坐标轴
axes: {
  active: false, // 是否启用
  length: 60 // 轴长度
},
// 视图辅助器
view: {
  active: true // 是否启用
},
// 网格
grid: {
  active: false, // 是否启用
  size: 150, // 网格大小
  divisions: 30, // 网格分段数
  centerLineColor: 'black', // 中心线颜色
  gridColor: 'black' // 网格颜色
}

helper 参数说明：

参数名说明类型必填默认值
axes.active是否启用坐标轴辅助Boolean否false
axes.length坐标轴长度Number否60
view.active是否启用视图辅助器Boolean否true
grid.active是否启用网格Boolean否false
grid.size网格大小Number否150
grid.divisions网格分段数Number否30
grid.centerLineColor中心线颜色String否black
grid.gridColor网格线颜色String否black

effectComposer-后期处理参数 ​

javascript
// 高亮
outlinePass: {
  edgeStrength: 3, // 边缘强度 0.1 - 20
  edgeGlow: 1, // 发光 0~5
  edgeThickness: 6, // 光晕粗 1 - 20
  pulsePeriod: 1, // 闪烁周期 0 - 10，0表示不闪烁
  usePatternTexture: false, // 是否使用图案纹理
  visibleEdgeColor: 'yellow', // 可见边缘颜色
  hiddenEdgeColor: '#190a05' // 隐藏边缘颜色
},
// 泛光
bloomPass: {
  strength: 0.05, // 泛光的强度 0.1 - 10
  radius: 0.4, // 泛光散发的半径 0 - 2
  threshold: 0.98 // 泛光的光照强度阈值 0 - 1
}

effectComposer 参数说明：

参数名说明类型必填默认值
outlinePass.edgeStrength边缘强度（0.1 - 20）Number否3
outlinePass.edgeGlow发光强度（0 - 5）Number否1
outlinePass.edgeThickness光晕粗细（1 - 20）Number否6
outlinePass.pulsePeriod闪烁周期（0 - 10），0=不闪烁Number否1
outlinePass.usePatternTexture是否使用图案纹理Boolean否false
outlinePass.visibleEdgeColor可见边缘颜色String否yellow
outlinePass.hiddenEdgeColor隐藏边缘颜色String否#190a05
bloomPass.strength泛光强度（0.1 - 10）Number否0.05
bloomPass.radius泛光半径（0 - 2）Number否0.4
bloomPass.threshold光照强度阈值（0 - 1）Number否0.98

physicsSim-物理引擎参数 ​

javascript
physicsSim: {
  open: true, // 是否开启物理引擎
  gravity: { // 重力
    x: 0,
    y: -9.82,
    z: 0
  }
}

physicsSim 参数说明：

参数名说明类型必填默认值
open是否开启物理引擎Boolean否true
gravity.x重力 X 分量Number否0
gravity.y重力 Y 分量Number否-9.82
gravity.z重力 Z 分量Number否0

modelList-模型列表参数 ​

初始化场景时，用户可以传入模型列表参数，直接加载模型，具体参数请参考 模型参数。

markerList-标记列表参数 ​

初始化场景时，用户可以传入标记列表参数，具体参数请参考 标记参数。