Three-fiber OrbitControls and "R3F: Hooks can only be used within the Canvas component!" error #37
Description
Hey!
I just discovered this library and think it looks really interesting!
I did a small experiment to see if ipyreact could replace some stuff I've made in the past using pythreejs. However I ran into a minor snag when trying to bring in an <OrbitControls/> component that I was wondering any of you might help me solve?
I should also mention that my frontend experience is limited, so I might (hopefully) be asking a dumb question and it's also likely that my question isn't really related to ipyreact itself:)
Anyways, I started by using the ESM>Playground where I created a minimal three-fiber example hoping I would be able to get this to work in my jupyterlab environment.
import React, { useRef, useState } from "react"
import { Canvas, useFrame, useThree } from 'https://esm.sh/@react-three/fiber@8.13.0'
import { OrbitControls } from "https://esm.sh/@react-three/drei@9.68.6";
function Box({position, color}) {
const ref = useRef()
useFrame(() => (ref.current.rotation.x = ref.current.rotation.y += 0.01))
return (
<mesh position={position} ref={ref}>
<boxBufferGeometry args={[1, 1, 1]} attach="geometry" />
<meshPhongMaterial color={color} attach="material" />
</mesh>
)
}
function App() {
return (
<Canvas>
<Box color="#18a36e" position={[-1, 0, 3]} />
<Box color="#f56f42" position={[1, 0, 3]} />
<OrbitControls/>
<directionalLight color="#ffffff" intensity={1} position={[-1, 2, 4]} />
</Canvas>
)
}
export default App
Okay, the controls and everything (except I was unable to get tailwind css working) seems to work as expected.
However, when copying this into my ipyreact environment tt seems that using the <OrbitControls/> component generates the error
R3F: Hooks can only be used within the Canvas component!
By simply removing the <OrbitControls/> element I was able to get the example working
When searching for an answer I found this but I'm not that familiar with the r3f hooks concept that I immediately understand how to fix it.
Anyone pointing me in the direction of solving this would be much appreciated!
Best Regards
Kristoffer