# Convert threejs example to Aframe example?

**URL:** <https://forum.8thwall.com/t/convert-threejs-example-to-aframe-example/1592>\
**Category:** Technical Support\
**Tags:** image-targets, general\
**Created:** [June 8, 2024, 6:53pm UTC](https://forum.8thwall.com/t/convert-threejs-example-to-aframe-example/1592 "2024-06-08T18:53:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Laron\_Walker](https://avatars.discourse-cdn.com/v4/letter/l/49beb7/32.png) [@Laron\_Walker](https://forum.8thwall.com/u/Laron_Walker)\
**Post date:** [June 8, 2024, 6:53pm UTC](https://forum.8thwall.com/t/convert-threejs-example-to-aframe-example/1592/1 "2024-06-08T18:53:33Z")

</div>

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

> **[three.js: Green Screen Video | 8th Wall Playground | 8th Wall](https://www.8thwall.com/playground/chromakey-threejs)**
>
> Example of a green screen video placed on a surface using SLAM.

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?

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [June 10, 2024, 5:29pm UTC](https://forum.8thwall.com/t/convert-threejs-example-to-aframe-example/1592/2 "2024-06-10T17:29:54Z")

</div>

Here is an A-Frame port:

> **[aframe chromakey | Evan Carlson | 8th Wall](https://www.8thwall.com/evan/aframe-chromakey/code/)**
>
> aframe chromakey by Evan Carlson

The [chromakey-video component](https://www.8thwall.com/evan/aframe-chromakey/code/chromakey.js#L4) accepts these values as schema values.

---

<div class="post-metadata">

**Author:** ![Laron\_Walker](https://avatars.discourse-cdn.com/v4/letter/l/49beb7/32.png) [@Laron\_Walker](https://forum.8thwall.com/u/Laron_Walker)\
**Post date:** [June 11, 2024, 3:23am UTC](https://forum.8thwall.com/t/convert-threejs-example-to-aframe-example/1592/3 "2024-06-11T03:23:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/9/9212a857458f1b03a6accb129e0f8cbea408e3e5.png) [@system](https://forum.8thwall.com/u/system)\
**Post date:** [June 15, 2024, 3:23am UTC](https://forum.8thwall.com/t/convert-threejs-example-to-aframe-example/1592/4 "2024-06-15T03:23:33Z")

</div>

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