isotope
isotope copied to clipboard
How can we use layout without DOM?
For example, I just want to tell Isotope to make a layout, then apply the numbers to custom objects (f.e. Three.js, canvas 2D, pixi.js, etc).
How do we use isotope layout without it automatically applying to DOM? Example:
const meshes = [/* An array of Three.js meshes. */]
const iso = new Isotope()
// ...
iso.layout();
for (const mesh of meshes) {
mesh.position.x = /*apply value from iso*/
mesh.position.y = /*apply value from iso*/
}
renderer.render(scene, camera);
I do also have custom elements (LUME) that render using WebGL. Is there a way to tell isotope how to map values to attributes of DOM elements it controls? Example:
<lume-scene webgl id="scene">
<lume-mesh has="box-geometry physical-material" class=".card"></lume-mesh>
...
</lume-scene>
<script>
var iso = new Isotope(document.querySelector('#scene'), {
itemSelector: '.card',
// ...
applyValue(el, {x, y, width, height}) { // hypothetical
// ... apply value to `el` (<lume-mesh>) ...
}
});
iso.layout();
// or similar to three.js example
for (const el of document.querySelector('lume-mesh')) {
el.position.x = /*apply value from iso*/
el.position.y = /*apply value from iso*/
}
</script>