I’m currently working on a project using 8th Wall ECS, and I’m trying to create a custom component called destructible that fades out and deletes a GLB model when it collides with a projectile. heres the code import * as ecs from ‘@8thwall/ecs’
// Register the ‘destructible’ component
ecs.registerComponent({
name: ‘destructible’,
schema: {
fadeDuration: ecs.types.F32,
},
init() {
// Optional: Initialize component-specific data here
},
tick(world, entity) {
// No specific action in the tick for this component
},
events: {
// Handle collision events here
collision(world, entity, collisionData) {
const {otherEntity} = collisionData
// Check if the other entity is tagged as a 'projectile'
if (world.hasComponent(otherEntity, 'projectile')) {
this.fadeOutAndDestroy(world, entity, this.properties.fadeDuration)
}
},
},
methods: {
// Method to fade out and destroy the model
fadeOutAndDestroy(world, entity, duration) {
let opacity = 1 // Start at full opacity
const fadeInterval = world.setInterval(() => {
opacity -= world.time.delta / duration
if (opacity <= 0) {
world.deleteEntity(entity) // Delete the entity once fully faded out
world.clearInterval(fadeInterval) // Clear the interval once the entity is removed
}
// Assuming you have a material component with opacity control
ecs.Material.set(world, entity, {opacity})
}, 1000 / 60) // Update opacity every frame (60 FPS)
},
},
})
"
