Studio Niantic: Create a UI image in a 3D environment by code?

[amitri]

Hi everyone. I tried creating a UI image directly in the editor studio. It works quite well (see the image).

However, I want it to be created using code. Could you help me create a UI image in a 3D environment with code, as shown in the setup I’ve made in the image?

[GeorgeButler]

Hi! This should help:

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'my-custom-ui',
  schema: {
  },
  schemaDefaults: {
  },
  data: {
  },
  add: (world, component) => {
    const {eid} = component

    ecs.PlaneGeometry.set(world, eid, {
      width: 1,
      height: 1,
    })

    ecs.Material.set(world, eid, {
      textureSrc: 'assets/test.png',
      r: 255,
      g: 255,
      b: 255,
      roughness: 0,
      metalness: 0,
      normalScale: 0,
      opacity: 0.4,
      emissiveIntensity: 0,
      side: 'front',
      blending: 'normal',
      repeatX: 1,
      repeatY: 1,
      offsetX: 0,
      offsetY: 0,
      depthTest: true,
      depthWrite: true,
      wireframe: false,
    })
  },
  tick: (world, component) => {
  },
  remove: (world, component) => {
  },
})

This is what my assets folder looks like:

[amitri]

Thank for your support!