Hi,
I’m working on a new project using React, NextJS, and PostCSS. I’m experimenting with embedding 3D models. As you can see in this codepen the transparent background works fine, but when I try to do the same in my project the result is quite the opposite. I have read all the documentation and tickets here but still cannot find the issue.
Code from my project:
export default function Home() {
const { page } = json;
return (
<>
<Head>
<title>{page.title}</title>
<meta name="description" content={page.description} />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favlogo.png" />
</Head>
<main className={styles.main}>
<div className={styles.sketchfab}>
<iframe
title="Skull, spine, ribs and pelvic bones"
width="100%"
height="100%"
frameborder="0"
allowfullscreen
mozallowfullscreen="true"
webkitallowfullscreen="true"
allow="autoplay; fullscreen; xr-spatial-tracking"
xr-spatial-tracking
execution-while-out-of-viewport
execution-while-not-rendered
web-share
src="https://sketchfab.com/models/04b90fe9b67e4b5aaac1562a5e725d6c/embed?annotations_visible=0&autospin=0.2&autostart=1&camera=0&double_click=0&internal=1&max_texture_size=2048&preload=1&scrollwheel=0&sound_enable=0&transparent=1&ui_animations=0&ui_annotations=0&ui_ar=1&ui_ar_help=0&ui_color=white&ui_fadeout=0&ui_fullscreen=0&ui_help=0&ui_infos=0&ui_inspector=0&ui_settings=0&ui_stop=0&ui_theatre=0&ui_vr=0&ui_watermark=0"
/>
</div>
</main>
</>
);
}