你有这个React-Three-Fiber的解决方案吗？

Question

我第一次问问题，然后我就停滞不前了……

我正试着用React-Three-Fiber做一个滑块，但我似乎不能让滑块可拖动。

下面是我的代码：

  let canvas = document.querySelector(".canvas")
  let pressed = false;
  let startx;
  let x;

  canvas.addEventListener('mousedown', (e) => {
    pressed = true;
    startx = e.offsetX;
    canvas.style.cursor = "grabbing";
  });

  canvas.addEventListener('mouseenter', () => {
    canvas.style.cursor = "grab";
  })

  canvas.addEventListener('mouseup', () => {
    canvas.style.cursor = "grab";
    pressed = false;
  })

  canvas.addEventListener('mousemove', (e) => {
    if(!pressed) return;
    e.preventDefault();

    x = -e.offsetX / 200;
    position = x / 10;
  })

你有解决方案让它工作吗？

谢谢大家！

Answer 1

我会将画布包装到一个div中，并使用常规的react事件。你也可以使用常规的dom overflow:在画布前面滚动div，它们在移动端默认支持抓取。

一些例子

webgl https://codesandbox.io/s/minimap-qf8d0中实现的涉及https://codesandbox.io/s/tying-canvas-to-scroll-offset-itfgk

• more的

• basic scroll https://codesandbox.io/s/tying-canvas-to-scroll-offset-itfgk

• more