drei icon indicating copy to clipboard operation
drei copied to clipboard

Published 20 hours ago • verified publisher icon pmndrs

Html not showing when scene have background

Open ngocducdim opened this issue 1 year ago • 1 comments

Hi, I'm using <Html> to display DOM element on canvas, but when add background to the scene, the html not showing anymore:

  • Before add background: image
  • After add background: image

My code:

import {
  OrbitControls,
  Html,
} from "@react-three/drei";
import { Canvas } from "@react-three/fiber";

export default function App() {

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <Canvas camera={{ position: [-0.5, 1, 2] }}>
        <color attach="background" args={["#f5efe6"]} />     
        <directionalLight position={[3.3, 1.0, 4.4]} castShadow />
        <mesh>
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial color="orange" />
        </mesh>
        <OrbitControls  />
        <Html position={[-4.5, 3.6, -3]} occlude="blending">
          <h1>Testing</h1>
        </Html>
      </Canvas>
    </div>
  );
}

ngocducdim avatar May 17 '23 09:05 ngocducdim

This is also a bug when using an Environment, bug still lurking today

symbiosdotwiki avatar Oct 18 '23 17:10 symbiosdotwiki