shop-components

• 使用说明

** 安装

yarn add shop-components

** 使用步骤

*** 初始化场景

const scene = new Scene3D({
  useSound: true
})
scene.appendTo(this.container)

// 销毁 场景
scene.destroy()

*** 获取插槽，支持换肤的对象，Logo

this.colors = this.scene.amr.skins
this.logos = this.scene.amr.logos
this.slots = this.scene.amr.slots

*** 换颜色

this.scene.amr.changeSkin(s, value)

*** 插槽

/*
export const SLOT_EVENTS = {
  ON_DROP: 'slot-on-drop',
  ON_BEFORE_SELECTED: 'slot-on-before-selected',
  ON_SELECTED: 'slot-on-selected',
  ON_DEVICE_SELECTED: 'slot-on-device-selected',
  ON_DROP_ERROR: 'slot-on-drop-error',
  ON_ERROR_STATE_CHANGE: 'slot-on-error-state-change',
  ON_FUNCTION_REMOVED: 'slot-on-function-removed',
  ON_FUNCTION_ADDED: 'slot-on-function-added'
}
*/

this.scene.amr.slots.forEach(s => {
  s.addEventListener(SLOT_EVENTS.ON_FUNCTION_REMOVED, f => {
    console.log('ON_FUNCTION_REMOVED', f)
  })
  s.addEventListener(SLOT_EVENTS.ON_FUNCTION_ADDED, f => {
    console.log('ON_FUNCTION_ADDED', f)
  })
})

// 设置插槽功能清单
const fs = [
  '单激光定位导航',
  '激光反光板导航',
  '普通栈板识别',
  '2D 障碍物停障',
  '2D 障碍物绕障1',
  '2D 障碍物绕障2',
  '2D 障碍物绕障3',
  '2D 障碍物绕障4',
  '2D 障碍物绕障5'
]
s.allFunctions = [...fs]
fs.pop()
fs.pop()
fs.pop()
fs.pop()
fs.pop()
s.addFunctions(fs)

dragstart = (e: DragEvent) => {
  const deviceId = (e.target as HTMLElement)?.getAttribute('data-id')
  let url = 'https://cdn2-1304552240.cos.ap-shanghai.myqcloud.com/rp/devices/Mid-70.sglb'
  let bracketUrl = 'https://cdn2-1304552240.cos.ap-shanghai.myqcloud.com/rp/brackets/Mid-70_Bracket.sglb'
  const id = (e.target as HTMLImageElement).getAttribute('data-id')
  const jsonDataString = JSON.stringify({
    id, name: 'H1E0-02C',
    url,
    bracketUrl
  } as DeviceInfo) // 转换为字符串
  e.dataTransfer?.setData('application/json', jsonDataString)

  this.scene.amr.slots.forEach((s, i) => s.canInstall(Math.random() > 0.5))
  this.scene.amr.bodyOpacity = 0.2
}

dragend = (e: DragEvent) => {
  this.drag?.classList.remove('dragging')
  this.scene.amr.slots.forEach(s => s.canInstall(false))
}

// 获取百分百 或者 自己写 requestAnimationFrame 获取 this.scene.sampleCount
this.scene.renderer.domElement.addEventListener('ticker', () => {
  const percent = this.scene.sampleCount / this.scene.maxSample
  if (this.progressBar) {
    this.progressBar.style.width = percent * 100 + '%'
  }
})

*** 初始化 Cropper

const cropper = new Cropper()
if (this.cropperContainer) {
  this.cropperContainer.append(this.cropper)
  this.cropper.resize(220, 220)
  // 画布图片变动事件回调，设置 Logo 对象
  this.cropper.addEventListener('image-change', (e: any) => {
    if (e.detail && e.detail.image) {
      if (!this.selectedLogo) return
      const configs = this.cropper.getConfigs()
      this.scene.amr.changeLogo(this.selectedLogo, configs)

      // 获取图片实际尺寸，用于给业务做打印用
      this.logoSize = this.cropper.imageRealSize
    }
  })
}

// 清空画布
this.cropper.clear()

// 清空车体 logo 图片
logo.clear()

// 恢复默认 logo（每个车体 logo 虽然都是 seer 但是 uv 不同，所以自带的图片都是 base64 保存，新上传的都是 url 形式，如果未修改 logo，建议数据解析成固定的一张 seer logo url）
logo.reset()

// 根据数据修改画布 用于二次打开画布编辑 logo 图片
this.cropper.updateConfigs(configs).then()

// 获取画布配置信息 用户保存或者 changeLogo
const configs = this.cropper.getConfigs()

*** 模式切换

this.scene.amr.bodyOpacity = 0.2  // 透明模式
this.scene.amr.bodyOpacity = 1 // 默认模式

*** 开启渲染

this.scene.generateBVH()

*** 关闭渲染

this.scene.usePathTracing = false

*** 恢复到最佳视角

this.scene.fit()

// 当车体高度变化时 建议调用该方法

*** 设置车体属性

// 通过 shapeKeys 返回车体支持的所有自定义属性，如 height，length，liftOuterWidth（插齿外宽）
const shapeKeys = scene.amr.shapeKeys

// 可以根据业务 params key 匹配对应的 shapeKey
// shapeKey = 'width'|'length'|'height'
scene.amr.setShapeKey(shapeKey)

// 设置车体货物尺寸
scene.amr.setGoodsSize({ length: 0, width: 0, height: 0 })

// 设置最大起升高度
scene.amr.setForkMaxHeight(value)

// 设置顶升车行程
scene.amr.setJackMaxHeight(value)

// 设置料箱车行程
scene.amr.setLiftMaxHeight(value)

// 设置料箱料斗层数
scene.amr.setShelfLevel(value)