i3v-viewer

🔨 示例

<template>
  <div class="home" ref="home"></div>
</template>

<script>
import Viewer, {
  THREE,
  Plugin,
  GLTFLoader,
  Setting,
  Model,
  Transform,
  Point,
  ELoadType,
  EFormat,
  EControlType,
  ESourceType,
  ILoadMonitorInfo,
  IBtnInfo,
} from "i3v-viewer";

export default {
  mounted() {
    const settings = new Setting({
      camInitDirection: [-1, 1, 1],
      sceneBgColor: 0xffffff,
    });

    const viewer = new Viewer(this.$refs["home"], settings);

    const models = [
      new Model({
        id: "1",
        sourceType: ESourceType.url,
        url: `http://220.168.85.72:10000/_temp/models2/house.glb`,
        transforms: [
          new Transform({
            position: [0, 0, 0],
            rotation: [0, 0, 0],
            scale: [1, 1, 1],
          }),
        ],
      }),
    ];

    viewer.load(models);
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}
</style>

🔠 类型

Viewer 三维浏览器类

属性

属性名	类型	默认值	描述
renderer	THREE.WebGLRenderer	-	渲染器
scene	THREE.Scene	-	场景
camera	THREE.PerspectiveCamera	-	摄像头
directionalLight	THREE.DirectionalLight	-	平行光源
ambientLight	THREE.AmbientLight	-	环境光源
controls	OrbitControls	-	轨道控制器

构造方法

constructor(dom: HTMLElement, setting?: Setting);

• 参数 dom：需要加载 Viewer 的 dom 容器
• 参数 setting：(可选) 设置项

静态方法

static addPlugin(pluginClass: new () => T): string;

含义：为 Viewer 加入一个插件

• 参数 pluginClass：Plugin 插件父类的子类
• 返回值：标识本插件的唯一标识

static removePlugin(key: string): (new () => Plugin) | null;

含义：从 Viewer 去除一个插件

• 参数 key：插件的唯一标识

实例方法

1. load(models?: Array, format?: EFormat, beforeLoad?: (scene: THREE.Group, transform?: Transform) => THREE.Group): Promise;

含义：模型的加载方法，一次调用可加载多个模型，也可多次调用

• 参数 models：模型类对象的数组(默认值为空数组)
• 参数 format：(可选)模型格式(目前只支持 GLB)
• 参数 beforeLoad：在加载模型前的回调(如果启用本回调，将不再使用 models 中 transforms 的值，模型的位置、旋转、缩放均需由回调自行设置)

1. put(modelData: Array<THREE.Object3D> | THREE.Object3D = []): void;

含义：模型的加载方法，直接从外面传入 THREE.Group 的对象数组用于直接加载模型

• 参数 modelData：THREE.Group 对象或对象数组

1. on(eventName: string, fn: (data?: any) => void): void;

含义：监听事件的方法

• 参数 eventName：事件名称
• 参数 fn：事件回调

1. off(eventName: string, fn: (data?: any) => void): void;

含义：解除事件监听的方法

• 参数 eventName：之前注册过的事件名称
• 参数 fn：之前注册过的事件回调

事件

• click
• double-click

Plugin 插件父类

虚方法

abstract init(viewer: Viewer): void;

含义：Viewer 初始化后，将调用本方法

方法

afterLoad(): void;

含义：每次 Viewer.load() 方法被调用后，将调用本方法

Setting 设置类

属性

属性名	类型	默认值	描述
hasBtnRecoverViewingAngle	boolean	true	工具栏-恢复原始视角的按钮是否显示
camInitDirection	[number, number, number]	[1, 1, 1]	初始的摄像头方位(三维向量)
axesHelperMultiples	number	0	在场景原点的3色坐标的尺寸(为0时不会生成3色坐标)
isRotationAboveSkyline	boolean	false	锁定视角(不低于地平线)
sceneBgColor	number	0x000000	场景背景色
sceneBgGradient	string	''	场景背景色的渐变效果
isOutlineDrawn	boolean	false	是否描边
skyBoxHdr	string	-	天空盒 Hdr 文件，不设置则默认无天空盒
controlType	EControlType	CameraControls	场景控制器类型
changeCenterWhenPanning	boolean	false	当平移场景时，是否改变旋转中心(仅当控制器类型为CameraControls时有效)

场景背景色的渐变效果详见 Using css gradients

Model 模型类

属性

属性名	类型	默认值	描述
id	string	-	模型id（如果id一样，会被视为同一模型，已加载过的模型数据，不会再加载）
sourceType	ESourceType	url	模型数据来源类型(Url地址还是ArrayBuffer)
url	string	-	模型三维数据获取地址
arrayBuffer	Promise|ArrayBuffer	-	需要解析的glTF文件，值为一个ArrayBuffer
transforms	Array	[new Transform({})]	模型的移动/旋转/缩放；如果数组长度大于1，则表示模型需要复制

Transform 移动、旋转、缩放类

属性

属性名	类型	默认值	描述
id	string	-	-
position	Array	[0, 0, 0]	位置
rotation	Array	[0, 0, 0]	旋转
scale	Array	[1, 1, 1]	缩放

⚠️ 备注

如果开发过程中希望查看 THREE 的类型定义，可在自己项目运行 npm install --save-dev @types/three，然后重启 VsCode