31:T838,# AntCraft (incomplete) World building in the style of Minecraft, but with a user that can walk on any surface. ## **To do: Change the following cells** 1. animationManager 2. interaction 3. makeWorldBlocks ## 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 32: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); }; }33:T79b,// // 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); } return { animMap, rotate, translate }; }34:Tb07,// // 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])); // Actions const turnLeft = () => { animationManager.rotate(camera, rotations.left, render); }; const turnRight = () => { animationManager.rotate(camera, rotations.right, render); }; const moveAhead = () => { animationManager.translate(camera, cellToPosition(inFront()), render); }; const moveBack = () => { animationManager.translate(camera, cellToPosition(behind()), render); }; 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": case " ": default: 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)`; } }35:[{"id":"318fe0327f8b94662fd0fdb5a85acd50355d26052bd371b1c155e02e197947ddbfc677d500d052f609d36b53570d71cd65a75e2d9f70e0b00a028b5cd2a76775","href":"https://static.observableusercontent.com/files/318fe0327f8b94662fd0fdb5a85acd50355d26052bd371b1c155e02e197947ddbfc677d500d052f609d36b53570d71cd65a75e2d9f70e0b00a028b5cd2a76775","name":"nz@2.png","type":"image/png","lastModified":1631743985183.839,"size":1367565},{"id":"e4c1349657670424dab8e7388f6b3fd810378fae74705f47bae48458e40eedfe84edd341f780b9ebf706de8b5679be2a20cee95b4ccdd693fe4ef7da5cb98e08","href":"https://static.observableusercontent.com/files/e4c1349657670424dab8e7388f6b3fd810378fae74705f47bae48458e40eedfe84edd341f780b9ebf706de8b5679be2a20cee95b4ccdd693fe4ef7da5cb98e08","name":"pz@2.png","type":"image/png","lastModified":1631743985183.839,"size":1203619},{"id":"a8f93704b6a7934eb4275ab823bdcc1efa88388a23c6d3ee4f67bf007a31b064608f33fb05871f6c35305bfcdbb6f185b88ad53f1b863c17af72674d0ba6c17b","href":"https://static.observableusercontent.com/files/a8f93704b6a7934eb4275ab823bdcc1efa88388a23c6d3ee4f67bf007a31b064608f33fb05871f6c35305bfcdbb6f185b88ad53f1b863c17af72674d0ba6c17b","name":"ny@2.png","type":"image/png","lastModified":1631743985183.839,"size":2028009},{"id":"83ede3f33378bd70cf6e05eeaae704587b8f4fc8b4e6f381a08910e7a31ecddf058149aa1bf88804cf6a09875b5ad2c4fc33a779df23f4c996feb8497c2e7ffc","href":"https://static.observableusercontent.com/files/83ede3f33378bd70cf6e05eeaae704587b8f4fc8b4e6f381a08910e7a31ecddf058149aa1bf88804cf6a09875b5ad2c4fc33a779df23f4c996feb8497c2e7ffc","name":"py@2.png","type":"image/png","lastModified":1631743985183.839,"size":1248106},{"id":"7b11ddae6623b952dcd6fbf85aafc6d55dd85425f09523d89ad1df64a9e4a5e43e7b61378bf973180167885b309bb22fdf596f00f42c0b09c3cd0861593500e8","href":"https://static.observableusercontent.com/files/7b11ddae6623b952dcd6fbf85aafc6d55dd85425f09523d89ad1df64a9e4a5e43e7b61378bf973180167885b309bb22fdf596f00f42c0b09c3cd0861593500e8","name":"nx@3.png","type":"image/png","lastModified":1631743985183.839,"size":1516970},{"id":"2fa3a6077ff3cf920974be49b4a35da71179ee5185e688c69c654192b93d3f68da404129a44739abc6240fb716902277ce04ba642174457ffefff494f502f593","href":"https://static.observableusercontent.com/files/2fa3a6077ff3cf920974be49b4a35da71179ee5185e688c69c654192b93d3f68da404129a44739abc6240fb716902277ce04ba642174457ffefff494f502f593","name":"px@2.png","type":"image/png","lastModified":1631743985183.839,"size":1498221}] 2f:{"title":"AntCraft (incomplete)","cells":[{"id":0,"value":"$31","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`