I’ve Component and System using ECSY Method e.g : ControllerComponent and ControllerSystem
import { Component, Types } from 'three/addons/libs/ecsy.module.js';
export class ControllerComponent extends Component { }
ControllerComponent.schema = {
isLeft: { type: Types.Boolean, default: false },
isRight: { type: Types.Boolean, default: false },
}
import { System } from "three/examples/jsm/libs/ecsy.module.js";
import { ControllerComponent } from "../components/ControllerComponent.js";
import { Object3D } from "../components/Object3DComponent.js";
import * as THREE from "three";
export class ControllerSystem extends System {
init(attributes) {
this.scene = attributes.scene;
this.controllers = attributes.controllers;
this.raycaster = new THREE.Raycaster();
this.tempMatrix = new THREE.Matrix4();
}
execute() {
let distance = null;
let intersectionsPoint = null;
let intersectingEntity = null;
let intersection;
this.queries.controllers.results.forEach(entity => {
const object = entity.getComponent(Object3D).object;
let intersections;
// if (this.scene.getObjectById(object.id)) {
// c.updateMatrixWorld();
// this.raycaster.setFromXRController(c);
// intersections = this.raycaster.intersectObject(object, false);
// if (intersections.length > 0) {
// intersection = intersections[0];
// if (intersectionsPoint == null || intersection.distance < distance) {
// intersectionsPoint = intersection.point;
// intersectingEntity = entity;
// distance = intersection.distance;
// }
// }
// }
});
// if (distance) {
// const object = intersection.object;
// }
}
}
ControllerSystem.queries = {
controllers: {
components: [ControllerComponent]
}
};
and i ve register for system and component
import { ControllerComponent } from "./components/ControllerComponent";
import { Object3D } from "./components/Object3DComponent";
import { ControllerSystem } from "./systems/ControllerSystem";
export class useRegister {
constructor(
{
world = null,
options = {
requiredFeatures: [],
panel: { mesh: [] },
controllers: [],
handPointers: [],
button: [{
mesh: null,
onClick: () => { }
}],
draggableReturn: [],
draggableDefault: [],
draggablePhysique: [{ mesh: null, body: null }],
template: null,
teleport: []
}
}
) {
const validFeatures = ['button', 'panel', 'draggable-return', 'draggable-physique', 'draggable-default', 'teleport']
if (!world.hasRegisteredComponent(Object3D)) {
world.registerComponent(Object3D);
}
if (!world.hasRegisteredComponent(ControllerComponent)) {
world.registerComponent(ControllerComponent);
world.registerSystem(ControllerSystem, { controllers: options.controllers, scene: options.template.scene });
}
options.requiredFeatures.forEach(val => {
switch (val.toLowerCase()) {
case 'draggable-return':
break;
case 'draggable-default':
if (options.draggableDefault) {
for (let i = 0; i < options.draggableDefault.length; i++) {
const entity = world.createEntity();
entity.addComponent(Object3D, { object: options.draggableDefault[i] });
entity.addComponent(ControllerComponent);
}
}
break;
case 'draggable-physique':
break;
default:
console.warn(`Invalid feature: ${val.toLowerCase()}.\nAvailable features are: ${validFeatures.join(', ')}`);
break;
}
})
}
}
but i cant understand , how to get button, joystick, and etc. i just wanna get that value. can you help me