1/jekyll_site/js/spinning-cube2.js

// © Головин Г.Г., Экспериментальная модель, 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));