RotateExample.js

import { Component, System, MeshEntity, ImageEntity, InteractableComponent } from "hubs";
import { Vector3, MeshBasicMaterial, BoxBufferGeometry } from "three";

class RotateComponent extends Component {
  static schema = {
    axis: { type: Vector3, default: new Vector3(0, 1, 0) },
    speed: { type: Number, default: 0.5 }
  };
}

class RotateOnHeldComponent extends Component {}

class RotateSystem extends System {
  update(dt) {
    const entities = this.world.entitiesByComponent.get(RotateComponent);

    entities.forEach(entity => {
      const rotate = entity.getComponent(RotateComponent);
      entity.rotateOnAxis(rotate.axis, rotate.speed * (dt / 1000));
    });
  }
}

class RotateOnHeldSystem extends System {
  update() {
    const entities = this.world.entitiesByComponent.get(RotateOnHeldComponent);

    entities.forEach(entity => {
      const interactable = entity.getComponent(InteractableComponent);

      if (!interactable) {
        return;
      }

      const held = interactable.held;
      const hasRotateComponent = entity.hasComponent(RotateComponent);

      if (held && !hasRotateComponent) {
        const component = entity.addComponent(RotateComponent);
        component.speed = 1;
      } else if (!held && hasRotateComponent) {
        entity.removeComponent(RotateComponent);
      }
    });
  }
}

export default function config(world) {
  world.registerComponent(RotateComponent);
  world.registerComponent(RotateOnHeldComponent);

  world.registerSystem(RotateOnHeldSystem);
  world.registerSystem(RotateSystem);

  const spinningCubeEntity = new MeshEntity(new BoxBufferGeometry(), new MeshBasicMaterial());
  spinningCubeEntity.addComponent(RotateComponent);
  world.root.add(spinningCubeEntity);

  const imageEntity = new ImageEntity();
  imageEntity.src =
    "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Firefox_logo%2C_2019.svg/1200px-Firefox_logo%2C_2019.svg.png";
  imageEntity.position.y = 3;
  imageEntity.addComponent(InteractableComponent);
  imageEntity.addComponent(RotateOnHeldComponent);
  world.root.add(imageEntity);
}