search

pmndrs / ecctrl

🕹️ A floating rigibody character controller
MIT License
465 stars 49 forks source link

Impossible to orbit the scene when drei's Html element is in the scene #65

Open chillbert opened 1 month ago

chillbert commented 1 month ago

given: 

import { Html, KeyboardControls } from '@react-three/drei';
//...
      <Canvas shadows>
         <Html occlude={"blending"} scale={.1} transform position={[.43,2.52,-5.18]}>
             <div style={{transform:"scale(1)"}}>
              <h1>Let's Go!</h1>
             </div>
        </Html> 
<Physics timeStep="vary">
          <Suspense fallback={null}>
            <KeyboardControls map={keyboardMap}>
              <Ecctrl debug>
                <CharacterModel />
              </Ecctrl>
            </KeyboardControls>
            <Room04/>
          </Suspense>
        </Physics>
</Canvas>

you can not look around in the scene with mouse or pointer. How can we fix this? Any ideas?

ErdongChen-Andrew commented 1 month ago

Only the current domElement can interact with camera control. I think adding Html might create another dom element. 🤔 Alternatively, you could use pointerlock like in the example app.