3D model Issue

[thenurakulathunga]

I’m working on a 3D project where I need to render an image onto the screen of a MacBook 3D model (.glb format). To achieve this, I created a new mesh, applied the image as a texture to it, and aligned the mesh with the MacBook's screen. However, the current implementation has a significant bug, and the image does not render correctly.

Here are the technologies I’m using:

• React
• Tailwind CSS
• Framer Motion
• Three.js

I’ve attached the following files for your reference:

• The .glb file of the MacBook model.
• Source code.
• Screenshots of the issue.

Could you please review these and provide a solution or suggest the correct approach to render the image properly on the model's screen?

.blg file is can't to upload
code

import { Canvas } from '@react-three/fiber';
import { useGLTF, useTexture, Environment, OrbitControls } from '@react-three/drei';
import screenImage from '../../assets/images/robot_one.jpg';
import mackBook from '../../assets/images/ss-018 (1).glb';
import * as THREE from 'three';


// Model Component
const Model = (props) => {
  console.log(props.selectedProject.image)
  const { scene } = useGLTF(mackBook); // Load the MacBook model
  const texture = useTexture(require(`../../assets/images/${props?.selectedProject?.image}`)); // Load the screen texture

  // Screen plane properties
  const screenPosition = [-0.10, 0.27, -0.02];
  const screenScale = [2.3, 1.40];

  return (
    <>
      <primitive object={scene} scale={8} />
      <mesh position={screenPosition} rotation={[0, 0, 0]} >
        <planeGeometry args={screenScale} />
        <meshBasicMaterial map={texture} side={THREE.FrontSide} />
      </mesh>
    </>
  );
};


// Projects List Component
const ProjectsList = ({ projects }) => {
  return (
    <div className="projects-list">
      {projects.map((project, index) => (
        <div key={index} className="project-card">
          <h3>{project.name}</h3>
          <p><strong>Technologies:</strong> {project.technologies.join(', ')}</p>
          <p><strong>Description:</strong> {project.description}</p>
          <p><strong>Role:</strong> {project.roll}</p>
          <p><strong>Project Type:</strong> {project.project_type}</p>
          <p>
            <strong>Duration:</strong> {project.start_time} - {project.end_time}
          </p>
        </div>
      ))}
    </div>
  );
};

// Main Projects Component
const Projects = () => {
  const projectsByFrameworks = [
    {
      type: 'react',
      projects: [
        {
          name: 'Task Manager',
          technologies: ['React', 'Redux', 'Tailwind CSS'],
          description: 'A simple task management app for organizing daily activities.',
          start_time: '2023-05-10',
          end_time: '2023-07-15',
          roll: 'Frontend Developer',
          project_type: 'Web Application',
          image: 'robot_one.jpg',
        },
        {
          name: 'E-commerce Dashboard',
          technologies: ['React', 'Context API', 'Material UI'],
          description: 'An admin dashboard for managing product inventory and orders.',
          start_time: '2023-08-01',
          end_time: '2023-09-20',
          roll: 'Full Stack Developer',
          project_type: 'Web Application',
          image: 'robot_two.jpg',
        },
      ],
    },
    // Add other frameworks and their projects here
  ];

  const [projects] = useState(
    projectsByFrameworks.flatMap((framework) => framework.projects)
  );
  const [selectedProject , setSelectedProjects] = useState(projects[0]);

  return (
    <section>
      <div>
        <Canvas
          camera={{ position: [0, 7, 15], fov: 10 }}
          style={{ height: '1000px', width: '100%', background: 'transparent' }}
        >
          <ambientLight intensity={2} />
          <Environment preset="sunset" />
          <Model selectedProject={selectedProject}/>
          <OrbitControls />
        </Canvas>
      </div>
      <div className="projects-container">
        <ProjectsList projects={projects} />
      </div>
    </section>
  );
};

export default Projects;

ss of issues