i3v-3d-display

🔨 示例

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

<script>
import Viewer, {
  THREE,
  Setting,
  Model,
  Transform,
  EControlType,
  ESourceType,
} from "i3v-3d-display";

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, Viewer.MODEL_FORMAT.GLB);
  },
};
</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	-	轨道控制器

Setting 设置类

属性名	类型	默认值	描述
hasBtnRecoverViewingAngle	boolean	true	工具栏-恢复原始视角的按钮是否显示
camInitDirection	[number, number, number]	[1, 1, 1]	初始的摄像头方位(三维向量)
axesHelperSize	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时有效)

场景背景色的渐变效果详见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/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 移动、旋转、缩放类

属性名	类型	默认值	描述
position	Array	[0, 0, 0]	位置
rotation	Array	[0, 0, 0]	旋转
rotationOrder	string	'XYZ'	旋转顺序的字符串，默认为'XYZ'（必须是大写）
scale	Array	[1, 1, 1]	缩放