30:T7c4,# AntCraft World building in the style of Minecraft, but with a user that can walk on any surface. ## User interface >**Keyboard** >*Left, Right* arrow keys: turn the player 90 degrees to the left or right. >*Up* key : moves the player ahead one block >*Down* key: move the player back one block >*Space* key: creates one block in front and below the user if that position is empty. Otherwise, creates one block in front of the user, if that position is empty. Otherwise, does nothing. >*Letter, or other printable character* key: creates a block containing that character facing the user. Uses the same rules for placement as the *space* key. >*Backspace or Delete* key: removes the block/character in front of the user, if one exists. Otherwise removes the block in front and below the user, if one exists. >*Tab* key: Toggles the rendering from/to the overview camera (*overview mode*) and the camera that follows the user (*ant mode*). >**Mouse in *ant mode*** > Clicking on the canvas performs the same functions as movement keys, as shown in the map below:

Left	Up	Right
	Down

>**Mouse in *overview mode*** > > *Dragging* the mouse with the *left* button pressed rotates the camera around the center of interest (usually, 0,0,0 unless panning) > > *Dragging* the mouse with the *right* button pressed pans the camera > > *Dragging* the mouse with the *middle* button pressed or using the mouse wheel zooms in/out >**Menu** > >*Reset* : resets the world to a default state > >*Load* : lets you load a world from a text file (saved with *Save*) > >*Save* : lets you save your world to a text file 31:T42d,// Function that can be called to write a file with a text representation of the world map saveWorldMap = { var a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; return function (fileName) { let copyMap = new Map(); { // Add player info to map that will be saved let address = camera.position.toArray(); let quat = camera.quaternion.toArray(); let type = "player"; copyMap.set(key(address), { address, quat, type }); } for (let [key, value] of worldMap) { if (value.type == "player") continue; // Will disregard the player let copyValue = { ...value }; // A copy of the value delete copyValue.mesh; // Remove the three mesh object, if any copyMap.set(key, copyValue); } let text = JSON.stringify([...copyMap]); let blob = new Blob([text], { type: "text/plain;charset=utf-8" }); var url = window.URL.createObjectURL(blob); a.href = url; a.download = fileName; a.click(); window.URL.revokeObjectURL(url); }; }32:Tbd3,// // Animation utilities // animationManager = { // Map of animations still being played out let animMap = new Map(); // Starts animation to apply rotation quat to obj3d. // When animation is finished, calls callback() if defined. // The animation has duration steps * stepTime. function rotate(obj3d, quat, callback, steps = 20, stepTime = 20) { if (animMap.has(obj3d)) return; // Ignore if not finished animating let oldRot = obj3d.quaternion.clone(); let newRot = obj3d.quaternion.clone().multiply(quat); let counter = 0; let id; // Clean up code const atEnd = () => { clearInterval(id); animMap.delete(obj3d); if (callback) callback(); }; // Animation callback const animation = () => { counter += 1; THREE.Quaternion.slerp(oldRot, newRot, obj3d.quaternion, counter / steps); if (counter == steps) { atEnd(); } }; // Mark the animation map animMap.set(obj3d, 1); // start animation id = setInterval(animation, stepTime); } // Starts animation to translate obj3d to a new position. // When animation is finished, calls callback() if defined. // The animation has duration steps * stepTime. function translate(obj3d, newPos, callback, steps = 20, stepTime = 20) { if (animMap.has(obj3d)) return; // Ignore if not finished animating let oldPos = obj3d.position.clone(); let counter = 0; let id; // Clean up code const atEnd = () => { clearInterval(id); animMap.delete(obj3d); if (callback) callback(); }; // Animation callback const animation = () => { counter += 1; obj3d.position.lerpVectors(oldPos, newPos, counter / steps); if (counter == steps) atEnd(); }; // Mark the animation map animMap.set(obj3d, 1); // start animation id = setInterval(animation, stepTime); } // Starts animation to rotate and translate obj3d // When animation is finished, calls callback() if defined. // The animation has duration steps * stepTime. function translateRotate( obj3d, newPos, quat, callback, steps = 20, stepTime = 20 ) { if (animMap.has(obj3d)) return; // Ignore if not finished animating let oldPos = obj3d.position.clone(); let oldRot = obj3d.quaternion.clone(); let newRot = obj3d.quaternion.clone().multiply(quat); let counter = 0; let id; // Clean up code const atEnd = () => { clearInterval(id); animMap.delete(obj3d); if (callback) callback(); }; // Animation callback const animation = () => { counter += 1; obj3d.position.lerpVectors(oldPos, newPos, counter / steps); THREE.Quaternion.slerp(oldRot, newRot, obj3d.quaternion, counter / steps); if (counter == steps) atEnd(); }; // Mark the animation map animMap.set(obj3d, 1); // start animation id = setInterval(animation, stepTime); } return { animMap, rotate, translate, translateRotate }; }33:T1879,// // Sets up callbacks for mouse and keyboard events. Renders the scene while // animations are taking place // interaction = { reset; // Quaternions for the 4 3d rotations const halfTurn = Math.PI / 2; const rot = (dx, dy) => new THREE.Quaternion().setFromEuler( new THREE.Euler(dx * halfTurn, dy * halfTurn, 0) ); const rotations = { left: rot(0, 1), right: rot(0, -1), up: rot(1, 0), down: rot(-1, 0) }; // Returns the local axes of a 3d object in world coordinates const localAxes = (obj3d) => { let axes = [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()]; obj3d.matrix.extractBasis(...axes); return axes; }; // The cell in front of the user const inFront = () => positionToCell(camera.position.clone().sub(localAxes(camera)[2])); // The cell behind the user const behind = () => positionToCell(camera.position.clone().add(localAxes(camera)[2])); // The cell in front and below the user const inFrontBelow = () => { let axes = localAxes(camera); return positionToCell(camera.position.clone().sub(axes[1]).sub(axes[2])); }; // The cell behind and below the user const behindBelow = () => { let axes = localAxes(camera); return positionToCell(camera.position.clone().sub(axes[1]).add(axes[2])); }; // Actions const turnLeft = () => { animationManager.rotate(camera, rotations.left, render); }; const turnRight = () => { animationManager.rotate(camera, rotations.right, render); }; const moveAhead = () => { if (worldMap.has(key(inFrontBelow())) && !worldMap.has(key(inFront()))) { // Straight ahead animationManager.translate(camera, cellToPosition(inFront()), render); } else if (worldMap.has(key(inFront()))) { // Walk on wall ahead animationManager.rotate(camera, rotations.up, render); } else if (!worldMap.has(key(inFrontBelow()))) { // Walk around ledge ahead let A = cellToPosition(inFront()); let B = cellToPosition(inFrontBelow()); let pos2 = camera.position.clone().lerp(A, 0.5); let pos3 = A.clone().lerp(B, 0.5); animationManager.translate( camera, pos2, () => { animationManager.translateRotate( camera, pos3, rotations.down, () => { animationManager.translate(camera, B, render, 10); }, 10 ); }, 10 ); } }; const moveBack = () => { if (worldMap.has(key(behindBelow())) && !worldMap.has(key(behind()))) { // Straight back animationManager.translate(camera, cellToPosition(behind()), render); } else if (worldMap.has(key(behind()))) { // Walk on wall behind animationManager.rotate(camera, rotations.down, render); } else if (!worldMap.has(key(behindBelow()))) { // Walk around ledge behind let A = cellToPosition(behind()); let B = cellToPosition(behindBelow()); let pos2 = camera.position.clone().lerp(A, 0.5); let pos3 = A.clone().lerp(B, 0.5); animationManager.translate( camera, pos2, () => { animationManager.translateRotate( camera, pos3, rotations.up, () => { animationManager.translate(camera, B, render, 10); }, 10 ); }, 10 ); } }; const makeBlock = (cell) => { if (!worldMap.has(key(cell))) { worldMap.set(key(cell), { address: cell, type: "block" }); makeWorldBlocks(); } }; const removeBlock = (cell) => { if (worldMap.has(key(cell))) { worldMap.delete(key(cell)); makeWorldBlocks(); } }; const makeLetter = (cell, char) => { if (!worldMap.has(key(cell))) { worldMap.set(key(cell), { address: cell, type: "char", quat: camera.quaternion.toArray(), char }); makeWorldBlocks(); } }; const switchCameras = () => { controls.enabled = !controls.enabled; render(); }; // Keyboard callback const keyboardCallback = (e) => { e.preventDefault(); switch (e.key) { case "ArrowLeft": turnLeft(); break; case "ArrowRight": turnRight(); break; case "ArrowUp": moveAhead(); break; case "ArrowDown": moveBack(); break; case "Tab": switchCameras(); break; case "Delete": case "Backspace": { let cell = inFront(); if (worldMap.has(key(cell))) removeBlock(cell); else { cell = inFrontBelow(); if (worldMap.has(key(cell))) removeBlock(cell); } render(); break; } case " ": { let cell = inFrontBelow(); if (!worldMap.has(key(cell))) makeBlock(cell); else { cell = inFront(); if (!worldMap.has(key(cell))) makeBlock(cell); } render(); break; } default: if (e.key.length == 1) { let cell = inFrontBelow(); if (!worldMap.has(key(cell))) makeLetter(cell, e.key); else { cell = inFront(); if (!worldMap.has(key(cell))) makeLetter(cell, e.key); } render(); } break; } }; // Mouse callback const mouseCallback = (e) => { if (controls.enabled) return; if (e.offsetX < canvas.width / 3) turnLeft(); else if (e.offsetX > (canvas.width / 3) * 2) turnRight(); else if (e.offsetY < canvas.height / 2) moveAhead(); else moveBack(); }; // Register callbacks canvas.addEventListener("keydown", keyboardCallback); canvas.addEventListener("mousedown", mouseCallback); // House cleaning for when this cell is redefined invalidation.then(() => { canvas.removeEventListener("keydown", keyboardCallback); canvas.removeEventListener("mousedown", mouseCallback); }); // Loop to render frames while animations are taking place for (let frame = 1; ; frame++) { if (animationManager.animMap.size > 0) { render(); yield `${frame} rendered`; } else yield `${frame} (no render)`; } }34:T4a7,function makeWorldBlocks() { for (let obj of blocksGroup.children) { if (!worldMap.has(obj.key)) blocksGroup.remove(obj); } for (let [k, v] of worldMap) { if (!v.mesh) { if (v.type == "block") { v.mesh = new THREE.Mesh(blockGeometry, blockMaterial); } else if (v.type == "char") { let geom = textGeometry(v.char); // new THREE.TextGeometry(v.char, { // font, // size: 1, // height: 0.3, // curveSegments: 20, // bevelEnabled: true, // bevelThickness: 0.02, // bevelSize: 0.02, // bevelOffset: 0, // bevelSegments: 20 // }); geom.computeBoundingBox(); //geom.computeVertexNormals(); let center = geom.boundingBox.getCenter(new THREE.Vector3()); let letter = new THREE.Mesh(geom, letterMaterial); letter.position.set(-center.x, -0.5, -center.z); v.mesh = new THREE.Group(); v.mesh.add(letter); } else continue; v.mesh.position.set(...v.address); if (v.quat) v.mesh.quaternion.set(...v.quat); v.mesh.key = key(v.address); blocksGroup.add(v.mesh); } } }35:[{"id":"a8f93704b6a7934eb4275ab823bdcc1efa88388a23c6d3ee4f67bf007a31b064608f33fb05871f6c35305bfcdbb6f185b88ad53f1b863c17af72674d0ba6c17b","href":"https://static.observableusercontent.com/files/a8f93704b6a7934eb4275ab823bdcc1efa88388a23c6d3ee4f67bf007a31b064608f33fb05871f6c35305bfcdbb6f185b88ad53f1b863c17af72674d0ba6c17b","name":"ny@2.png","type":"image/png","lastModified":1631641130557.023,"size":2028009},{"id":"2fa3a6077ff3cf920974be49b4a35da71179ee5185e688c69c654192b93d3f68da404129a44739abc6240fb716902277ce04ba642174457ffefff494f502f593","href":"https://static.observableusercontent.com/files/2fa3a6077ff3cf920974be49b4a35da71179ee5185e688c69c654192b93d3f68da404129a44739abc6240fb716902277ce04ba642174457ffefff494f502f593","name":"px@2.png","type":"image/png","lastModified":1631641130088.721,"size":1498221},{"id":"7b11ddae6623b952dcd6fbf85aafc6d55dd85425f09523d89ad1df64a9e4a5e43e7b61378bf973180167885b309bb22fdf596f00f42c0b09c3cd0861593500e8","href":"https://static.observableusercontent.com/files/7b11ddae6623b952dcd6fbf85aafc6d55dd85425f09523d89ad1df64a9e4a5e43e7b61378bf973180167885b309bb22fdf596f00f42c0b09c3cd0861593500e8","name":"nx@3.png","type":"image/png","lastModified":1631641130331.954,"size":1516970},{"id":"318fe0327f8b94662fd0fdb5a85acd50355d26052bd371b1c155e02e197947ddbfc677d500d052f609d36b53570d71cd65a75e2d9f70e0b00a028b5cd2a76775","href":"https://static.observableusercontent.com/files/318fe0327f8b94662fd0fdb5a85acd50355d26052bd371b1c155e02e197947ddbfc677d500d052f609d36b53570d71cd65a75e2d9f70e0b00a028b5cd2a76775","name":"nz@2.png","type":"image/png","lastModified":1631641130132.853,"size":1367565},{"id":"83ede3f33378bd70cf6e05eeaae704587b8f4fc8b4e6f381a08910e7a31ecddf058149aa1bf88804cf6a09875b5ad2c4fc33a779df23f4c996feb8497c2e7ffc","href":"https://static.observableusercontent.com/files/83ede3f33378bd70cf6e05eeaae704587b8f4fc8b4e6f381a08910e7a31ecddf058149aa1bf88804cf6a09875b5ad2c4fc33a779df23f4c996feb8497c2e7ffc","name":"py@2.png","type":"image/png","lastModified":1631641129967.16,"size":1248106},{"id":"e4c1349657670424dab8e7388f6b3fd810378fae74705f47bae48458e40eedfe84edd341f780b9ebf706de8b5679be2a20cee95b4ccdd693fe4ef7da5cb98e08","href":"https://static.observableusercontent.com/files/e4c1349657670424dab8e7388f6b3fd810378fae74705f47bae48458e40eedfe84edd341f780b9ebf706de8b5679be2a20cee95b4ccdd693fe4ef7da5cb98e08","name":"pz@2.png","type":"image/png","lastModified":1631641129845.136,"size":1203619}] 2e:{"title":"AntCraft","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"// The main canvas\n// Note : the attribute tabindex is set to 1 to allow it to receive keyboard focus\ncanvas = html`