image not show when loaded in next but working in react

[alessio-zamparelli]

When i load the model in next the image it contains does not appear, no errors showing in console.

The model is mac-draco

Any ideas on how to debug or solve?

import * as THREE from 'three'
import { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react'
import { Canvas, useFrame, useLoader } from '@react-three/fiber'
import { Environment, useGLTF } from '@react-three/drei'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { useSpring } from '@react-spring/core'
import { a as three } from '@react-spring/three'
import { a as web } from '@react-spring/web'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'

const vec = new THREE.Vector3()

export default function Mac() {
  // This flag controls open state, alternates between true & false
  const [open, setOpen] = useState(false)
  // We turn this into a spring animation that interpolates between 0 and 1
  const props = useSpring({ open: Number(open) })
  const [hinge, setHinge] = useState(1.575) // to -0.425
  const macReference = useRef()

  useLayoutEffect(() => {
    gsap.registerPlugin(ScrollTrigger)

    ScrollTrigger.create({
      trigger: macReference.current,
      start: 'center-=20% center',
      // endTrigger: '.macEnd',
      end: 'center+=20% center',
      // markers: true,
      onEnter: () => setOpen(true),
      onLeaveBack: () => setOpen(false),
      onUpdate: self => setHinge(1.575 + self.progress * (-0.425 - 1.575))
    })
  }, [])

  return (
    <div className="relative h-full laptopContent" ref={macReference}>
      <web.main
        style={{ background: props.open.to([0, 1], ['#f4f7ff', '#87a1a9']) }}
      >
        <Canvas
          // dpr={[1, 2]}
          camera={{ position: [0, 0, 0], fov: 35 }}
          className="laptopSection"
        >
          <three.pointLight
            position={[10, 10, 10]}
            intensity={1.5}
            color={props.open.to([0, 1], ['#e7efee', '#d25578'])}
          />
          {/* eslint-disable-next-line unicorn/no-null */}
          <Suspense fallback={null}>
            <group
              rotation={[0, Math.PI, 0]}
              onClick={event => {
                event.stopPropagation()
                setOpen(!open)
              }}
            >
              <Model
                open={open}
                // hinge={props.open.to([0, 1], [1.575, -0.425])}
                hinge={hinge}
              />
            </group>
            <Environment preset="city" />
          </Suspense>
        </Canvas>
      </web.main>
      <span className="macEnd" />
    </div>
  )
}

function Model({ open, hinge, ...props }) {
  const group = useRef()
  // Load model
  const root = useGLTF('/mac-draco.glb')
  console.log('🚀 ~ file: Mac.js ~ line 92 ~ Model ~ root', root)

  const colorMap = useLoader(TextureLoader, 'PavingStones092_1K_Color.jpg')

  const { nodes, materials } = root

  // Take care of cursor state on hover
  const [hovered, setHovered] = useState(false)
  useEffect(
    // eslint-disable-next-line no-return-assign, no-void
    () => void (document.body.style.cursor = hovered ? 'pointer' : 'auto'),
    [hovered]
  )
  // Make it float in the air when it's opened
  useFrame(state => {
    const t = state.clock.getElapsedTime()
    state.camera.position.lerp(vec.set(0, 0, open ? -24 : -32), 0.1)
    state.camera.lookAt(0, 0, 0)
    group.current.rotation.x = THREE.MathUtils.lerp(
      group.current.rotation.x,
      // open ? Math.cos(t / 2) / 8 + 0.25 : 0,
      open ? Math.cos(t / 2) / 8 + 0.25 : 0,
      0.1
    )
    group.current.rotation.y = THREE.MathUtils.lerp(
      group.current.rotation.y,
      open ? Math.sin(t / 4) / 4 : 0,
      0.1
    )
    group.current.rotation.z = THREE.MathUtils.lerp(
      group.current.rotation.z,
      open ? Math.sin(t / 4) / 4 : 0,
      0.1
    )
    group.current.position.y = THREE.MathUtils.lerp(
      group.current.position.y,
      open ? (-2 + Math.sin(t)) / 3 : -4.3,
      0.1
    )
  })
  // The view was auto-generated by: https://github.com/pmndrs/gltfjsx

  return (
    <group
      ref={group}
      {...props}
      onPointerOver={event => {
        event.stopPropagation()
        setHovered(true)
      }}
      onPointerOut={() => setHovered(false)}
      dispose={undefined}
    >
      <three.group rotation-x={hinge} position={[0, -0.04, 0.41]}>
        <group position={[0, 2.96, -0.13]} rotation={[Math.PI / 2, 0, 0]}>
          <mesh
            material={materials.aluminium}
            geometry={nodes.Cube008.geometry}
          />
          <mesh
            material={materials['matte.001']}
            geometry={nodes.Cube008_1.geometry}
          />
          <mesh
            material={materials['screen.001']}
            geometry={nodes.Cube008_2.geometry}
          />
        </group>
      </three.group>
      <mesh
        material={materials.keys}
        geometry={nodes.keyboard.geometry}
        position={[1.79, 0, 3.45]}
      />
      <group position={[0, -0.1, 3.39]}>
        <mesh
          material={materials.aluminium}
          geometry={nodes.Cube002.geometry}
        />
        <mesh
          material={materials.trackpad}
          geometry={nodes.Cube002_1.geometry}
        />
      </group>
      <mesh
        material={materials.touchbar}
        geometry={nodes.touchbar.geometry}
        position={[0, -0.03, 1.2]}
      />
    </group>
  )
}

// useGLTF.preload('/mac-draco.glb')