karamay_wx/subPackages/pages/ar/index.js

import getBehavior from './behavior'
import yuvBehavior from './yuvBehavior'
import { getCachedImage, hash } from '../../utils/index'
import { MARKER_LIST } from './constants'

const NEAR = 0.01
const FAR = 1000

Component({
  behaviors: [getBehavior, yuvBehavior],
  data: {
    widthScale: 1, // canvas宽度缩放值
    heightScale: 1, // canvas高度缩放值
    markerImgList: [], // 使用的 marker 列表
    chooseImgList: [], // 使用的 图片 列表
    hintBoxList: [], // 显示提示盒子列表
    markerMap: {},
    forzen: false,
    showVideo: false,
    markerIndex: 1, // 使用的 marker 索引
  },
  hintInfo: undefined, // 提示框信息
  pageLifetimes: {
    show() {
      setTimeout(() => {
        this.setData({
          forzen: false
        })
      }, 1000)
    }
  },
  methods: {
    handleEnded() {
      wx.navigateTo({
        url: '/pages/webview/index?url=' + encodeURIComponent(`https://sit-kelamayi.4dage.com/zuan/#/info/${this.data.markerIndex}`),
      })
      this.setData({
        showVideo: false
      })
    },
    // 对应案例的初始化逻辑，由统一的 behavior 触发
    init() {
      // 初始化 Three.js，用于模型相关的渲染
      this.initTHREE()

      // 初始化 GL，基于 Three.js 的 Context，用于相机YUV渲染
      this.initYUV()

      // 初始化VK
      // start完毕后，进行更新渲染循环
      this.initVK()

      // 添加 识别包围盒子
      // this.add3DBox()
    },
    initVK() {
      // VKSession 配置
      const session = this.session = wx.createVKSession({
        track: {
          plane: {
            mode: 1
          },
          marker: true,
        },
        version: 'v1',
        gl: this.gl
      })

      session.start(async err => {
        if (err) return console.error('VK error: ', err)

        console.log('@@@@@@@@ VKSession.version', session.version)

        try {
          const promises = MARKER_LIST.map(async url => {
            const cacheKey = 'image_marker_' + hash(url)
            const sysPath = await getCachedImage(url, cacheKey)
            return [sysPath, url]
          })
          wx.showLoading({
            title: '资源加载中...',
          })
          await Promise.all(promises).then(arr => {
            for (const [path, url] of arr) {
              console.log('marker添加成功：', path)
              const id = session.addMarker(path)
              console.log('markerId：', id)
              this.data.markerMap[id] = url
            }
          })
        } catch(err) {
          console.log(err)
        } finally {
          wx.hideLoading()
        }

        //  VKSession EVENT resize
        session.on('resize', () => {
          this.calcCanvasSize()
        })

        // VKSession EVENT addAnchors
        // session.on('addAnchors', anchors => {
        //   this.left.visible = true
        //   this.right.visible = true
        //   this.top.visible = true
        //   this.bottom.visible = true
        // })

        // VKSession EVENT updateAnchors
        session.on('updateAnchors', anchors => {
          // marker 模式下，目前仅有一个识别目标，可以直接取
          const anchor = anchors[0]
          const markerId = anchor.id
          const size = anchor.size
          this.hintInfo = {
            markerId,
            size
          }

          const url = this.data.markerMap[markerId]
          if (url) {
            const match = url.match(/\/kelamayi\/(\d+)/);
            const id = match ? match[1] : null;
            console.log('识别到的图片：', url, id)
            if (id && !this.data.forzen) {
              this.setData({
                forzen: true,
                markerIndex: Number(id),
                showVideo: true
              })
            }
          }
        })

        // VKSession removeAnchors
        // 识别目标丢失时，会触发一次
        session.on('removeAnchors', anchors => {
          // this.left.visible = false
          // this.right.visible = false
          // this.top.visible = false
          // this.bottom.visible = false

          if (this.data.hintBoxList && this.data.hintBoxList.length > 0) {
            // 清理信息
            this.hintInfo = undefined
            // 存在列表的情况，去除remove
            this.setData({
              hintBoxList: []
            })
          }
        })

        console.log('ready to initloop')
        // start 初始化完毕后，进行更新渲染循环
        this.initLoop()
      })
    },
    loop() {
      // console.log('loop')

      // 获取 VKFrame
      const frame = this.session.getVKFrame(this.canvas.width, this.canvas.height)

      // 成功获取 VKFrame 才进行
      if (!frame) { return }

      // 更新相机 YUV 数据
      this.renderYUV(frame)

      // 获取 VKCamera
      const VKCamera = frame.camera

      // 相机
      if (VKCamera) {
        // 接管 ThreeJs 相机矩阵更新，Marker模式下，主要由视图和投影矩阵改变渲染效果
        this.camera.matrixAutoUpdate = false

        // 视图矩阵
        this.camera.matrixWorldInverse.fromArray(VKCamera.viewMatrix)
        this.camera.matrixWorld.getInverse(this.camera.matrixWorldInverse)

        // 投影矩阵
        const projectionMatrix = VKCamera.getProjectionMatrix(NEAR, FAR)
        this.camera.projectionMatrix.fromArray(projectionMatrix)
        this.camera.projectionMatrixInverse.getInverse(this.camera.projectionMatrix)
      }

      // 绘制而为提示框的逻辑
      if (this.hintInfo) {
        // 存在提示信息，则更新
        const THREE = this.THREE

        // 原点偏移矩阵，VK情况下，marker 点对应就是 0 0 0，世界矩阵可以认为是一个单位矩阵
        // marker 右侧点可以理解是 0.5 0 0
        const center = new THREE.Vector3()
        const right = new THREE.Vector3(0.5, 0, 0)

        // 获取设备空间坐标
        const devicePos = center.clone().project(this.camera)

        // 转换坐标系，从 (-1, 1) 转到 (0, 100)，同时移到左上角 0 0，右下角 1 1
        const screenPos = new THREE.Vector3(0, 0, 0)
        screenPos.x = devicePos.x * 50 + 50
        screenPos.y = 50 - devicePos.y * 50

        // 获取右侧点信息
        const deviceRightPos = right.clone().project(this.camera)
        const screenRightPos = new THREE.Vector3(0, 0, 0)
        screenRightPos.x = deviceRightPos.x * 50 + 50

        const markerHalfWidth = screenRightPos.x - screenPos.x

        this.setData({
          hintBoxList: [
            {
              markerId: this.hintInfo.markerId,
              left: screenPos.x - markerHalfWidth,
              top: screenPos.y - markerHalfWidth,
              width: markerHalfWidth * this.data.domWidth * 2 / 100,
              height: markerHalfWidth * this.data.domWidth * 2 / 100,
            }
          ]
        })
      }

      this.renderer.autoClearColor = false
      this.renderer.state.setCullFace(this.THREE.CullFaceBack)
      this.renderer.render(this.scene, this.camera)
      this.renderer.state.setCullFace(this.THREE.CullFaceNone)
    },
    add3DBox() {
      // 添加marker需要的 三维包围框

      const THREE = this.THREE
      const scene = this.scene

      const material = new THREE.MeshPhysicalMaterial({
        metalness: 0.0,
        roughness: 0.1,
        color: 0x64f573,
      })
      const geometry = new THREE.BoxGeometry(1, 1, 1)

      const borderSize = 0.1

      const left = new THREE.Mesh(geometry, material)
      left.position.set(-0.5, 0, 0)
      left.rotation.set(-Math.PI / 2, 0, 0)
      left.scale.set(borderSize, 1.1, borderSize)
      scene.add(left)
      left.visible = false
      this.left = left

      const right = new THREE.Mesh(geometry, material)
      right.position.set(0.5, 0, 0)
      right.rotation.set(-Math.PI / 2, 0, 0)
      right.scale.set(borderSize, 1.1, borderSize)
      scene.add(right)
      right.visible = false
      this.right = right

      const top = new THREE.Mesh(geometry, material)
      top.position.set(0, 0, 0.5)
      top.rotation.set(0, 0, 0)
      top.scale.set(1.1, borderSize, borderSize)
      scene.add(top)
      top.visible = false
      this.top = top

      const bottom = new THREE.Mesh(geometry, material)
      bottom.position.set(0, 0, -0.5)
      bottom.rotation.set(0, 0, 0)
      bottom.scale.set(1.1, borderSize, borderSize)
      scene.add(bottom)
      bottom.visible = false
      this.bottom = bottom

      console.log('add3DBox is finish')
    },
  },
})