Convert threejs example to Aframe example?

Technical Support
,
1

I would like to use this example created in threejs, in an Aframe project.

we have found good success using these paramaters, and the other example in aframe are not as robust.

  • @param {string} url Image or video to load into material’s texture
  • @param {ColorRepresentation} keyColor
  • @param {number} width
  • @param {number} height
  • @param {number} similarity
  • @param {number} smoothness
  • @param {number} spill

Would it be possible to convert this sample to Aframe so that we can combine it with another Aframe based image example and use the chroma key videos based on image targets etc?

2

Here is an A-Frame port:

The chromakey-video component accepts these values as schema values.

3

Amazing! Thanks for the example. i found one small issue.

in chromakey.js, the color param should be set up as a string in order to the things to work perfectly. so i wrapped the default value in single quotes.

‘color’: {default: ‘#19ae31’},

then, using this, i was able to pass in paramaters as below. i had to use the #notation vs for color (color:#ef0009 vs color:0xef0009) to get it to work in body.html.