multi-view support

This commit is contained in:
David Allemang
2026-07-04 13:13:09 -04:00
parent ffd48b2585
commit a92ac6d736
4 changed files with 313 additions and 278 deletions

View File

@@ -38,7 +38,10 @@
Mauris ullamcorper accumsan dui vel pulvinar.
</p>
<div class="figure" id="demo-2"></div>
<div style="display: grid; grid-template-columns: 1fr 1fr;">
<div class="figure" id="demo-2"></div>
<div class="figure" id="demo-3"></div>
</div>
<p>
Curabitur tincidunt sapien et diam fringilla, eu accumsan odio faucibus. Orci varius natoque penatibus et magnis
@@ -51,67 +54,78 @@
<script type="module">
import {Engine} from './engine.js';
import {Diorama} from './diorama.js';
import {World} from './world.js';
async function initDocument() {
try {
const engine = new Engine();
document.getElementById('atlas-container')?.appendChild(engine.atlas.canvas);
// Pass the render trigger directly
const demo1 = new Diorama('demo-1', () => engine.requestRender());
demo1.camera.radius = 2;
demo1.camera.phi = 10;
demo1.camera.theta = -5;
demo1.world.setBlock('minecraft:redstone_wire', -1, 0, 0, {
const world1 = new World();
world1.setBlock('minecraft:redstone_wire', -1, 0, 0, {
east: 'none',
west: 'none',
north: 'none',
south: 'none',
power: '15'
});
demo1.world.setBlock('minecraft:repeater', 0, 0, 0, {
world1.setBlock('minecraft:repeater', 0, 0, 0, {
facing: 'east',
delay: '1',
locked: 'false',
powered: 'true'
});
demo1.world.setBlock('minecraft:oak_trapdoor', 2, 0, 0, {facing: 'east', half: 'bottom', open: 'true'});
demo1.world.setBlock('lodestone', 0, -1, 0);
demo1.world.setBlock('piston', 0, -2, 0, {facing: 'north', extended: 'false'});
world1.setBlock('minecraft:oak_trapdoor', 2, 0, 0, {facing: 'east', half: 'bottom', open: 'true'});
world1.setBlock('lodestone', 0, -1, 0);
world1.setBlock('piston', 0, -2, 0, {facing: 'north', extended: 'false'});
const demo2 = new Diorama('demo-2', () => engine.requestRender());
demo2.camera.radius = 3;
demo2.world.setBlock('minecraft:redstone_wire', 0, 0, 0, {
const world2 = new World();
world2.setBlock('minecraft:redstone_wire', 0, 0, 0, {
east: 'side',
west: 'none',
north: 'none',
south: 'none',
power: '0'
});
demo2.world.setBlock('minecraft:repeater', 1, 0, 0, {
world2.setBlock('minecraft:repeater', 1, 0, 0, {
facing: 'east',
delay: '4',
locked: 'false',
powered: 'false'
});
demo2.world.setBlock('minecraft:sticky_piston', 2, 0, 0, {facing: 'east', extended: 'false'});
demo2.world.setBlock('minecraft:sticky_piston', 2, 0, 1, {facing: 'east', extended: 'true'});
demo2.world.setBlock('minecraft:sticky_piston', 2, 0, 2, {facing: 'east', extended: 'true'});
demo2.world.setBlock('minecraft:piston_head', 2.5, 0, 1, {facing: 'east', short: 'true', type: 'sticky'});
demo2.world.setBlock('minecraft:piston_head', 3, 0, 2, {facing: 'east', short: 'false', type: 'sticky'});
demo2.world.setBlock('minecraft:glass', 3, 0, 0);
demo2.world.setBlock('minecraft:observer', 3.5, 0, 1, {facing: 'up', powered: 'true'});
demo2.world.setBlock('minecraft:redstone_block', 4, 0, 2);
demo1.centerView();
demo1.camera.saveState();
demo2.centerView();
demo2.camera.saveState();
world2.setBlock('minecraft:sticky_piston', 2, 0, 0, {facing: 'east', extended: 'false'});
world2.setBlock('minecraft:sticky_piston', 2, 0, 1, {facing: 'east', extended: 'true'});
world2.setBlock('minecraft:sticky_piston', 2, 0, 2, {facing: 'east', extended: 'true'});
world2.setBlock('minecraft:piston_head', 2.5, 0, 1, {facing: 'east', short: 'true', type: 'sticky'});
world2.setBlock('minecraft:piston_head', 3, 0, 2, {facing: 'east', short: 'false', type: 'sticky'});
world2.setBlock('minecraft:glass', 3, 0, 0);
world2.setBlock('minecraft:observer', 3.5, 0, 1, {facing: 'up', powered: 'true'});
world2.setBlock('minecraft:redstone_block', 4, 0, 2);
const demo1 = new Diorama('demo-1', world1, () => engine.requestRender())
demo1.radius = 2;
demo1.phi = 10;
demo1.theta = -5;
demo1.target = [0.5, 0, 0.5]
demo1.saveState()
engine.addDiorama(demo1);
const demo2 = new Diorama('demo-2', world2, () => engine.requestRender())
demo2.radius = 4;
demo2.theta = 180;
demo2.phi = 90;
demo2.centerView()
demo2.saveState()
engine.addDiorama(demo2);
const demo3 = new Diorama('demo-3', world2, () => engine.requestRender())
demo3.radius = 4;
demo3.theta = 0;
demo3.phi = 0;
demo3.centerView()
demo3.saveState()
engine.addDiorama(demo3);
// Fetch and build everything concurrently!
await engine.updateAll();
} catch (err) {