Problem with html

Questions
1

Hello.
I am new to developing with three and was trying to implement a section of html on a laptop screen as shown in this drei tutorial: Mixing HTML and WebGL w/ occlusion - CodeSandbox
but when it comes to implementing it, the html does not fit on the screen and is out of sync or the position doesn’t match, I’ve been trying all afternoon, but it’s like it doesn’t work in my local environment and I don’t know why I forked the codesandbox in which you remove the homepage component and the css file
(link to the codesanbox without css or homepage: Mixing HTML and WebGL w/ occlusion (forked) - CodeSandbox ) and still in the codesandbox if it works, but not in my local environment, I don’t know if you can take a look or give me a hint to know where the error is, I attach screenshots of how it appears in my local environment.
the code of the laptop that I have locally is almost the same as in drei’s tutorial.

imagen_2023-04-17_222357919
imagen_2023-04-17_222357919507×547 19.1 KB 

import * as THREE from 'three'
import React, { Suspense, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { Html, Environment, useGLTF, ContactShadows, OrbitControls } from '@react-three/drei'

function Model(props) {
  const group = useRef()
  // Load model
  const { nodes, materials } = useGLTF('./laptop/mac-draco.glb')
  // Make it float
  useFrame((state) => {
    const t = state.clock.getElapsedTime()
    group.current.rotation.x = THREE.MathUtils.lerp(group.current.rotation.x, Math.cos(t / 2) / 20 + 0.25, 0.1)
    group.current.rotation.y = THREE.MathUtils.lerp(group.current.rotation.y, Math.sin(t / 4) / 20, 0.1)
    group.current.rotation.z = THREE.MathUtils.lerp(group.current.rotation.z, Math.sin(t / 8) / 20, 0.1)
    group.current.position.y = THREE.MathUtils.lerp(group.current.position.y, (-2 + Math.sin(t / 2)) / 2, 0.1)
  })
  // The jsx graph was auto-generated by: https://github.com/pmndrs/gltfjsx
  return (
    <group ref={group} {...props} dispose={null}>
      <group rotation-x={-0.425} 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 geometry={nodes['Cube008_2'].geometry}>
            {/* Drei's HTML component can "hide behind" canvas geometry */}
            <Html rotation-x={-Math.PI / 2} position={[0, 0.05, -0.09]} transform occlude>
              <div style={{height: '200px'}} onPointerDown={(e) => e.stopPropagation()}>
                <h1 style={{background:'red',height: '200px'}} >hola</h1>
              </div>
            </Html>
          </mesh>
        </group>
      </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>
  )
}

export default function App() {
  return (
    <Canvas camera={{ position: [-5, 0, -15], fov: 55 }}>
      <pointLight position={[10, 10, 10]} intensity={1.5} />
      <Suspense fallback={null}>
        <group rotation={[0, Math.PI, 0]} position={[0, 1, 0]}>
          <Model />
        </group>
        <Environment preset="city" />
      </Suspense>
      <ContactShadows position={[0, -4.5, 0]} scale={20} blur={2} far={4.5} />
      <OrbitControls enablePan={false} enableZoom={false} minPolarAngle={Math.PI / 2.2} maxPolarAngle={Math.PI / 2.2} />
    </Canvas>
  )
}
2

each model is different, it takes a bit of time to place it correctly.

if it doesn’t work locally there has got to be a reason. one thing i notice is ./laptop/mac-draco.glb if that is /src and not /public it will fail. otherwise, no idea what it could be.

3

Do you know any trick to place it faster?
And yes the URI is correct in vite I can reference the documents in the public folder in the root of the project.
I thought that if I copy the example with the same prefixes and configurations, it will work.
Also, I try to place a model of a tablet, but I have the same problem.

4

Update.
I discovered that the reason why I was not being able to place the HTML in the mesh of the screen and it looked weird was because I was using placing the canvas of the laptop and a text in the same div which when applying the flex property apparently it conflicts with how it places the HTML content within the canvas itself, and is especially conflicting when the transform property is applied to the HTML

the old code:

    <div className='flex w-full h-screen'>
      <motion.div variants={textVariant}>
      <p className={styles.sectionSubText}>What I have done so far</p>
      <h2 className={styles.sectionHeadText}>Work Experience.</h2>
      </motion.div>
      <Laptop />
    </div>

the new code:

      <div className='flex'>
        <motion.div variants={textVariant}>
          <p className={styles.sectionSubText}>What I have done so far</p>
          <h2 className={styles.sectionHeadText}>Work Experience.</h2>
        </motion.div>
      </div>
      <div className='w-auto h-screen'>
      <Laptop />
      </div>