🔨 示例
<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 去除一个插件
实例方法
- load(models?: Array, format?: EFormat, beforeLoad?: (scene: THREE.Group, transform?: Transform) => THREE.Group): Promise;
含义:模型的加载方法,一次调用可加载多个模型,也可多次调用
- 参数 models:模型类对象的数组(默认值为空数组)
- 参数 format:(可选)模型格式(目前只支持 GLB)
- 参数 beforeLoad:在加载模型前的回调(如果启用本回调,将不再使用 models 中 transforms 的值,模型的位置、旋转、缩放均需由回调自行设置)
- put(modelData: Array<THREE.Object3D> | THREE.Object3D = []): void;
含义:模型的加载方法,直接从外面传入 THREE.Group 的对象数组用于直接加载模型
- 参数 modelData:THREE.Group 对象或对象数组
- on(eventName: string, fn: (data?: any) => void): void;
含义:监听事件的方法
- 参数 eventName:事件名称
- 参数 fn:事件回调
- off(eventName: string, fn: (data?: any) => void): void;
含义:解除事件监听的方法
- 参数 eventName:之前注册过的事件名称
- 参数 fn:之前注册过的事件回调
事件
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