pmndrs
Impossible to orbit the scene when drei's Html element is in the scene
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?
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.
When occlude is set to true, control is restored, but it brings another issue: the Html flickers, and its occlusion relationship is incorrect.
@chillbert In version 1.0.88, you can set camListenerTarget = "document". That should solve the problem.
@ErdongChen-Andrew thanks for the answer, setting camListenerTarget = "document" worked for me I was using the html element to embed a youtube video and seems to work seamlessly
