// © Головин Г.Г., Экспериментальная модель, 2023 'use strict'; let d3=300,tv3={x:150,y:150,z:60}; let deg2={x:1,y:1,z:1},show=false; // обработчики событий в форме function changeAxis(val,caller) { deg2[val]=0+caller.target.checked; } function changeDistance(caller) { d3=caller.target.valueAsNumber; } function changeTv(val,caller) { tv3[val]=caller.target.valueAsNumber; } function showCenter(caller) { show=caller.target.checked; } const cube3 = new Cube(50,50,50,200); const canvas3 = document.getElementById('canvas3'); // перетаскивание центральной точки мышью let msBtnPressed = false; canvas3.onmouseup = ()=> msBtnPressed=false; canvas3.onmousedown = (caller)=> { msBtnPressed=true; canvas3.onmousemove(caller); } canvas3.onmousemove = function(caller) { if (msBtnPressed && show) { tv3.x=caller.offsetX; tv3.y=caller.offsetY; document.getElementById('rangeX').value=caller.offsetX; document.getElementById('resultX').value=caller.offsetX; document.getElementById('rangeY').value=caller.offsetY; document.getElementById('resultY').value=caller.offsetY; } } // поворот фигуры и обновление изображения function repaint3() { cube3.rotate(deg2, t0); // рисуем перспективную проекцию drawFigure(canvas3, cube3.projection('perspective', tv3, d3)); // центральная точка перспективной проекции if (show) centerPoint(canvas3); } // центральная точка перспективной проекции function centerPoint(canvas) { const context = canvas.getContext('2d'); context.beginPath(); context.lineWidth = 2.2; context.strokeStyle = '#222'; context.arc(tv3.x, tv3.y, 5.5, 0, 2*Math.PI); context.stroke(); } // после загрузки страницы, задаём частоту обновления изображения 20 Гц document.addEventListener('DOMContentLoaded',()=>setInterval(repaint3,50));