Three-JS Canvas не отображается должным образом ⇐ Javascript

[Anonymous]

Я новичок в Three.JS и следую этому руководству, чтобы понять, как делать некоторые базовые вещи на этом языке. (Это их исходный код.)
Примерно на 39:34 видео они создают объект Canvas (который ссылается на этот идентификатор в файле index.css)


А затем они создают объект Box, который выглядит следующим образом в своей программе.

Код: Выделить всё

//
import useMacbookStore from '../store';
import clsx from 'clsx';
import { Canvas } from '@react-three/fiber';

const ProductViewer = () => {
const{color, scale, setColor, setScale} = useMacbookStore();

return(


Take a closer look.

{/*
Macbook Pro | Available in 14" & 16" in Space Gray & Dark colors
*/}



 setColor('#adb5bd')}
className={clsx('bg-neutral-300', color === '#adb5bd' && 'active')}
/>
 setColor('#2e2c2e')}
className={clsx('bg-neutral-900', color === '#2e2c2e' && 'active')}
/>

 setScale(0.06)}
className={clsx(scale === 0.06 ? 'bg-white text-black' : 'bg-transparent text-white')}
>
14"

onClick={() => setScale(0.08)}
className={clsx(scale === 0.08 ? 'bg-white text-black' : 'bg-transparent text-white')}
>
16"









)
}

export default ProductViewer

Вот мой код, и как только я добавляю объект , вся моя веб-страница становится черной. Если я его удалю, оно будет выглядеть точно так же, как на видео (без рамки, конечно).
Огромное спасибо!

Подробнее здесь: https://stackoverflow.com/questions/798 ... g-properly