Skip to content
This repository was archived by the owner on Jun 1, 2022. It is now read-only.
This repository was archived by the owner on Jun 1, 2022. It is now read-only.

AR Camera frame cant show in front in ios #118

@shKoki

Description

@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
  • 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())
  }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions