Shared AR + Tap to place

🧑‍💻 Technical Support
1

Hi there.

I’m testing the shared ar module and was trying to make simple app that would update the new models on the scene to everyone on the same room (I’m using this template: A-Frame: Shared AR Template | 8th Wall | 8th Wall)

I was able to use the click to change rotation on the box and a click to add new model from tap to place, but I’m trying to figure out a way to sync the new objects that are created as well.

Edit: I was able to sync the room when a new object is created, but I can’t change it’s position and I have to register each object beforehand. Is there a way to create a template that would basically update the scene with any child added to its entity or something? So in that way I wouldn’t have to add the spawned object entity to the template, but I would be able to spawn new objects to the shared scene.

here are some of the code:

app.js

/* globals NAF */
// Copyright (c) 2023 8th Wall, Inc.
//
// app.js is the main entry point for your 8th Wall app. Code here will execute after head.html
// is loaded, and before body.html is loaded.
import './index.css'

import {tapPlaceComponent} from './tap-to-place'
AFRAME.registerComponent('tap-place', tapPlaceComponent)

import {connectComponent} from './connect'
AFRAME.registerComponent('connect', connectComponent)

import {colorChangerComponent} from './color-changer'
AFRAME.registerComponent('color-changer', colorChangerComponent)

import {inviteOverlayComponent} from './invite-overlay'
AFRAME.registerComponent('invite-overlay', inviteOverlayComponent)

// Define NAF Schemas for Networked A-Frame
const addNafSchemas = () => {
  NAF.schemas.getComponentsOriginal = NAF.schemas.getComponents
  NAF.schemas.getComponents = (template) => {
    if (!NAF.schemas.hasTemplate('#avatar-template')) {
      NAF.schemas.add({
        template: '#avatar-template',
        components: [
          'position',
          'rotation',
        ],
      })
    }
    if (!NAF.schemas.hasTemplate('#sphere-template')) {
      NAF.schemas.add({
        template: '#sphere-template',
        components: [
          'position',
          'rotation',
          {
            component: 'material',
            property: 'color',
          },
        ],
      })
    }
    if (!NAF.schemas.hasTemplate('#cactus-template')) {
      NAF.schemas.add({
        template: '#cactus-template',
        components: [
          'position',
          'rotation',
        ],
      })
    }
    if (!NAF.schemas.hasTemplate('#ground-template')) {
      NAF.schemas.add({
        template: '#ground-template',
        components: [
          'position',
          'rotation',
        ],
      })
    }
    const components = NAF.schemas.getComponentsOriginal(template)
    return components
  }
}
// Wait on DOM ready
setTimeout(() => {
  addNafSchemas()
})

body.html

    <template id="cactus-template">
      <a-entity gltf-model="#cactusModel" position="0 0.5 0"></a-entity>
    </template>

tapToPlace.js


  const networked = document.createElement('a-entity')
      networked.setAttribute('networked', 'template: #cactus-template;')
      this.el.sceneEl.appendChild(networked)
2

@Ian or anyone from support, any ideas?

3

Hey Victor, appreciate your patience here. Check out our newly published Shared AR: Tap Place sample project. Cheers!

2 Likes
4

that’s awesome! thanks @Evan

5

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.