You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There appears to be a bug in handling user input when interacting with meshes/models. I have provided the code I am working with below, although the example code https://github.com/artcom/react-three-arjs/tree/main/example also produces the same result.
When trying to test the onclick handler, clicking directly on the mesh does not trigger the onclick handler.
However, I noticed that when resizing the window (or rotating the screen on a mobile device), the mesh gets rendered at a different position away from the marker it is supposed to be rendered on top of. That position is where all the user input handlers work.
When refreshing the page to correctly display the mesh on the marker, tapping or clicking at the spot where the mesh was incorrectly displayed (often to the side of the marker) triggers all the user input, even though there is nothing rendered there!
TLDR: It is almost as if the actual mesh that handles user input is invisible at an offset/incorrect position and a fake mesh that does not handle user input is rendered in the expected position.
I am wondering if this is perhaps due to an issue on my end, because I am finding this to be a problem with all rendered content regarding user input, and I would have expected more conversation about them.
import{ARCanvas,ARMarker}from"@artcom/react-three-arjs"importReact,{useState,useRef}from"react"import{createRoot}from"react-dom/client"functionBox(props){// This reference gives us direct access to the THREE.Mesh objectconstref=useRef()// Hold state for hovered and clicked eventsconst[hovered,hover]=useState(false)const[clicked,click]=useState(false)// Return the view, these are regular Threejs elements expressed in JSXreturn(<mesh{...props}ref={ref}scale={clicked ? 1.5 : 1}onClick={(event)=>click(!clicked)}onPointerOver={(event)=>hover(true)}onPointerOut={(event)=>hover(false)}><boxGeometryargs={[1,1,1]}/><meshStandardMaterialcolor={hovered ? 'hotpink' : 'orange'}/></mesh>)}createRoot(document.getElementById("root")).render(<ARCanvasgl={{alpha: true,antialias: false,powerPreference: "default",physicallyCorrectLights: true,precision: "highp",logarithmicDepthBuffer: true}}onCameraStreamReady={()=>console.log("Camera stream ready")}onCameraStreamError={()=>console.error("Camera stream error")}onCreated={({ gl })=>{gl.setSize(window.innerWidth,window.innerHeight)}}><ambientLight/><pointLightposition={[10,10,0]}intensity={10.0}/><ARMarkerparams={{smooth: true}}type={"pattern"}patternUrl={"data/patt.hiro"}onMarkerFound={()=>{console.log("Marker Found")}}><Box/></ARMarker></ARCanvas>,)
IMG_2209.mp4
The text was updated successfully, but these errors were encountered:
There appears to be a bug in handling user input when interacting with meshes/models. I have provided the code I am working with below, although the example code https://github.com/artcom/react-three-arjs/tree/main/example also produces the same result.
When trying to test the onclick handler, clicking directly on the mesh does not trigger the onclick handler.
However, I noticed that when resizing the window (or rotating the screen on a mobile device), the mesh gets rendered at a different position away from the marker it is supposed to be rendered on top of. That position is where all the user input handlers work.
When refreshing the page to correctly display the mesh on the marker, tapping or clicking at the spot where the mesh was incorrectly displayed (often to the side of the marker) triggers all the user input, even though there is nothing rendered there!
TLDR: It is almost as if the actual mesh that handles user input is invisible at an offset/incorrect position and a fake mesh that does not handle user input is rendered in the expected position.
I am wondering if this is perhaps due to an issue on my end, because I am finding this to be a problem with all rendered content regarding user input, and I would have expected more conversation about them.
IMG_2209.mp4
The text was updated successfully, but these errors were encountered: