hpthree v1.0.2

hpthree

A Vue.js project

Install

# npm安装方法
npm install hpthree

# yarn安装 
yarn add hpthree

Quick Start

# 1.组件内部使用
html: 

　　<Hpthree/>

js：

    import Hpthree from 'hpthree'

    components: {
      Hpthree
    }

# 2. main.js 全局安装
import Main from 'yyl-npm-practice'
Vue.use(Main)

Document demo

<Tree
      id="tree"                 // id
      ref="tree"               //通过ref调用内部方法
      :editFlag="true"     //是否编辑模式 (默认为false)
      :option="option"     //配置项  必传
      :meshArr="meshArr"    //模型数组
      :meshObj="meshObj"    //模型对象，直接加载已有的模型数据 可进行点击事件拿到模型后的模型展示配置
      :interiorArr="interiorArr" //内置标签数组
      :spriteArr="spriteArr"  //精灵模型(外部标签)数组
      :pathSpline="lineArr"  //行动轨迹路线
      @renderCallback="renderCallback" //渲染回调//根据刷新频率执行
      @meshLoad="meshLoad" //模型加载完毕后回调
      @interiorLoad="interiorLoad" //内置标签更新后回调
      @threeClick="threeClick"  //模型点击事件 返回被点击的模型
      @spriteLoad="spriteLoad" //精灵模型(外部标签)更新后回调
      @playEnd="playEnd"  //动画播放完毕后回调
      @updateLine="updateLine"  //行动轨迹路径变化后回调
  ></Tree>

 option: {
url: "/img/bg/bg1.jpg"    //(背景图片)
        backgroundColor: "#eee", //(背景颜色默认#eee)
        WebGLRenderer: { antialias: true },
        width: 1600, //3D画布宽度(默认1600)  //宽度和高度影响模型点击事件，务必要准确
        height: 1000, //3D画布高度(默认1000)
        controls: {
          dampingFactor: 0.2, //阻尼惯性（默认0.2）
          enableDamping: true, //启用阻尼（默认true）
          maxPolarAngle: Math.PI / 2, //垂直旋转的角度的上限，范围是0到Math.PI（默认Math.PI / 2）
          maxAzimuthAngle: Math.PI, //水平旋转的角度的上限，范围是-Math.PI到Math.PI（或Infinity无限制）(默认Math.PI)
          minAzimuthAngle: -Math.PI, //水平旋转的角度的下限，范围是-Math.PI到Math.PI（或-Infinity无限制）(默认Math.PI)
        },
        cameraposition: { x: 0, y: 0,  z: 1000, } //摄像机初始位置坐标 // 必传
	   cameraLook: { x: 0, y: 0,  z: 0, } //摄像机摄影目标 // 必传
      }

编辑模式 editFlag Boolean 类型

​ 设置为true时则开启编辑模式，

1. 开启世界坐标轴显示

2. 开启辅助网格

3. 内置标签将会多一个坐标显示，反之则无

4. 内置标签可以使用鼠标操作

5. 行动轨迹可以使用鼠标操作

   Methods

Events

模型数组 meshArr Array 类型

默认模型数组为主模型，模型添加后不再支持添加和删除，如需添加和删除直接修改meshArr数组即可

模型数据修改方法将进行拆分，分为偏移度、大小、旋转角度三个修改方法

  [ {
          url: "/LeePerrySmith/glt/lamborhini/scene.gltf", //路径
          name: "兰博基尼", //模型名称
          size: {  //模型大小
            x: 150,
            y: 150,
            z: 150,
          },
          position: {//模型偏移度
            x: 0,
            y: 0,
            z: 0,
          },
          rotation: { //模型旋转角度
            x: -1.55,
            y: 0,
            z: 0,
          },
        },]

MeshArr数组里对象属性

Methods

Events

模型meshObj Object类型

meshObj数据为 点击模型后，或者加载模型后返回的模型对象 Mesh

点击模型返回的模型必须进行克隆后才可以添加到另一个three.js场景中

mesh.clone()

内置标签 interiorArr Array类型

内置标签本质为内部的2D模型，不跟随镜头移动

  [{
          type: 2,   //标签类型 目前只有1和2两种，默认为1
          zoom: 1    //等比放大
          line: {   //type类型为2时才配置line 为1时则不必配置
            lineHeight: 200,  //线的长度默认为100   如需自定义线的路径则不需配置该项 与lineArr 二选一
            lineColor: "#ffce47", //线的颜色
            lineArr: [    //自定义线 设置X,y,z坐标即可 与lineHeight 二选一即可
              {
                x: 0,
                y: -10,
                z: 0,
              },
              {
                x: 0,
                y: -100,
                z: 0,
              },
              {
                x: 100,
                y: -100,
                z: 0,
              },
            ],
          },
          position: { //标签坐标 默认为0
            x: -255,
            y: 155,
            z: 200,
          },
          size: {  //标签大小倍率 默认为1
            x: 1,
            y: 1,
          },
          rotation: { //标签旋转
            x: 0,
            y: 0,
            z: 0,
          },
          value: "右前轮", //标签展示内容
          color: "#000", //标签展示内容文字颜色
        },]

interiorArr数组里对象属性 后面item则表示该对象

Methods

Events

精灵模型（外部标签） spriteArr Array类型

精灵模型永远面向镜头，

精灵模型没有点击事件

[
        {
          x: 50,
          y: 200,
          z: -30,
          width: 100,
          height: 40,
          value: "驾驶室",
  	    zoom:1,
        },
      ]

spriteArr数组里对象属性 后面item则表示该对象

Methods

Events

行动轨迹路线 pathSpline Array类型

[
        {
          time: 0.1,
          cameraX: 0,
          cameraY: 0,
          cameraZ: 0,
          x: 127,
          y: 265,
          z: 1355,
        },]

pathSpline数组里对象属性 后面item则表示该对象

Methods

Events