How incorporate a-frame in ionic?

hi, any can help me to create an enviroment in ionic with aframe please,
actually i have this Error :
Error: Template parse errors:
‘a-sphere’ is not a known element:

  1. If ‘a-sphere’ is an Angular component, then verify that it is part of this module.
  2. If ‘a-sphere’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("


1 Like

I’m interested in this too.

It seems like an amazing framework. I think this will be the future of interesting app UIs or menu sections.

React ships with ReactVR framework … but I think aframe is comparably good.

1 Like

In my old project, for each element, i used “ionic g component NameOfElement”

for more information, see this video :

thanks, i’m exited for development AR or VR with ionic, I wonder if you can use ionic and Unity or Unity & ionic , it would be interesting.

There are more you can do using WebGL and Three.js
Have you checked WebGL and Three.js?
I think combination of the two is more powerful than a-frame…

Check three.js examples:

1 Like


import { NgModule, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA } from ‘@angular/core’;

providers: [
{provide: ErrorHandler, useClass: IonicErrorHandler}

I hope it is also of your help :slight_smile:

Can you share us how you use a-frame in ionic ?

Because i tried it last week with AR.js but i have a camera error with this message "only secure origins are allowed’

mmm, I still do not work the camera :confused:

currently, i try to use Three.js in Ionic. It’s work, but i would like to use camera preview and gyroscope with it. Now i can’t use camera preview but i search why it’s not work.

well, I worked the camera with the camera plugin preview,

  1. $ ionic cordova plugin add cordova-plugin-camera-preview
    $ npm install --save @ionic-native/camera-preview

2.import in your app.module and provider Camerapreview
3. i used this code in constructor in my case home.ts


	let cameraPreviewOpts: CameraPreviewOptions = {
	  x: 0,
	  y: 0,
	  width: window.screen.width,
	  height: window.screen.height,
	  camera: 'rear',
	  tapPhoto: true,
	  previewDrag: true,
	  toBack: true,
	  alpha: 1

		(res) => {
		(err) => {

build, now should working , regards.

1 Like

Good ! I work for me too

(it wasn’t work until i just change exports.ANDROID_PLATFORM_PATH = path.join(‘platforms’, ‘android’, ‘app’, ‘src’, ‘main’, ‘assets’, ‘www’); in serve-config.js)

Now i try too integrate gyroscope, if find a solution please share :wink:

1 Like

Hi @PuntoNet,
I think placing schemas inside the providers is not correct (you didn’t put it there in your code snippet).
and puting it directly inside the @ngModule returns an error as well.

I wonder if you are kind enough to post a the full app.module.ts sample.
Thank you