react three fiber and react drei causing all componnents not to render

Question

I'm trying to learn and work with react and threejs specifically react-three/fiber. I'm running react and three 19 and @react-three/fiber 9.0.4 and react-three/drei 10.0.1. The scene renders fine as long as there is no tag being rendered at all. Regardless of whether it's in the same component or not or whether there it is populated by a mesh or any settings. I am getting no errors and it saves perfectly fine, other than the fact that it doesn't render when there is a tag. when run my app, it just shows me a blank page of my background color. no error shows on console. can someone help to debug

    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 { AmbientLight, BoxGeometry, DirectionalLight, Mesh, MeshLambertMaterial } from 'three';  
    import { OrbitControls, PresentationControls, Stage } from '@react-three/drei';

      const HeroSec = () => {
      const handleClick = () => {}
      return (
       <section className='hero flex flex-col justify-center items-center text-white text-md'>
        <div className='flex flex-col sm:flex-row my-16 justify-center items-center h-full w- 
     [80vw]'>
            <div>
                <h3 className='text-purple-700 text-2xl font-bold py-3'>Hi!</h3>
                <h1 className='text-4xl sm:text-5xl font-semibold py-3'>I AM OSES</h1>
                <p className='py-3'>A Web developer with extensive knowlege in developing full 
    stack web application</p>
                <Button  design={"bg-purple-700 p-1.5 rounded-2xl cursor-pointer"} text={"View 
    Work"}
                 handleClick={handleClick}/>
                <Button  design={"bg-purple-700 p-1.5 rounded-2xl cursor-pointer ml-5"} text= 
    {"Hire Me"}
                 handleClick={handleClick}/>
            </div>
            <div>
              
            <Canvas>
              <AmbientLight args={[2,2,5]} intensity={1} color="#fffff"/>
              <DirectionalLight args={[0,0,10]} intensity={1} color="#fffff"/>
              <OrbitControls /> 
                  <Model />
                <Mesh>
                  <BoxGeometry args={[2,2,2]} scale={1} />
                  <MeshLambertMaterial color="#ff0357"/>
                </Mesh>
                <Stage />
            </Canvas>
        </div>
        </div>
    </section>
  )
}

export default HeroSec

Łukasz Daniel Mastalerz · Accepted Answer · 2025-03-10 14:11:05Z

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

Collectives™ on Stack Overflow

react three fiber and react drei causing all componnents not to render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related