French developer @ Uptale.
Machine learning, data,VR and 3D rendering. Sometimes front end when it's needed
aframePiano
registerNoteComponent()
function registerNoteComponent() {
aframe.registerComponent(`note`, {
schema: schema,
/**
* Initial creation and setting of the mesh.
*/
init: function() {
var data = this.data;
var el = this.el;
let height = 5;
let width = 0.95;
if (data.noteType == "sharp") {
height = 3;
width = 0.5;
}
// Create geometry.
this.geometry = new THREE.BoxBufferGeometry(width, height, 0.5);
let color = data.noteType == "sharp" ? "#000000" : "#FFFFFF";
// Create material.
this.material = new THREE.MeshStandardMaterial({
color: color
});
// Create mesh.
this.mesh = new THREE.Mesh(this.geometry, this.material);
// Set mesh on entity.
el.setObject3D('mesh', this.mesh);
let self = this;
this.el.addEventListener('generateNote', function(event) {
self.el.emit("animate");
self.el.getObject3D('mesh').material.color = new THREE.Color("#E4FF33");
setTimeout(function() {
self.el.emit("animate_back");
self.el.getObject3D('mesh').material.color = new THREE.Color(color);
}, animationDuration);
});
},
remove: function() {
this.el.removeObject3D('mesh');
}
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
