I'm fairly new to Three.JS and I'm following this tutorial to figure out how to do some basic things in the language. (This is their source code.)
At around 39:34 in the video they create a Canvas object (which references this id in the index.css file)
And then they create a 'Box' object, which shows up like this in their program.
//
import useMacbookStore from '../store';
import clsx from 'clsx';
import { Canvas } from '@react-three/fiber';
const ProductViewer = () => {
const{color, scale, setColor, setScale} = useMacbookStore();
return(
<section id="product-viewer">
<h2>Take a closer look.</h2>
<div className="controls">
{/*<p className="info">Macbook Pro | Available in 14" & 16" in Space Gray & Dark colors</p>*/}
<div className="flex-center gap-5 mt-5">
<div className="color-control">
<div
onClick={() => setColor('#adb5bd')}
className={clsx('bg-neutral-300', color === '#adb5bd' && 'active')}
/>
<div
onClick={() => setColor('#2e2c2e')}
className={clsx('bg-neutral-900', color === '#2e2c2e' && 'active')}
/>
</div>
<div className="size-control">
<div
onClick={() => setScale(0.06)}
className={clsx(scale === 0.06 ? 'bg-white text-black' : 'bg-transparent text-white')}
>
<p>14"</p>
</div>
<div
onClick={() => setScale(0.08)}
className={clsx(scale === 0.08 ? 'bg-white text-black' : 'bg-transparent text-white')}
>
<p>16"</p>
</div>
</div>
</div>
</div>
<Canvas id="canvas" camera={{ position: [0, 0, 0], fov: 50, near: 0.1, far: 100}}>
<Box position={[-1, 0, 0]}></Box>
</Canvas>
</section>
)
}
export default ProductViewer
Here is my code, and as soon as I put in the <Canvas> object it just makes my entire webpage turn black. If I remove it, it looks exactly like the video (without the box of course).
Thank you so much!
