Panning / Orbit Controls

I’m trying to implement a panning system on scroll events, and I have managed to get something working but it appears I’ve done it in the slowest way possible.

I’ve noticed you’re using orbitalControls here (https://codesandbox.io/embed/mo0xrqrj79) and I’m trying to jam it into my system with little success. Are you able to explain a little how that all works?

It looks like the orbital controls tell the renderer how to position the camera, and you need to use useRender to tell the objects to rerender, and. Is that correct?

Here’s my very slow attempt a panning (sorry, I couldn’t get it rendering correctly on CodeSandbox)

import React, { useMemo, useState } from 'react';
import * as THREE from 'three/src/Three'
import { Canvas } from 'react-three-fiber'
import _ from 'lodash'

function Extrusion({ x, y, width, height, radius, ...props }) {
  const roundedRect = useMemo(() => {
    const roundedRect = new THREE.Shape()
    roundedRect.moveTo(x, y + radius);
    roundedRect.lineTo(x, y + height - radius);
    roundedRect.quadraticCurveTo(x, y + height, x + radius, y + height);
    roundedRect.lineTo(x + width - radius, y + height);
    roundedRect.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
    roundedRect.lineTo(x + width, y + radius);
    roundedRect.quadraticCurveTo(x + width, y, x + width - radius, y);
    roundedRect.lineTo(x + radius, y);
    roundedRect.quadraticCurveTo(x, y, x, y + radius);
    return roundedRect
  }, [x, y, width, height, radius])

  return (
    <mesh>
      <extrudeGeometry name="geometry" args={[roundedRect, props]} />
      <meshNormalMaterial name="material" />
    </mesh>
  )
}

function Bar({ start, end, yIndex }) {
  return <Extrusion
    x={start}
    y={yIndex}
    height={10}
    width={end - start}
    radius={3}
    bevelEnabled={false}
    depth={10}
  />
}

const makeRandomBar = () => {
  const start = _.random(-1000, 1000)
  const length = _.random(50, 500)
  const yIndex = _.random(-1000, 1000)
  return [start, start + length, yIndex]
}

const bars = _.range(0, 250).map(n => makeRandomBar())

function App() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const scrollFunc = e => {
    setX(x + e.deltaX)
    setY(y + e.deltaY)
  }
  return (
    <div style={{ width: "100%", height: "100%", position: "absolute" }}>
      <Canvas camera={{ position: [0, 0, 300] }} onWheel={scrollFunc}>
        <group position={[x, y, 0]}>
          {bars.map(b => <Bar start={b[0]} end={b[1]} yIndex={b[2]} />)}
        </group>
      </Canvas>
    </div>
  );
}

export default App;

[Alex-DG]

@gino8080 you can also import OrbitalControl from drei

[ryanking1809]

Ok, got it working thanks! Interestingly you need to add the following css otherwise the orbit / pan breaks if any parent container has position: absolute.

html, body {
  height: 100%;
  width: 100%;
}