Black rectangular box created whenever <Html> element is used #2128

hippo23 · 2024-10-20T06:30:58Z

hippo23
Oct 20, 2024

Issue

Hello! This is my first time asking a question on Github so I apologise if the format isn't completely the best. I've been trying to create a force graph data visualisation using r3f and the Spotify API, but I've run into some issues when using the element. Every time I create one and use occlude="blending", there is a big black box (much larger than the actual set height of the element) that is also created.

Code

 return (
    <>
      <group onPointerOver={() => console.log('hatdog')} onPointerLeave={() => (false)}>
        {nodes.map((node, index) => (
          <NodeModel camera_position={camPos} key={index} node_data={node} />
        ))}
      </group>
      <group>
        {links_data.map((link_data, index) => (
          <GraphLink key={index} link_data={link_data} />
        ))}
      </group>
      <Html occlude="blending" className="h-[100px] w-[100] border-0 bg-white m-0" position={[0, 0, 0]}>
        <p>HATDOG</p>
      </Html>
    </>
  )

Rest of the codebase:

Github repo to codebase: https://github.com/hippo23/spotify_viz.git
(The codebase is a bit messy, however, the one's that deal with 3D rendering are in `spotify_visualizer/src/models (or components))

Preview

Note: The white box is the set width of the element.

Screen.Recording.2024-10-20.at.2.11.50.PM.mov

Sarveshwaran20 · 2024-12-17T09:44:07Z

Sarveshwaran20
Dec 17, 2024

The black box issue you’re encountering when using occlude="blending" in conjunction with your force graph visualization likely arises from depth rendering or blending behaviour in Three.js. Below are several possible reasons and solutions to address the issue effectively.

Check if any one of the issues is there I am also giving the solution below :

Blending Conflicts: The occlude="blending" option causes the HTML element to interact with the 3D scene’s depth and blending layers. Improper handling or lack of transparency in the scene or element styling can create rendering artifacts, like the black box.
Size Mismatch: If the dimensions of the HTML component are misaligned or not properly styled, Three.js may calculate an excessive render area for the element.
Background or Scene Misconfiguration: A solid background or unintended color properties in the Html element might appear as a black box due to blending modes.

Check Html Styling
Make sure the Html component's dimensions and styles are correctly applied eg,

Non

Use bg-transparent for the background to ensure transparency. Set proper dimensions (h-[100px] and w-[100px]) and remove unnecessary margins or padding.

. Adjust Html Occlusion
If occlude="blending" is the culprit, try different configurations
without blending

Replace occlude="blending" with explicit blending settings

Position the Html Correctly
The black box may be caused by the HTML component overlapping with 3D objects. Try positioning it slightly in front of other objects

nah

Visualize the bounding boxes to identify potential overlaps.

{nodes.map((node, index) => ( ))}

HATDOG

also, check if all the packages are up to date

### Here is the code with the fixes applied

Download the code added in the fixes
Code with fixes.txt

The file is inside a zip folder
Check if this works
Hope you find this helpful!!!

1 reply

Sarveshwaran20 Dec 18, 2024

@hippo23 did this work

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Black rectangular box created whenever <Html> element is used #2128

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Black rectangular box created whenever <Html> element is used #2128

hippo23 Oct 20, 2024

Issue

Code

Rest of the codebase:

Preview

Replies: 1 comment · 1 reply

Sarveshwaran20 Dec 17, 2024

Sarveshwaran20 Dec 18, 2024

hippo23
Oct 20, 2024

Replies: 1 comment 1 reply

Sarveshwaran20
Dec 17, 2024