ThingOrigin.js

场景参数 ​

初始化场景时，可选择传入场景参数sceneParams，场景参数中包括params,scene,camera,views,lights,controls,helper,effectComposer,physicsSim等参数，下面分别介绍各个参数含义。

params-自定义参数 ​

javascript
  params: {
    // 数据库参数
    indexedDB: {
      dataBaseName: "ThingOrigin3D",// 数据库名
      tableName: "ThingOrigin3D",// 表名
    },
    // 加载器参数(此参数非必要不修改)
    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/',
    }
  },
  • indexDB : 数据库参数，包括数据库名和表名。
  • loader : 加载器参数，包括draco和ktx2。注：此参数非必要不修改

scene-场景参数 ​

javascript
  scene: {
    // 渲染质量
    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: "",
      },
    },
    // 背景
    background: {
      type: "sky", // 类型（sky:天空盒;color:颜色;img:图片）
      // 颜色
      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], // 天空盒中心点
        },
      },
      // 环境贴图
      cubeMap: {
        url: [
          "/static/img/SwedishRoyalCastle/px.jpg",// 正x
          "/static/img/SwedishRoyalCastle/nx.jpg",// 负x
          "/static/img/SwedishRoyalCastle/py.jpg",// 正y
          "/static/img/SwedishRoyalCastle/ny.jpg",// 负y
          "/static/img/SwedishRoyalCastle/pz.jpg",// 正z
          "/static/img/SwedishRoyalCastle/nz.jpg",// 负z
        ],
      },
    },
    //雾
    fog: {
      show: false,// 是否启用雾
      cameraView: false, // 相机附近视野清晰
      color: "#fff",// 雾颜色
    },
  },
  • renderQuality : 渲染质量参数，详见上述代码
  • stats : 性能监控，包括是否启用和模式
  • environment : 环境光，详见上述代码
  • background : 背景参数，包括三种类型：sky：天空盒；color：颜色；img：图片，具体每类参数详见上述代码
  • fog : 雾参数，包括是否启用，是否启用视野清晰和雾颜色三个参数

camera-相机参数 ​

javascript
  camera: {
    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,// 摄像机视锥体远端面
    },
  },
  • type : 相机类型，包括PerspectiveCamera：透视相机和OrthographicCamera：正交相机。
  • position : 相机位置。
  • lookAt : 相机中心点位置。
  • perspective : 透视相机参数，详见上述代码

lights-光源参数 ​

javascript
  lights: [
    {
      name: "light1",// 光源名称
      type: "AmbientLight",// 光源类型-环境光
      color: "#fff",// 颜色
      intensity: 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,
      },
    },
  ],

可以创建多个光源

  • name : 自定义光源名称。
  • type : 光源种类，包括AmbientLight：环境光；DirectionalLight：平行光。
  • color : 光源颜色。
  • intensity : 光源强度：0-1。
  • visible : 光源是否可见。
  • position : 光源位置。

controls-控制器参数 ​

javascript
  controls: {
    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, //是否启用人工漫游控制器
    },
  },

可以创建多个控制器

  • orbit : 相机控制器,具体参数见上述代码.
  • drag : 拖拽控制器。
  • raycaster : 鼠射线投射控制器，鼠标事件包括点击事件和移动事件。
  • transform : 模型变换控制器，如果想给模型设置变换器模式，请参考API文档中的TControl模块的setTransformMode。
  • pointerLock : 人工漫游控制器。

helper-辅助参数 ​

javascript
  helper: {
    // 坐标轴
    axes: {
      active: true,// 是否启用
      length: 60,// 轴长度
    },
    // 网格
    grid: {
      active: true,// 是否启用
      size: 150,// 网格大小
      divisions: 30,// 网格分段数
      centerLineColor: "black",// 中心线颜色
      gridColor: "black",// 网格颜色
    },
  },
  • axes : 坐标轴参数，包括是否启用和轴长度。
  • grid : 网格参数，包括是否启用、网格大小、网格分段数、中心线颜色和网格颜色。

effectComposer-后期处理参数 ​

javascript
  effectComposer: {
    // 高亮
    outlinePass: {
      edgeStrength: 3,// 边缘强度
      edgeGlow: 1, // 发光
      edgeThickness: 6, // 光晕粗
      pulsePeriod: 1, // 闪烁
      usePatternTexture: false, // true
      visibleEdgeColor: "yellow", // 边缘颜色
      hiddenEdgeColor: "#190a05",
    },
    // 泛光
    bloomPass: {
      strength: 1.5, // 泛光的强度
      radius: 1, // 泛光散发的半径
      threshold: 0.8, // 泛光的光照强度阈值
    },
  },
  • outlinePass : 高亮参数，具体参数见上述代码。
  • bloomPass : 泛光参数，具体参数见上述代码。

physicsSim-物理引擎参数 ​

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

modelList-模型列表参数 ​

初始化场景时，用户可以传入模型列表参数，具体参数见模型列表。