ThingOrigin.js

场景参数 ​

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

场景参数结构 ​

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

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

params-自定义参数 ​

javascript
// 数据库参数（缓存模型）
indexedDB: {
  dataBaseName: "",// 数据库名
  tableName: "",// 表名
},
// 加载器参数(此参数非必要不修改)
loader: {
  draco: 'https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/libs/draco/gltf/',
  ktx2: 'https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/libs/basis/',
}
//资源访问路径
resource: {
  serverAddress: "http://124.70.30.193:8084", // 服务器地址
  model: "http://124.70.30.193:8084/model2/load/ae5636a6-99f4-4780-9e3d-7affeb1c62da", // 服务器地址
  font_Microsoft: "http://124.70.30.193:8084/model2/load/Microsoft.json",
},

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

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

loader为模型加载器参数，用于加载模型。注：此参数非必要不修改

参数名说明类型必填默认值
dracodracoString是-
ktx2ktx2String是-

resource为资源访问路径参数。

参数名说明类型必填默认值
serverAddress服务器地址String是-
model模型地址String是-
font_Microsoft文字地址String是-

scene-场景参数 ​

javascript
// 渲染质量参数
renderQuality: {
  alpha: true,// 是否启用alpha通道
  autoClear: true,// 是否启用自动清除
  antialias: true, // 是否启用抗锯齿
  shadowMap: {
    enabled: true, // 是否启用阴影
  },
  // 色调映射参数
  toneMapping: {
    type: "ReinhardToneMapping",// 类型
    typeList: [
      "NoToneMapping", //无色调映射，直接输出线性颜色。
      "LinearToneMapping", //线性色调映射，将线性颜色映射到显示器的范围。
      "ReinhardToneMapping", //Reinhard色调映射，模拟人眼对亮度的感知。
      "CineonToneMapping", //Cineon色调映射，模拟电影胶片的色调映射。
      "ACESFilmicToneMapping", //ACES Filmic色调映射，模拟电影和电视的色调映射。
    ],
  },
},
// 性能监控参数
stats: {
  show: false,// 是否启用
  // 监控模式 0:画面每秒传输帧数（fps）  1：画面渲染的时间
  mode: 0,
},
// 环境光参数
environment: {
  type: "roomEnvironment",// 环境光类型
  typeList: [
    "roomEnvironment", //环境光
    "EquirectangularReflectionMapping", // 经纬线映射贴图
  ],
  EquirectangularReflectionMappingConfig: {
    url: "",// 贴图url,类型为EquirectangularReflectionMapping时此值必填
  },
},
// 背景
background: {
  type: "sky", // 类型（color:颜色，img:图片，sky:天空盒，workshop:工厂，cubeMap:环境贴图）
  // 颜色
  color: {
    alpha: 0, // 透明度 取值范围0~1
    color: "#944",// 背景颜色
  },
  // 图片
  img: {
    url: "",// 图片url，类型为img时此值必填
  },
  // 天空盒
  sky: {
    color: {// 天空盒颜色 
      top: "#86b6f5", 
      line: "#ffffff", 
      bottom: "#999999" 
    }, 
    params: {
      radius: 5000, // 半径
      widthSegments: 32, // 宽度分段数
      heightSegments: 15, // 高度分段数
      skyCenter: [0, 0, 0], // 天空盒中心点
    },
  },
  // 工厂
  workshop: {
    url: "public/models/workshop.glb",// 工厂模型url
    modelType: "glb",// 模型类型
  },
  // 立方体贴图
  cubeMap: {
    url: [// 立方体贴图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",
    ],
},
},
// 地面
ground: {
  active: true,// 是否显示
  // 基础信息
  base: {
    width: 10000,// 宽度
    height: 10000,// 高度
  },
  // 材质
  material: {
    type: "color",// 材质类型(color: 颜色,image: 图片)
    // 颜色材质参数
    color:{
      color: "#eee",// 颜色
      opacity: 1,// 透明度 0-1
    },
    // 图片材质参数
    image: {
      url: "/public/image/ground.jpg",// 图片地址
      repeat: {
        width: 1000,// 重复宽度
        height:1000// 重复高度
      }
    },
  },
},
//雾
fog: {
  show: false,// 是否启用
  cameraView: false, // 相机附近视野清晰
  color: "#fff",// 雾颜色
},

camera-相机参数 ​

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

lights-光源参数 ​

可以给场景添加多个光源

javascript
lights: [
  {
    name: "light1",// 光源名称
    type: "AmbientLight",// 光源类型-环境光
    color: "#fff",// 颜色
    intensity: 1,// 强度 0-1
    visible: true,// 可见性
    position: {// 光源位置
      x: 150,
      y: 150,
      z: 150,
    },
  },
  {
    name: "light3",
    type: "DirectionalLight",// 光源类型-平行光
    color: "#fff",
    intensity: 1,
    visible: true,
    position: {
      x: -150,
      y: 150,
      z: 150,
    },
  },
],

controls-控制器参数 ​

可以添加多个控制器

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

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

helper-辅助参数 ​

javascript
// 坐标轴
axes: {
  active: true,// 是否启用
  length: 60,// 轴长度
},
// 网格
grid: {
  active: true,// 是否启用
  size: 150,// 网格大小
  divisions: 30,// 网格分段数
  centerLineColor: "black",// 中心线颜色
  gridColor: "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: 1.5, // 泛光的强度 0.1 - 10
  radius: 1, // 泛光散发的半径 0 - 2
  threshold: 0.8, // 泛光的光照强度阈值 0 - 1
},

physicsSim-物理引擎参数 ​

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

modelList-模型列表参数 ​

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