# Create component begginer
**URL:** https://forum.8thwall.com/t/create-component-begginer/5938
**Category:** Technical Support
**Created:** [April 7, 2025, 3:31pm UTC](https://forum.8thwall.com/t/create-component-begginer/5938 "2025-04-07T15:31:39Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@IP3D\_proyectos](https://forum.8thwall.com/u/IP3D_proyectos)
#### Post date: [April 7, 2025, 3:31pm UTC](https://forum.8thwall.com/t/create-component-begginer/5938/1 "2025-04-07T15:31:40Z")
Hi there, well first say am starting to know this soft but i cant found the help what i need.
iam trying to make a ECS component , this component apply to button on the stage, and the effect is when you click the object loaded white the component take a spcecific object 3d on the stage and rotate 5 grades ( in every click), i was triying to helpme whit AI but no one of the codes is runing, am gona leave the last code iam using but this make the screen go to white and i can see nothing:
// This is a component file. You can use this file to define a custom component for your project.
// This component will appear as a custom component in the editor.
import \* as ecs from ‘[@8thwall](https://forum.8thwall.com/groups/8thwall)/ecs’ // Accedemos a la librería ECS de 8thwall
ecs.registerComponent({
name: ‘click\_rotation’,
schema: {
// Aquí se pueden agregar configuraciones personalizables, si es necesario
},
schemaDefaults: {
// Configuración por defecto de los campos, si es necesario
},
data: {
// No necesitamos datos específicos fuera de la configuración para este ejemplo
},
add: (world, component) =\> {
// Inicializamos la lógica para detectar el clic
const handleClick = (event) =\> {
const intersectedObject = event.target // El objeto que fue clickeado
if (intersectedObject) {
// Al hacer clic en un objeto, rotamos 5 grados sobre el eje Y
const currentRotation = intersectedObject.rotation.y
intersectedObject.rotation.y = currentRotation + 5 \* Math.PI / 180 // 5 grados a radianes
}
}
```
// Añadimos el detector de clics en el mundo
world.addEventListener('click', handleClick)
```
},
tick: (world, component) =\> {
// Si es necesario realizar alguna acción en cada fotograma (frame), lo pondríamos aquí
},
remove: (world, component) =\> {
// Aquí eliminamos el evento de clic cuando el componente se remueve
// world.removeEventListener(‘click’, handleClick)
},
})
---
### Author:  [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)
#### Post date: [April 7, 2025, 4:24pm UTC](https://forum.8thwall.com/t/create-component-begginer/5938/2 "2025-04-07T16:24:02Z")
Hi, welcome to the forums!
If you’re seeing white that means that something in your component is invalid.
The corrected version would look like this:
```ts
// This is a component file. You can use this file to define a custom component for your project.
// This component will appear as a custom component in the editor.
import * as ecs from '@8thwall/ecs'
ecs.registerComponent({
name: 'click_rotation',
schema: {
// Aquí se pueden agregar configuraciones personalizables, si es necesario
},
schemaDefaults: {
// Configuración por defecto de los campos, si es necesario
},
data: {
// No necesitamos datos específicos fuera de la configuración para este ejemplo
},
add: (world, component) => {
// Inicializamos la lógica para detectar el clic
const handleClick = (event) => {
const intersectedObject = event.target // El objeto que fue clickeado
if (intersectedObject) {
// Al hacer clic en un objeto, rotamos 5 grados sobre el eje Y
const currentRotation = intersectedObject.rotation.y
// @ts-ignore
intersectedObject.rotation.y = currentRotation + 5 * Math.PI / 180 // 5 grados a radianes
}
}
// Añadimos el detector de clics en el mundo
world.events.addListener(component.eid, ecs.input.SCREEN_TOUCH_START, handleClick)
},
tick: (world, component) => {
// Si es necesario realizar alguna acción en cada fotograma (frame), lo pondríamos aquí
},
remove: (world, component) => {
// Aquí eliminamos el evento de clic cuando el componente se remueve
// world.removeEventListener('click', handleClick)
},
})
```
However, you should use a State Machine as it’s not good practice to leave listeners ‘dangling’ (without a removeListener).
I suggest you check out our sample projects to see how to do that:
> **[Studio: Scavenger Hunt | 8th Wall | 8th Wall](https://www.8thwall.com/8thwall/scavenger-hunt/code/scavenger-hunt-poi.ts)**
>
> An interactive scavenger hunt where players navigate to 4 different VPS-activated Locations and engage in bespoke VPS experiences.
---
### Author:  [@IP3D\_proyectos](https://forum.8thwall.com/u/IP3D_proyectos)
#### Post date: [April 7, 2025, 4:28pm UTC](https://forum.8thwall.com/t/create-component-begginer/5938/3 "2025-04-07T16:28:01Z")
> [@GeorgeButler](#):
>
> ```auto
> // This is a component file. You can use this file to define a custom component for your project.
> // This component will appear as a custom component in the editor.
>
> import * as ecs from '@8thwall/ecs'
>
> ecs.registerComponent({
> name: 'click_rotation',
> schema: {
> // Aquí se pueden agregar configuraciones personalizables, si es necesario
> },
> schemaDefaults: {
> // Configuración por defecto de los campos, si es necesario
> },
> data: {
> // No necesitamos datos específicos fuera de la configuración para este ejemplo
> },
> add: (world, component) => {
> // Inicializamos la lógica para detectar el clic
> const handleClick = (event) => {
> const intersectedObject = event.target // El objeto que fue clickeado
> if (intersectedObject) {
> // Al hacer clic en un objeto, rotamos 5 grados sobre el eje Y
> const currentRotation = intersectedObject.rotation.y
> // @ts-ignore
> intersectedObject.rotation.y = currentRotation + 5 * Math.PI / 180 // 5 grados a radianes
> }
> }
>
> // Añadimos el detector de clics en el mundo
> world.events.addListener(component.eid, ecs.input.SCREEN_TOUCH_START, handleClick)
> },
>
> tick: (world, component) => {
> // Si es necesario realizar alguna acción en cada fotograma (frame), lo pondríamos aquí
> },
>
> remove: (world, component) => {
> // Aquí eliminamos el evento de clic cuando el componente se remueve
> // world.removeEventListener('click', handleClick)
> },
> })
>
> ```
thankyus!!! x 1000000000000000 am gona take a look about this and reply later, thx again!
---
### Author:  [@system](https://forum.8thwall.com/u/system)
#### Post date: [April 11, 2025, 4:28pm UTC](https://forum.8thwall.com/t/create-component-begginer/5938/4 "2025-04-11T16:28:23Z")
This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.