Public
Edited
Oct 21, 2024
Importers
2 stars
{
const view = html`<div style="height:500px"/>`;
yield view; // so that the div is aware of its dimensions
const renderer = jscadRenderer(view);
yield renderer; // the same node, but with the renderer bound to it
renderer.updateModel(jscad.primitives.cube({ size: 20 })).zoomToFit();
}
jscadRenderer = (container) => {
const perspectiveCamera = jscadReglRenderer.cameras.perspective;
const orbitControls = jscadReglRenderer.controls.orbit;
const gestures = Gestures(container);
const state = {
camera: { ...perspectiveCamera.defaults, position: [150, -180, 233] },
controls: { ...orbitControls.defaults },
entities: []
};
perspectiveCamera.setProjection(state.camera, state.camera, dims(container));
const drawCommands = jscadReglRenderer.drawCommands;
const render = jscadReglRenderer.prepareRender({ glOptions: { container } });
const staticEntities = axesAndGrid();
// infinite rendering loop
(function updateAndRender() {
const updateView = gestures.updateState(orbitControls, state);
if (updateView) {
const updated = orbitControls.update(state);
Object.assign(state.controls, updated.controls);
Object.assign(state.camera, updated.camera);
const entities = [...staticEntities, ...state.entities];
render({ drawCommands, camera: state.camera, entities });
}
requestAnimationFrame(updateAndRender);
})();
container.updateModel = (solids) => {
const solidArray = Array.isArray(solids) ? solids : [solids];
state.entities = jscadReglRenderer.entitiesFromSolids({}, solidArray);
return container;
};
container.zoomToFit = () => {
gestures.triggerZoomToFit();
return container;
};
return container;
}
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.
