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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions