Flyheck

Нет смысла удалять, т.к. это не является критической оптимизацией. Гарантий того, что он удалится сборщиком мусора так же нет.

Чтобы увеличить куб по оси Y при клике, вам нужно использовать состояние и функцию для обработки клика. Затем, вы можете использовать Framer Motion для анимации изменения размера. Вот пример кода, который делает это:

import React, { useState } from "react";
import { Canvas } from "@react-three/fiber";
import { motion } from "framer-motion";

const Cube = (props) => {
  const [scaleY, setScaleY] = useState(1);

  const handleCubeClick = () => {
    setScaleY((prevScaleY) => (prevScaleY === 1 ? 2 : 1));
  };

  return (
    <div id="canvas-container">
      <Canvas>
        <ambientLight />
        <pointLight position={[10, 20, 15]} />
        <motion.mesh
          rotation={[0, 15, 0]}
          position={[1, 1, 1]}
          onClick={handleCubeClick}
          scale={[1, scaleY, 1]}
          transition={{ duration: 0.5 }}
        >
          <boxGeometry attach="geometry" args={[0.3, 0.3, 0.3]} />
          <meshStandardMaterial attach="material" color={"#b467ce"} />
        </motion.mesh>
      </Canvas>
    </div>
  );
};

export default Cube;

В этом примере, я добавил состояние scaleY, которое будет меняться при клике на куб. В функции handleCubeClick мы переключаем значение между 1 и 2. Затем, я добавил свойство scale к motion.mesh, которое меняет масштаб куба по оси Y. Я также добавил transition с длительностью анимации в 0.5 секунды.

Теперь при клике на куб, он будет увеличиваться и уменьшаться по оси Y с анимацией.

Возможно, у вас есть какой-то другой код или сторонний скрипт, который вызывает прокрутку обратно наверх после вашего события прокрутки. Для решения этой проблемы я рекомендую следующее:

Убедитесь, что у вас нет других скриптов или плагинов, которые могут вызывать прокрутку страницы. Временно отключите их, чтобы проверить, не они ли вызывают такое поведение.

Используйте setTimeout для добавления небольшой задержки перед выполнением прокрутки. Это может помочь, если другой скрипт выполняет прокрутку после вашего события прокрутки.

window.onload = function() {
  setTimeout(function() {
    window.scrollTo({
      top: 100,
      left: 0,
      behavior: "smooth"
    });
  }, 500); // Задержка в 500 миллисекунд
};

Вы можете попробовать использовать стек вызовов для поиска места, где вызывается лишняя прокрутка.

window.addEventListener("scroll", function() {
  console.log("Прокрутка вызвана", new Date().getTime());
  console.trace(); // Вывод стека вызовов
});

В некоторых ситуациях свойство pointer-events: none может не работать на мобильных устройствах. Чтобы обойти это ограничение, вы можете использовать следующий подход:
Удалите свойство pointer-events: none из объекта draggedElementStyles.
Вместо этого добавьте следующую функцию, чтобы определить элемент, который находится под указателем:

function elementFromPointWithExclusion(x, y) {
  // Сначала скрываем draggedElement
  draggedElement.style.display = 'none';
  // Затем получаем элемент, который находится под указателем
  const element = document.elementFromPoint(x, y);
  // Возвращаем draggedElement обратно на место
  draggedElement.style.display = '';
  return element;
}

Замените строки console.log(event.target) и logEventTarget.innerText = event.target.outerHTML;
на следующий код:

const targetElement = elementFromPointWithExclusion(event.clientX, event.clientY);
console.log(targetElement);
logEventTarget.innerText = targetElement.outerHTML;

Теперь вместо использования event.target, вы будете использовать элемент, найденный с помощью функции elementFromPointWithExclusion. Это позволит вам определить элемент, который находится под перетаскиваемым элементом, даже на мобильных устройствах.

Хотя это и может показаться костылем, на самом деле это общепринятый подход для решения данной проблемы.
К сожалению, существует ограничение в поведении событий touch на мобильных устройствах, из-за которого они не пропускаются через элементы с pointer-events: none. Это означает, что нет прямого способа для получения элемента под перетаскиваемым объектом с использованием только touch событий. Вместо этого, document.elementFromPoint() используется для обхода этой проблемы.