The scene renders fine as long as there is no tag being rendered at all.
This is a little bit unclear...
Generally, is there any specific reason for importing Mesh
, BoxGeometry
, and MeshLambertMaterial
from Three.js and trying to use them directly, instead using primitives provided by R3F (i.e.<mesh>
, <boxGeometry>
, <meshLambertMaterial>
)?
Pay attention to the capitalization of the letters in the components...
https://r3f.docs.pmnd.rs/getting-started/your-first-scene#the-result
This template should works fine, if you still get issues, please provide sandbox.
import React, {Suspense} from 'react';
// import Button from '../components/Button';
import { Canvas } from '@react-three/fiber';
// import CanvasLoader from '../components/CanvasLoader';
// import { Model } from '../components/Model';
import { OrbitControls } from '@react-three/drei';
const HeroSec = () => {
return (
<Canvas>
<ambientLight args={[2, 2, 5]} intensity={1} color="#ffffff" />
<directionalLight args={[0, 0, 10]} intensity={1} color="#ffffff" />
<OrbitControls />
<mesh>
<boxGeometry args={[2, 2, 2]} />
<meshLambertMaterial color="#ff0357" />
</mesh>
</Canvas>
);
}
export default HeroSec