import ipyreact
from pathlib import Path
ipyreact.define_module("@react-three/fiber", Path("./threejs-fiber.bundle.js"))
# ipyreact.define_import_map(
# imports={
# "@react-three/fiber": "threejs-fiber",
# }
# )
ipyreact.define_module("@react-three/xr", Path("./react-three-xr.bundle.js"))
from traitlets import default
class XRWidget(ipyreact.Widget):
_esm = """
import * as React from 'react'
import { Canvas } from '@react-three/fiber'
import { XR, createXRStore, useXRInputSourceStateContext, useTouchPointer, XRSpace, XRHandModel, PointerCursorModel } from '@react-three/xr'
import { useState, useRef, Suspense } from 'react'
const store = createXRStore()
export default function App() {
const [red, setRed] = useState(false)
return (
<div>
<button onClick={() => store.enterAR()}>Enter AR</button>
<Canvas>
<XR store={store}>
<mesh pointerEventsType={{ deny: 'grab' }} onClick={() => setRed(!red)} position={[0, 1, -1]}>
<boxGeometry />
<meshBasicMaterial color={red ? 'red' : 'blue'} />
</mesh>
</XR>
</Canvas>
</div>
)
} """
page = XRWidget()