digine_view

文档版本

| 版本 | 日期 | 作者 | 说明 | | :----: | :--------: | :--: | :--: | | 0.0.40 | 2023-09-07 | | |

使用安装

npm i digine_view

使用示例

// 需要多增加一层,防止元素定位异常
<div id="3d" class="dDom" style="width: 100%; height: 100%;position: relative"></div>;

//	导入包
import { DigineView } from 'digine_view';

//	初始化窗口
// '3d'为可视化窗口id
let digineView: DigineView = new DigineView('3d', {
  ambientLightColor: 0xff0000,
  ambientLightIntensity: 0.5,
  backgroundColor: 0xb9d3ff,
  showGridHelper: false,
  showAxesHelper: false,
  showTransformControls: false,
});

初始化配置项

export interface IInitOption {
  /**
   * 环境光颜色
   */
  ambientLightColor?: number;
  /**
   * 环境光强度
   */
  ambientLightIntensity?: number;
  /**
   * 方向光颜色
   */
  directLightColor?: number;
  /**
   * 方向光强度
   */
  directLightIntensity?: number;
  /**
   * 是否显示影子
   */
  showShadow?: boolean;
  /**
   * 是否显示地板平面
   */
  showGround?: boolean;
  /**
   * 背景颜色
   */
  backgroundColor?: number;
  /**
   * 天空盒
   */
  skyBox?: string[];
  /**
   * 显示网格
   */
  showGridHelper?: boolean;
  /**
   * 显示坐标轴
   */
  showAxesHelper?: boolean;
  /**
   * 显示变换控制器
   */
  showTransformControls?: boolean;
  /**
   * 是否可以平移
   */
  canTranslate?: boolean;
  /**
   * 是否可以缩放
   */
  canZoom?: boolean;
  /**
   * 显示ViewHelper
   */
  showViewHelper?: boolean;
  /**
   * 是否可以焦点查看
   */
  canFocusView?: boolean;
  /**
   * 是否可以切换相机类型
   */
  canSwitchCameraType?: boolean;
}

默认配置项

const defaultOpt: IInitOption = {
  ambientLightColor: 0xffffff,
  ambientLightIntensity: 0.5,
  backgroundColor: 0x9999ff,
  showGridHelper: false,
  showAxesHelper: true,
  showTransformControls: true,
  directLightColor: 0xffffff,
  directLightIntensity: 1,
  showShadow: true,
  showGround: true,
  skyBox: null,
  canZoom: true,
  canTranslate: true,
  showViewHelper: true,
  canFocusView: true,
  canSwitchCameraType: true,
};