Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Three-fiber OrbitControls and "R3F: Hooks can only be used within the Canvas component!" error #37

Open
Krande opened this issue May 24, 2023 · 5 comments
Open

Three-fiber OrbitControls and "R3F: Hooks can only be used within the Canvas component!" error #37

Krande opened this issue May 24, 2023 · 5 comments

Comments

@Krande
Copy link

Krande commented May 24, 2023 •
edited
Loading

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/[email protected]'
import { OrbitControls } from "https://esm.sh/@react-three/[email protected]";

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

image

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!

image

By simply removing the <OrbitControls/> element I was able to get the example working

image

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
@maartenbreddels
Copy link
Contributor

Thank you.

The downside of this library is that we see all kinds of errors I know nothing about :)
I will do my best to give pointers though :)
Actually, interestingly I get a different error:

fs.RegExpParser is not a constructor

Too bad ipyreact doesn't show a tracktrace, I think we should fix that.
I hope someone else has an idea.

@Krande
Copy link
Author

Krande commented May 24, 2023

@maartenbreddels Thanks for responding so quickly :)

I'll continue to do some digging and update this issue if I find anything!

Btw: If it can help debugging why you're seeing a different error here is the environment I tested it on:

(I'm using JupyterLab btw)

# Name                    Version                   Build  Channel
anyio                     3.6.2              pyhd8ed1ab_0    conda-forge
anywidget                 0.3.0                    pypi_0    pypi
argon2-cffi               21.3.0             pyhd8ed1ab_0    conda-forge
argon2-cffi-bindings      21.2.0          py311ha68e1ae_3    conda-forge
asttokens                 2.2.1              pyhd8ed1ab_0    conda-forge
async-lru                 2.0.2              pyhd8ed1ab_0    conda-forge
attrs                     23.1.0             pyh71513ae_1    conda-forge
babel                     2.12.1             pyhd8ed1ab_1    conda-forge
backcall                  0.2.0              pyh9f0ad1d_0    conda-forge
backports                 1.0                pyhd8ed1ab_3    conda-forge
backports.functools_lru_cache 1.6.4              pyhd8ed1ab_0    conda-forge
beautifulsoup4            4.12.2             pyha770c72_0    conda-forge
bleach                    6.0.0              pyhd8ed1ab_0    conda-forge
brotli                    1.0.9                hcfcfb64_8    conda-forge
brotli-bin                1.0.9                hcfcfb64_8    conda-forge
bzip2                     1.0.8                h8ffe710_4    conda-forge
ca-certificates           2023.5.7             h56e8100_0    conda-forge
certifi                   2023.5.7           pyhd8ed1ab_0    conda-forge
cffi                      1.15.1          py311h7d9ee11_3    conda-forge
charset-normalizer        3.1.0              pyhd8ed1ab_0    conda-forge
colorama                  0.4.6              pyhd8ed1ab_0    conda-forge
comm                      0.1.3              pyhd8ed1ab_0    conda-forge
debugpy                   1.6.7           py311h12c1d0e_0    conda-forge
decorator                 5.1.1              pyhd8ed1ab_0    conda-forge
defusedxml                0.7.1              pyhd8ed1ab_0    conda-forge
entrypoints               0.4                pyhd8ed1ab_0    conda-forge
executing                 1.2.0              pyhd8ed1ab_0    conda-forge
flit-core                 3.9.0              pyhd8ed1ab_0    conda-forge
idna                      3.4                pyhd8ed1ab_0    conda-forge
importlib-metadata        6.6.0              pyha770c72_0    conda-forge
importlib_metadata        6.6.0                hd8ed1ab_0    conda-forge
importlib_resources       5.12.0             pyhd8ed1ab_0    conda-forge
ipykernel                 6.23.1             pyh025b116_0    conda-forge
ipyreact                  0.3.0                    pypi_0    pypi
ipython                   8.13.2             pyh08f2357_0    conda-forge
ipywidgets                8.0.6                    pypi_0    pypi
jedi                      0.18.2             pyhd8ed1ab_0    conda-forge
jinja2                    3.1.2              pyhd8ed1ab_1    conda-forge
json5                     0.9.5              pyh9f0ad1d_0    conda-forge
jsonschema                4.17.3             pyhd8ed1ab_0    conda-forge
jupyter-lsp               2.1.0              pyhd8ed1ab_0    conda-forge
jupyter_client            8.2.0              pyhd8ed1ab_0    conda-forge
jupyter_core              5.3.0           py311h1ea47a8_0    conda-forge
jupyter_events            0.6.3              pyhd8ed1ab_0    conda-forge
jupyter_server            2.5.0              pyhd8ed1ab_0    conda-forge
jupyter_server_terminals  0.4.4              pyhd8ed1ab_1    conda-forge
jupyterlab                4.0.0              pyhd8ed1ab_1    conda-forge
jupyterlab-widgets        3.0.7                    pypi_0    pypi
jupyterlab_pygments       0.2.2              pyhd8ed1ab_0    conda-forge
jupyterlab_server         2.22.1             pyhd8ed1ab_0    conda-forge
libbrotlicommon           1.0.9                hcfcfb64_8    conda-forge
libbrotlidec              1.0.9                hcfcfb64_8    conda-forge
libbrotlienc              1.0.9                hcfcfb64_8    conda-forge
libexpat                  2.5.0                h63175ca_1    conda-forge
libffi                    3.4.2                h8ffe710_5    conda-forge
libsodium                 1.0.18               h8d14728_1    conda-forge
libsqlite                 3.42.0               hcfcfb64_0    conda-forge
libzlib                   1.2.13               hcfcfb64_4    conda-forge
markupsafe                2.1.2           py311ha68e1ae_0    conda-forge
matplotlib-inline         0.1.6              pyhd8ed1ab_0    conda-forge
mistune                   2.0.5              pyhd8ed1ab_0    conda-forge
mypy-extensions           1.0.0                    pypi_0    pypi
nbclient                  0.8.0              pyhd8ed1ab_0    conda-forge
nbconvert-core            7.4.0              pyhd8ed1ab_0    conda-forge
nbformat                  5.8.0              pyhd8ed1ab_0    conda-forge
nest-asyncio              1.5.6              pyhd8ed1ab_0    conda-forge
nodejs                    18.15.0              h57928b3_0    conda-forge
notebook-shim             0.2.3              pyhd8ed1ab_0    conda-forge
openssl                   3.1.0                hcfcfb64_3    conda-forge
packaging                 23.1               pyhd8ed1ab_0    conda-forge
pandocfilters             1.5.0              pyhd8ed1ab_0    conda-forge
parso                     0.8.3              pyhd8ed1ab_0    conda-forge
pickleshare               0.7.5                   py_1003    conda-forge
pip                       23.1.2             pyhd8ed1ab_0    conda-forge
pkgutil-resolve-name      1.3.10             pyhd8ed1ab_0    conda-forge
platformdirs              3.5.1              pyhd8ed1ab_0    conda-forge
prometheus_client         0.16.0             pyhd8ed1ab_0    conda-forge
prompt-toolkit            3.0.38             pyha770c72_0    conda-forge
prompt_toolkit            3.0.38               hd8ed1ab_0    conda-forge
psutil                    5.9.5           py311ha68e1ae_0    conda-forge
psygnal                   0.9.0                    pypi_0    pypi
pure_eval                 0.2.2              pyhd8ed1ab_0    conda-forge
pycparser                 2.21               pyhd8ed1ab_0    conda-forge
pygments                  2.15.1             pyhd8ed1ab_0    conda-forge
pyrsistent                0.19.3          py311ha68e1ae_0    conda-forge
pysocks                   1.7.1              pyh0701188_6    conda-forge
python                    3.11.3          h2628c8c_0_cpython    conda-forge
python-dateutil           2.8.2              pyhd8ed1ab_0    conda-forge
python-fastjsonschema     2.17.1             pyhd8ed1ab_0    conda-forge
python-json-logger        2.0.7              pyhd8ed1ab_0    conda-forge
python_abi                3.11                    3_cp311    conda-forge
pytz                      2023.3             pyhd8ed1ab_0    conda-forge
pywin32                   306                      pypi_0    pypi
pywinpty                  2.0.10          py311h12c1d0e_0    conda-forge
pyyaml                    6.0             py311ha68e1ae_5    conda-forge
pyzmq                     25.0.2          py311h7b3f143_0    conda-forge
requests                  2.31.0             pyhd8ed1ab_0    conda-forge
rfc3339-validator         0.1.4              pyhd8ed1ab_0    conda-forge
rfc3986-validator         0.1.1              pyh9f0ad1d_0    conda-forge
send2trash                1.8.2              pyh08f2357_0    conda-forge
setuptools                67.7.2             pyhd8ed1ab_0    conda-forge
six                       1.16.0             pyh6c4a22f_0    conda-forge
sniffio                   1.3.0              pyhd8ed1ab_0    conda-forge
soupsieve                 2.3.2.post1        pyhd8ed1ab_0    conda-forge
stack_data                0.6.2              pyhd8ed1ab_0    conda-forge
terminado                 0.17.0             pyh08f2357_0    conda-forge
tinycss2                  1.2.1              pyhd8ed1ab_0    conda-forge
tk                        8.6.12               h8ffe710_0    conda-forge
tomli                     2.0.1              pyhd8ed1ab_0    conda-forge
tornado                   6.3.2           py311ha68e1ae_0    conda-forge
traitlets                 5.9.0              pyhd8ed1ab_0    conda-forge
typing-extensions         4.6.1                    pypi_0    pypi
typing_extensions         4.6.0              pyha770c72_0    conda-forge
tzdata                    2023c                h71feb2d_0    conda-forge
ucrt                      10.0.22621.0         h57928b3_0    conda-forge
urllib3                   2.0.2              pyhd8ed1ab_0    conda-forge
vc                        14.3                hb25d44b_16    conda-forge
vc14_runtime              14.34.31931         h5081d32_16    conda-forge
vs2015_runtime            14.34.31931         hed1258a_16    conda-forge
watchfiles                0.19.0                   pypi_0    pypi
wcwidth                   0.2.6              pyhd8ed1ab_0    conda-forge
webencodings              0.5.1                      py_1    conda-forge
websocket-client          1.5.2              pyhd8ed1ab_0    conda-forge
wheel                     0.40.0             pyhd8ed1ab_0    conda-forge
widgetsnbextension        4.0.7                    pypi_0    pypi
win_inet_pton             1.1.0              pyhd8ed1ab_6    conda-forge
winpty                    0.4.3                         4    conda-forge
xz                        5.2.6                h8d14728_0    conda-forge
yaml                      0.2.5                h8ffe710_2    conda-forge
yarn                      3.5.1                h08f2357_0    conda-forge
zeromq                    4.3.4                h0e60522_1    conda-forge
zipp                      3.15.0             pyhd8ed1ab_0    conda-forge

@kolibril13
Copy link
Collaborator

hi @Krande ,
I've recently built a React template for anywidget, and just had some time to take a look at this OrbitControls issue, and got it working, here you can find a minimal example:
https://github.com/kolibril13/ipy-react-three-fiber

You can clone the repo and type npm install and thennpm run dev in order to get it running:

Screen.Recording.2023-10-02.at.16.02.08.mov

@Krande Krande closed this as completed Oct 17, 2023
@maartenbreddels
Copy link
Contributor

Opening this so I don't forget to get back to this, this can now work really well with ipyreact, will follow up later!

@maartenbreddels
Copy link
Contributor

I've added an example notebook: https://github.com/widgetti/ipyreact?tab=readme-ov-file#bundled-es-modules-for-threejs

This shows how to build a bundle, and finally make a composable app with it using solara:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@maartenbreddels @Krande @kolibril13