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

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

• reactjs
• three.js
• react-three-fiber
• react-three-drei

Share Improve this question Follow edited Mar 10 at 13:31 Łukasz Daniel Mastalerz 2,44822 gold badges77 silver badges2828 bronze badges asked Mar 9 at 18:16 Oguogho Oguogho 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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