Cannot add OrbitControl from drei to this starter.

I try to add the OrbitControl from Drei to this project. With next-transpile-modules setup, the same code works well if I create the next.js project then import react-three-fiber, drei, etc. but I cannot make it work with this template. Here is how I edit the _canvas.jsx file. I’m I missing something? https://codesandbox.io/s/bold-monad-dqfr3?file=/src/components/layout/_canvas.jsx:0-1402

import { Canvas, useFrame } from '@react-three/fiber'
import { Preload } from '@react-three/drei'
import { A11yUserPreferences } from '@react-three/a11y'
import useStore from '@/helpers/store'
import { OrbitControls } from '@react-three/drei'
import React, { useRef, useState } from 'react'

function Box(props) {
  // This reference will give us direct access to the THREE.Mesh object
  const mesh = useRef()
  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)
  // Subscribe this component to the render-loop, rotate the mesh every frame
  useFrame((state, delta) => (mesh.current.rotation.x += 0.01))
  // Return the view, these are regular Threejs elements expressed in JSX
  return (
    <mesh
      {...props}
      ref={mesh}
      scale={active ? 1.5 : 1}
      onClick={(event) => setActive(!active)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

const LCanvas = ({ children }) => {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
      <OrbitControls />
    </Canvas>
  )
}

export default LCanvas

[njm222]

The sandbox was broken earlier… i.e. did not run (it is working now)

So if you inspect the elements you will see the dom element you referenced here:

import useStore from '@/helpers/store'
import { useRef } from 'react'

const Dom = ({ children }) => {
  const ref = useRef(null)
  useStore.setState({ dom: ref })
  return (
    <div
      className='absolute left-0 z-10 w-screen h-screen overflow-hidden dom'
      ref={ref}
    >
      {children}
    </div>
  )
}

export default Dom

is covering the canvas. so if you remove h-screen it should work

[pfortes]

If anyone encounters this error you should look at the changes for /layout/canvas.jsx in the commit: https://github.com/pmndrs/react-three-next/commit/3aa88a174035e0f3b1a69783d56d4f470745e251 This has the correct way to pass the dom events to the orbit controls.

const LControl = () => {
  const dom = useStore((state) => state.dom)
  const control = useRef(null)

  useEffect(() => {
    if (control) {
      dom.current.style['touch-action'] = 'none'
    }
  }, [dom, control])
  return <OrbitControls ref={control} domElement={dom.current} />
}