Эй, Элисса, приснилась безумная идея: давай создадим небольшой AR-песочницу, где студенты смогут реально строить и тестировать код в виртуальной игровой площадке – типа Minecraft, только с живой отладкой, да ещё и добавим немного хакерства для остроты.

Отлично, Элисса. Начнём с простейшей трёхмерной сетки, прикрутим блоки кода, которые запускают скрипты в реальном времени, а потом добавим небольшую игрушку – песочницу для взлома, чтобы потренировать безопасность. Интерфейс – один экран, один тап – и ты переключаешься между режимом “игра” и “отладка”. Пусть студенты наглядно видят, что происходит, когда код даёт сбой. Быстрая разработка, мгновенные исправления, немного весёлого хакинга – чтобы мозг не заржавел. Будем прототипировать, тестировать, подкручивать и повторять – проще простого.

Отлично, давай быстро запустим Three.js playground. Я настрою выбор блоков в стиле Lego, добавлю JS-фрагменты и сверху выведу консоль. Для "хаков" добавим пару преднамеренных "дыр" в блоки и посмотрим, как они их будут исправлять в реальном времени. Держи панель инструментов аккуратной, с одной стороны, без этих бесконечных выпадающих меню. Будем двигаться быстро – прототип, тест, подгонка, повтор. Пора дать этим ребятам действительно попрактиковаться в программировании, с их собственным кодом!

Звучит идеально. Давай взломаем систему, подкинем пару "глючных" блоков и посмотрим, как они будут исправлять всё в реальном времени. Одна строка в панели инструментов, переключатель режима взлома, кнопка сброса – проще простого. Погнали!

Конечно! Вот тебе быстрый "стартовый набор" – просто брось этот код в обычный HTML-файл, и сможешь всё поправить. Он строит трёхмерную сетку в Three.js, позволяя тебе кликать по кубам, чтобы добавлять небольшие фрагменты JS-кода, показывает живую консоль и имеет переключатель "режима хакера" + кнопку сброса. Первый куб уже "багги" – он выводит фиктивную ошибку, чтобы ты мог исправлять её на лету. ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Snap‑Debug Sandbox</title> <style> body{margin:0;overflow:hidden} #toolbar{position:fixed;top:10px;left:10px;background:#222;color:#fff;padding:5px 10px;border-radius:4px} #toolbar button{margin-right:5px} #console{position:fixed;bottom:0;left:0;width:100%;max-height:30%;background:rgba(0,0,0,.8);color:#0f0;font-family:monospace;overflow:auto;padding:5px} </style> </head> <body> <div id="toolbar"> <button id="hackBtn">Hack Mode: OFF</button> <button id="resetBtn">Reset Scene</button> </div> <div id="console"></div> <script src="https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.min.js"></script> <script> // --- basic scene --- const scene = new THREE.Scene(); const cam = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.1,1000); cam.position.set(8,8,8); cam.lookAt(0,0,0); const renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement); const gridHelper = new THREE.GridHelper(10,10); scene.add(gridHelper); // --- data structures --- const bricks = []; // array of brick objects {mesh, code} const hackMode = {active:false}; // --- helper functions --- function createBrick(x,y,z,code,buggy=false){ const geom = new THREE.BoxGeometry(1,1,1); const mat = new THREE.MeshBasicMaterial({color:buggy?0xff5555:0x55ff55}); const mesh = new THREE.Mesh(geom,mat); mesh.position.set(x,y,z); scene.add(mesh); bricks.push({mesh, code, buggy}); } function resetScene(){ bricks.forEach(b=>scene.remove(b.mesh)); bricks.length = 0; console.log("Scene reset"); // add some clean bricks for(let i=0;i<5;i++) createBrick(i,0.5,0,"console.log('brick "+i+"');"); // add one buggy brick createBrick(2,0.5,2,"console.log('buggy code');throw new Error('oops');",true); } function log(msg){ document.getElementById('console').innerText+=msg+"\n"; } // --- event handling --- const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function onClick(e){ mouse.x = (e.clientX / window.innerWidth) * 2 - 1; mouse.y = -(e.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse,cam); const intersects = raycaster.intersectObjects(bricks.map(b=>b.mesh)); if(intersects.length){ const hit = intersects[0].object; const brick = bricks.find(b=>b.mesh===hit); if(hackMode.active){ // let user patch code const newCode = prompt("Edit code:",brick.code); if(newCode!==null){ brick.code = newCode; } }else{ try{ eval(brick.code); log("Executed "+brick.code); } catch(e){ log("ERROR: "+e.message); } } } } window.addEventListener('click',onClick); document.getElementById('hackBtn').addEventListener('click',()=>{ hackMode.active=!hackMode.active; document.getElementById('hackBtn').innerText=`Hack Mode: ${hackMode.active?'ON':'OFF'}`; }); document.getElementById('resetBtn').addEventListener('click',resetScene); // --- render loop --- function animate(){ requestAnimationFrame(animate); renderer.render(scene,cam); } animate(); // --- initial state --- resetScene(); </script> </body> </html> ``` **Как это работает** 1. **Сетка и кубы** – пять зелёных кубов, которые выводят безобидные логи, плюс один красный "багги" куб, который выбрасывает ошибку при клике. 2. **Режим хакера** – когда переключатель включён, клик по кубу открывает окно запроса, чтобы ты мог редактировать JS-код прямо в нём. 3. **Сброс** – очищает всё и создаёт новый набор чистых кубов. 4. **Консоль** – нижняя панель показывает результаты и сообщения об ошибках мгновенно. Вставь этот файл в браузер, кликай по кубам, включай режим хакера, исправляй эту ошибку и наблюдай, как оживает консоль!