3D вращающийся куб с прозрачным окном к фоновому видео (видно только через куб) ⇐ Javascript

[Anonymous]

Я пытаюсь построить 3D -вращающийся куб с гладкой анимацией, где на заднем плане играет одно видео, но видео должно быть видно только через лица куба, например, просмотр окна. Цель состоит в том, чтобы создать иллюзию, что видео существует только за кубом и не видно нигде на экране. Cube. < /p>
< /li>
[*] Видео следует видеть только через куб (не за пределами его). < /p>
< /li>
Кюб не должен иметь видео, отображаемое на всех шести лицах - просто действует как визитное окно. Подходы с использованием CSS Clip-Path, Mask и даже Webgl, но я продолжаю сталкиваться с проблемами wake:

Видео появляется за пределами области куба.

На видео дублируется на всех лицах Cubes. /> < /li>
Я не могу заставить куба действовать как окно, скрывая все остальное. Я открыт для использования CSS, THRE.JS или комбинации. Заранее спасибо! Вот мой jsx -< /p>
import '../../styles/Cube3D.css';

const Cube3D = () => {
return (





Front Face


















);
};

export default Cube3D;
< /code>
И вот мой css -< /p>
.scene {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
perspective: 1500px;
background-color: rgb(0, 0, 0);
/* background-image: url('../../assets/image1.png'); */
/* overflow: hidden; */
}
.cube {
position: relative;
width: 250px;
height: 250px;
transform-style: preserve-3d;
animation: spinCube 5s linear infinite;
animation-delay: 3s;
z-index: 1;
}

.front .face-content {
animation: fadeOutText 5s linear infinite;
animation-delay: 3s;
}

@keyframes spinCube {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
}
10% {
transform: rotateX(-7deg) rotateY(-25deg) rotateZ(4deg)
scale3d(1.1, 1.1, 1.1);
}
25% {
transform: rotateX(-14deg) rotateY(-51deg) rotateZ(10deg)
scale3d(1.3, 1.3, 1.3);
}
45% {
transform: rotateX(-21deg) rotateY(-76deg) rotateZ(12deg)
scale3d(1.5, 1.5, 1.5);
}
60% {
transform: rotateX(-25deg) rotateY(-120deg) rotateZ(12deg)
scale3d(1.6, 1.6, 1.6);
}
75% {
transform: rotateX(-21deg) rotateY(-240deg) rotateZ(10deg)
scale3d(1.75, 1.75, 1.75);
}
90% {
transform: rotateX(-14deg) rotateY(-300deg) rotateZ(4deg)
scale3d(2.5, 2.5, 2.5);
}
100% {
transform: rotateX(-7deg) rotateY(-360deg) rotateZ(0deg) scale3d(3, 3, 3);
}
}

@keyframes fadeOutText {
0%,
45% {
opacity: 1;
}
46%,
100% {
opacity: 0;
}
}

/* Cube Faces */
.face-wrapper {
position: absolute;
width: 250px;
height: 250px;
clip-path: polygon(
5% 0%,
95% 0%,
100% 5%,
100% 95%,
95% 100%,
5% 100%,
0% 95%,
0% 5%
);
/* overflow: hidden; */
}

.face-blur {
position: absolute;
inset: 0;
background: linear-gradient(145deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
/* background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.05),
rgba(0, 0, 0, 0.1)
); */
backdrop-filter: blur(6px) brightness(1.1);
-webkit-backdrop-filter: blur(6px) brightness(1.1);
z-index: 0;
}

.face-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
height: 250px;
text-align: center;
font-size: 2.2rem;
font-weight: bolder;
color: black;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.05),
0 0 20px rgba(0, 255, 255, 0.2), 0 0 40px rgba(0, 255, 255, 0.15);
}

/* Cube Faces Positions */
.front {
transform: translateZ(125px);
}
.back {
transform: rotateY(180deg) translateZ(125px);
}
.right {
transform: rotateY(90deg) translateZ(125px);
}
.left {
transform: rotateY(-90deg) translateZ(125px);
}
.top {
transform: rotateX(90deg) translateZ(125px);
}
.bottom {
transform: rotateX(-90deg) translateZ(125px);
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... ible-throu