AR Camera frame cant show in front in ios

[shKoki]

Description:

Please describe your issue or feature request in detail. Code and screenshots will help us diagnose the issue.

Additional Information:

• three.ar.js version: 0.1.8

• three.js version: 0.97.0

• Browser: WebAROnARKit

• [x] WebARonARKit (iOS)

• [ ] WebARonARCore (Android)

• [ ] WebARonTango (Android)

• [ ] All

• [ ] Other (please specify)

Hi! Im trying to develop ar application with angular. i cant see frame data from camera in front. Instead of it, white element is frontmost. How should i do to show ?

this is my simple code (in typescript)

vars(el) { // el: nativeElemnt
    //dom params
    this.ele = el
    this.sides = {
      w: this.ele.clientWidth,
      h: this.ele.clientHeight,
      aspect: this.ele.clientWidth / this.ele.clientHeight
    }
    this.init()
  },
  init: async function() {
    this.vrFrameData = new VRFrameData()
    this.vrDisplay = await ARUtils.getARDisplay()
    this.renderer = new WebGLRenderer({alpha: true,  preserveDrawingBuffer: true })
    this.renderer.setPixelRatio(window.devicePixelRatio)
    this.renderer.setSize(this.sides.w, this.sides.h)
    this.renderer.autoClear = false
    this.renderer.setClearColor( 0x000000, 0 )
    this.ele.appendChild(this.renderer.domElement)

    this.arView = new ARView(this.vrDisplay, this.renderer)
    this.scene = new Scene()
    this.arDebug = new ARDebug(this.vrDisplay)
    this.ele.appendChild(this.arDebug.getElement())
    this.arCamera = new ARPerspectiveCamera(
      this.vrDisplay,
      60,
      this.sides.aspect,
      this.vrDisplay.depthNear,
      this.vrDisplay.depthFar
    )
    this.vrControls = new VRControls(this.arCamera)

    this.ele.addEventListener('resize', () => {
      const width = this.ele.clientWidth
      const height= this.ele.clientHeight

      this.renderer.setPixelRatio(window.devicePixelRatio)
      this.renderer.setSize(width, height)

      this.arCamera = width / height
      this.arCamera.updateProjextionMatrix()
    }, false)

    this.update()
  },
  update: function() {
    this.arCamera.updateProjectionMatrix()

    this.vrControls.update()

    this.arView.render()
    this.renderer.clearDepth()
    this.renderer.render(this.scene, this.arCamera)

    requestAnimationFrame(() => this.update())
  }