.ts component not registering to change from target to world placement

Technical Support
1

I am trying to create a component that I can add to the assets changing from target image to world placement. I have the component but it does not show up on the list of components to add. The code seems error free.

2

Hi, welcome to the forum!

Can you share the component code?

3

import { Component } from ‘@8thwall/web’
import * as THREE from ‘three’

class ImageToWorld extends Component {
el!: any

static properties = {
detachAfterSeconds: { type: ‘number’, default: 0.5 }
}

start() {
this.el.sceneEl.addEventListener(‘xrimagefound’, (event: any) => {
const placedObject = this.el.object3D
placedObject.updateMatrixWorld(true)
const worldMatrix = placedObject.matrixWorld.clone()

  this.el.sceneEl.object3D.add(placedObject)
  placedObject.matrix.copy(worldMatrix)
  placedObject.matrix.decompose(
    placedObject.position,
    placedObject.quaternion,
    placedObject.scale
  )
})

}
}

// :backhand_index_pointing_down: must be at the bottom, no export
Component.register(‘image-to-world’, ImageToWorld)

4

Your component isn’t showing up because it’s not registered correctly.

Take a look at our Sample Project Custom Components and you’ll see the correct way to do it:

You should be using ecs.registerComponent.

5

thank you for getting back to me! I tried following the example for registering but it still does not seem to see it. Here is what I have.

import * as ecs from ‘@8thwall/ecs’

import {Component} from ‘@8thwall/web’

import * as THREE from ‘three’

ecs.registerComponent({

name: ‘image-to-world’,

;class ImageToWorld extends Component {

el!: any // avoids TypeScript errors

static properties = {

detachAfterSeconds: {type: 'number', default: 0.5},

}

start() {

this.el.sceneEl.addEventListener('xrimagefound', (event: any) => {

const placedObject = this.el.object3D

// Copy world transform

placedObject.updateMatrixWorld(true)

const worldMatrix = placedObject.matrixWorld.clone()

// Re-parent to scene

this.el.sceneEl.object3D.add(placedObject)

placedObject.matrix.copy(worldMatrix)

placedObject.matrix.decompose(

placedObject.position,

placedObject.quaternion,

placedObject.scale

  )

})

}

}

6

You need to remove the incorrect imports are the top:

import {Component} from ‘@8thwall/web’
import * as THREE from ‘three’
7

Thanks for your patience as I try to debug. I tried this simpler script but it fails.

import * as ecs from ‘@8thwall/ecs’

ecs.registerComponent({

name: ‘image-to-world’,

schema: {

detachAfterSeconds: ecs.f32,

},

schemaDefaults: {

detachAfterSeconds: 0.5,

},

add: (world, component) => {

// Initialization logic

},

tick: (world, component) => {

// Per-frame update logic

},

remove: (world, component) => {

// Cleanup logic

},

})

8

I copied the code and noticed that the single quotes you’ve used are not the correct ones which led to a syntax error. Here’s a video of it working:

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

ecs.registerComponent({
    name: 'image-to-world',
    schema: {

        detachAfterSeconds: ecs.f32,
    },
    schemaDefaults: {

        detachAfterSeconds: 0.5,
    },
    add: (world, component) => {

        // Initialization logic

    },
    tick: (world, component) => {

        // Per-frame update logic

    },
    remove: (world, component) => {

        // Cleanup logic

    },
})

BTW: In the video I’m using 8th Wall Desktop Client.

9

ah, yes, that works! Thank you for your patience!

1 Like
10

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