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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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