Can't see 3d Model

Questions
1

I’m following Javascript Master Youtube tutorial and I can’t see 3D model.

I get no errors, just a blank screen (doesn’t show 3D model)

Here is code:

import { Suspense } from 'react'
import { Canvas } from "@react-three/fiber"
import Loader from "../components/Loader.jsx"

import Island from "../models/Island.jsx"

const Home = () => {
  const adjustIslandForScreenSize = () => {
    let screenScale = null
    let screenPosition = [0, -6.5 -43];
    let rotation = [0.1, 4.7, 0]

    if (window.innerWidth < 768) {
      screenScale = [0.9, 0.9, 0.9]
    } else {
      screenScale = [1, 1, 1]
    }

    return [screenScale, screenPosition, rotation]
  }

  const [islandScale, islandPosition, islandRotation] = adjustIslandForScreenSize()

  return (
    <section className='w-full h-screen relative'>
      <Canvas // 3D Objects here
        className='w-full h-screen relative'
        camera={{ near: 0.01, far: 100000 }}
        // closer than near and further than 1000 wont be rendered
      > 
        <Suspense fallback={<Loader />}>
          <directionalLight position={[1, 1, 1]} intensity={2} />
          <ambientLight />
          <pointLight />
          <spotLight />
          <hemisphereLight />
          <Island
            position={islandPosition}
            scale={islandScale}
            rotation={islandRotation}
          />
        </Suspense>
      </Canvas>
    </section>
  )
}

export default Home

is there other code I need to show?

chrome_A7CJOe7dxf
chrome_A7CJOe7dxf1366×768 52.3 KB

2
  1. What do you mean by “can’t see”? What is visible?
  2. If you set background color, does it change?
  3. If you use a simple cube with MeshNormalMaterial, does it show ok?
3
  1. I added a screenshot to the post :slight_smile:
  2. I changed background colour in “<section …>” and that came through :slight_smile:
  3. I’ll find out how to do add simple cube now
4

ok this worked but i dont know how this did and the other mesh didnt work. i just rendered default cube from blender and replaced it with other mesh

import { Suspense } from 'react'
import { Canvas } from "@react-three/fiber"
import Loader from "../components/Loader.jsx"

import Cube from "../models/Cube.jsx"

const Home = () => {
  const adjustCubeForScreenSize = () => {
    let screenScale = null
    let screenPosition = [0, -6.5 -43];
    let rotation = [0.1, 4.7, 0]

    if (window.innerWidth < 768) {
      screenScale = [0.9, 0.9, 0.9]
    } else {
      screenScale = [1, 1, 1]
    }

    return [screenScale, screenPosition, rotation]
  }

  const [cubeScale, cubePosition, cubeRotation] = adjustCubeForScreenSize()

  return (
    <section className='w-full h-screen relative'>
      <Canvas // 3D Objects here
        className='w-full h-screen relative'
        camera={{ near: 0.1, far: 1000 }}
        // closer than near and further than 1000 wont be rendered
      > 
        <Suspense fallback={<Loader />}>
          <directionalLight position={[1, 1, 1]} intensity={2} />
          <ambientLight />
          <pointLight />
          <spotLight />
          <hemisphereLight />
          <Cube 
            position={cubePosition}
            scale={cubeScale}
            rotation={cubeRotation} />
        </Suspense>
      </Canvas>
    </section>
  )
}

chrome_G2Xmms1IbE
chrome_G2Xmms1IbE1366×768 57.5 KB

5

if you can’t see it

  • the model is broken → check in other gltf viewers if they display it
  • url is wrong (check chrome devtools > networking tab) → fix the url
  • the model is too small → make it bigger
  • the model is too big, the camera is inside it → make it smaller
  • it is offset and/or doesn’t face the camera → center it

ps, adjustIslandScale is not reactive, i don’t see the purpose of that function, if window size changes the values won’t refresh. it imo wastes code over nothing. do this instead:

  const { width, height } = useThree(state => state.size)
  ...
  <Island
    scale={width < 768 ? 0.9 : 1}
    position={[0, -6.5 -43])
    rotation={[0.1, 4.7, 0]} />
1 Like
6

ah man im still stuck i dont know where to put this line

const { width, height } = useThree(state => state.size)

i an error saying it needs to be in canvas component, i put it in and still get error, then copy and paste code into chatgpt and it says it should work

7

all of these hooks are services, they rely on a canvas, can’t be used outside of one because what would be the point. React Three Fiber Documentation

const size = useThree(state => state.size) // ❌ There is no canvas
...
return (
  <Canvas>
    ...

  <Canvas>
    <Model />
    ...

function Model() {
  const size = useThree(state => state.size) // ✅ Now we're inside a canvas
8

ok i am mega confused. im in the canvas i wrote your code, i’ve tried chatgpt and here is the result, yes i know it is wrong, i only want to see the 3d model on the website

import { Suspense } from 'react'
import { Canvas, useThree } from "@react-three/fiber"
import Loader from "../components/Loader.jsx"

//import Island from "../models/Island.jsx"
import Cube from "../models/Cube.jsx"

{/* <div className='absolute top-28 left-0 right-0 z-10 flex items-center justify-center'>
        POPUP
      </div> */}

const Home = () => {
  const { size } = useThree();
  const { width, height } = size;
  return (
    <section className='w-full h-screen relative'>
      <Canvas // 3D Objects here
        className='w-full h-screen relative'
        camera={{ near: 0.1, far: 1000 }}
        // closer than near and further than 1000 wont be rendered
      >
        <Suspense fallback={<Loader />}>
          <directionalLight position={[1, 1, 1]} intensity={2} />
          <ambientLight />
          <pointLight />
          <spotLight />
          <hemisphereLight />
          function CubeInCanvas() {
            const size = useThree(state => state.size)
          }
          <Cube
            scale={width < 768 ? 0.9 : 1}
            position={[0, -6.5, -43]}
            rotation={[0.1, 4.7, 0]} 
          />
        </Suspense>
      </Canvas>
    </section>
  )
}

export default Home
9

im a bit confused which part of the canvas this goes in?

10

chrome_QMOP4DXHyC
chrome_QMOP4DXHyC416×789 40.9 KB

just thought i’d add this before i sleep

11

useThree must be called within the canvas, so in this case Mode has to be a child of canvas, somewhere, it can be nested.