Build and Deploy an Amazing 3D Web Developer Portfolio with ThreeJS | React Three Fiber

constants.js

import {
  mobile,
  backend,
  creator,
  web,
  javascript,
  typescript,
  html,
  css,
  reactjs,
  redux,
  tailwind,
  nodejs,
  mongodb,
  git,
  figma,
  docker,
  meta,
  starbucks,
  tesla,
  shopify,
  carrent,
  jobit,
  tripguide,
  threejs,
} from "../assets";

export const navLinks = [
  {
    id: "about",
    title: "About",
  },
  {
    id: "work",
    title: "Work",
  },
  {
    id: "contact",
    title: "Contact",
  },
];

const services = [
  {
    title: "Web Developer",
    icon: web,
  },
  {
    title: "React Native Developer",
    icon: mobile,
  },
  {
    title: "Backend Developer",
    icon: backend,
  },
  {
    title: "Content Creator",
    icon: creator,
  },
];

const technologies = [
  {
    name: "HTML 5",
    icon: html,
  },
  {
    name: "CSS 3",
    icon: css,
  },
  {
    name: "JavaScript",
    icon: javascript,
  },
  {
    name: "TypeScript",
    icon: typescript,
  },
  {
    name: "React JS",
    icon: reactjs,
  },
  {
    name: "Redux Toolkit",
    icon: redux,
  },
  {
    name: "Tailwind CSS",
    icon: tailwind,
  },
  {
    name: "Node JS",
    icon: nodejs,
  },
  {
    name: "MongoDB",
    icon: mongodb,
  },
  {
    name: "Three JS",
    icon: threejs,
  },
  {
    name: "git",
    icon: git,
  },
  {
    name: "figma",
    icon: figma,
  },
  {
    name: "docker",
    icon: docker,
  },
];

const experiences = [
  {
    title: "React.js Developer",
    company_name: "Starbucks",
    icon: starbucks,
    iconBg: "#383E56",
    date: "March 2020 - April 2021",
    points: [
      "Developing and maintaining web applications using React.js and other related technologies.",
      "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
      "Implementing responsive design and ensuring cross-browser compatibility.",
      "Participating in code reviews and providing constructive feedback to other developers.",
    ],
  },
  {
    title: "React Native Developer",
    company_name: "Tesla",
    icon: tesla,
    iconBg: "#E6DEDD",
    date: "Jan 2021 - Feb 2022",
    points: [
      "Developing and maintaining web applications using React.js and other related technologies.",
      "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
      "Implementing responsive design and ensuring cross-browser compatibility.",
      "Participating in code reviews and providing constructive feedback to other developers.",
    ],
  },
  {
    title: "Web Developer",
    company_name: "Shopify",
    icon: shopify,
    iconBg: "#383E56",
    date: "Jan 2022 - Jan 2023",
    points: [
      "Developing and maintaining web applications using React.js and other related technologies.",
      "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
      "Implementing responsive design and ensuring cross-browser compatibility.",
      "Participating in code reviews and providing constructive feedback to other developers.",
    ],
  },
  {
    title: "Full stack Developer",
    company_name: "Meta",
    icon: meta,
    iconBg: "#E6DEDD",
    date: "Jan 2023 - Present",
    points: [
      "Developing and maintaining web applications using React.js and other related technologies.",
      "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
      "Implementing responsive design and ensuring cross-browser compatibility.",
      "Participating in code reviews and providing constructive feedback to other developers.",
    ],
  },
];

const testimonials = [
  {
    testimonial:
      "I thought it was impossible to make a website as beautiful as our product, but Rick proved me wrong.",
    name: "Sara Lee",
    designation: "CFO",
    company: "Acme Co",
    image: "https://randomuser.me/api/portraits/women/4.jpg",
  },
  {
    testimonial:
      "I've never met a web developer who truly cares about their clients' success like Rick does.",
    name: "Chris Brown",
    designation: "COO",
    company: "DEF Corp",
    image: "https://randomuser.me/api/portraits/men/5.jpg",
  },
  {
    testimonial:
      "After Rick optimized our website, our traffic increased by 50%. We can't thank them enough!",
    name: "Lisa Wang",
    designation: "CTO",
    company: "456 Enterprises",
    image: "https://randomuser.me/api/portraits/women/6.jpg",
  },
];

const projects = [
  {
    name: "Car Rent",
    description:
      "Web-based platform that allows users to search, book, and manage car rentals from various providers, providing a convenient and efficient solution for transportation needs.",
    tags: [
      {
        name: "react",
        color: "blue-text-gradient",
      },
      {
        name: "mongodb",
        color: "green-text-gradient",
      },
      {
        name: "tailwind",
        color: "pink-text-gradient",
      },
    ],
    image: carrent,
    source_code_link: "https://github.com/",
  },
  {
    name: "Job IT",
    description:
      "Web application that enables users to search for job openings, view estimated salary ranges for positions, and locate available jobs based on their current location.",
    tags: [
      {
        name: "react",
        color: "blue-text-gradient",
      },
      {
        name: "restapi",
        color: "green-text-gradient",
      },
      {
        name: "scss",
        color: "pink-text-gradient",
      },
    ],
    image: jobit,
    source_code_link: "https://github.com/",
  },
  {
    name: "Trip Guide",
    description:
      "A comprehensive travel booking platform that allows users to book flights, hotels, and rental cars, and offers curated recommendations for popular destinations.",
    tags: [
      {
        name: "nextjs",
        color: "blue-text-gradient",
      },
      {
        name: "supabase",
        color: "green-text-gradient",
      },
      {
        name: "css",
        color: "pink-text-gradient",
      },
    ],
    image: tripguide,
    source_code_link: "https://github.com/",
  },
];

export { services, technologies, experiences, testimonials, projects };

index.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
  color-scheme: dark;
}

.hash-span {
  margin-top: -100px;
  padding-bottom: 100px;
  display: block;
}

.black-gradient {
  background: #000000; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #434343,
    #000000
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #434343,
    #000000
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.violet-gradient {
  background: #804dee;
  background: linear-gradient(-90deg, #804dee 0%, rgba(60, 51, 80, 0) 100%);
  background: -webkit-linear-gradient(
    -90deg,
    #804dee 0%,
    rgba(60, 51, 80, 0) 100%
  );
}

.green-pink-gradient {
  background: "#00cea8";
  background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
  background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
}

.orange-text-gradient {
  background: #f12711; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #f12711,
    #f5af19
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #f12711,
    #f5af19
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.green-text-gradient {
  background: #11998e; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #11998e,
    #38ef7d
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #11998e,
    #38ef7d
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blue-text-gradient {
  /* background: -webkit-linear-gradient(#eee, #333); */
  background: #56ccf2; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #2f80ed,
    #56ccf2
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #2f80ed,
    #56ccf2
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pink-text-gradient {
  background: #ec008c; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #ec008c,
    #fc6767
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #ec008c,
    #fc6767
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* canvas- styles */
.canvas-loader {
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff,
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
      1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

motion.js

export const textVariant = (delay) => {
  return {
    hidden: {
      y: -50,
      opacity: 0,
    },
    show: {
      y: 0,
      opacity: 1,
      transition: {
        type: "spring",
        duration: 1.25,
        delay: delay,
      },
    },
  };
};

export const fadeIn = (direction, type, delay, duration) => {
  return {
    hidden: {
      x: direction === "left" ? 100 : direction === "right" ? -100 : 0,
      y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
      opacity: 0,
    },
    show: {
      x: 0,
      y: 0,
      opacity: 1,
      transition: {
        type: type,
        delay: delay,
        duration: duration,
        ease: "easeOut",
      },
    },
  };
};

export const zoomIn = (delay, duration) => {
  return {
    hidden: {
      scale: 0,
      opacity: 0,
    },
    show: {
      scale: 1,
      opacity: 1,
      transition: {
        type: "tween",
        delay: delay,
        duration: duration,
        ease: "easeOut",
      },
    },
  };
};

export const slideIn = (direction, type, delay, duration) => {
  return {
    hidden: {
      x: direction === "left" ? "-100%" : direction === "right" ? "100%" : 0,
      y: direction === "up" ? "100%" : direction === "down" ? "100%" : 0,
    },
    show: {
      x: 0,
      y: 0,
      transition: {
        type: type,
        delay: delay,
        duration: duration,
        ease: "easeOut",
      },
    },
  };
};

export const staggerContainer = (staggerChildren, delayChildren) => {
  return {
    hidden: {},
    show: {
      transition: {
        staggerChildren: staggerChildren,
        delayChildren: delayChildren || 0,
      },
    },
  };
};

styles.js

const styles = {
  paddingX: "sm:px-16 px-6",
  paddingY: "sm:py-16 py-6",
  padding: "sm:px-16 px-6 sm:py-16 py-10",

  heroHeadText:
    "font-black text-white lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px] mt-2",
  heroSubText:
    "text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[20px] text-[16px] lg:leading-[40px]",

  sectionHeadText:
    "text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]",
  sectionSubText:
    "sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider",
};

export { styles };

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx}"],
  mode: "jit",
  theme: {
    extend: {
      colors: {
        primary: "#050816",
        secondary: "#aaa6c3",
        tertiary: "#151030",
        "black-100": "#100d25",
        "black-200": "#090325",
        "white-100": "#f3f3f3",
      },
      boxShadow: {
        card: "0px 35px 120px -15px #211e35",
      },
      screens: {
        xs: "450px",
      },
      backgroundImage: {
        "hero-pattern": "url('/src/assets/herobg.png')",
      },
    },
  },
  plugins: [],
};

ree" as external to exclude it from the bundle, which will remove this error.

run "npm install three" with peer deps

import { Suspense, useEffect, useState } from "react";
import { Canvas, useLoader} from '@react-three/fiber';
import { OrbitControls, Preload, useGLTF } from '@react-three/drei';
import CanvasLoader from '../Loader';

const Computers = () => {
const computer = useGLTF('./desktop_pc/scene.gltf');
console.log(computer);
return (





);
};

const ComputersCanvas = () => {
return (
<Canvas frameloop='demand' shadows camera={{position: [20,, 3, 5], fov:25 }} gl={{preserveDrawingBuffer: true}}>
<Suspense fallback = {}>
<OrbitControls enableZoom = {false} maxPolarAngle = {Math.PI / 2} minPolarAngle = {Math.PI / 2} />




);
};

export default ComputersCanvas;
I get the following error, can anyone help me?

Error: R3F: Div is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively
at createInstance (chunk-UQN7SVB7.js?v=e56d4dc1:16296:15)
at completeWork (chunk-UQN7SVB7.js?v=e56d4dc1:8426:34)
at completeUnitOfWork (chunk-UQN7SVB7.js?v=e56d4dc1:13709:24)
at performUnitOfWork (chunk-UQN7SVB7.js?v=e56d4dc1:13691:13)
at workLoopSync (chunk-UQN7SVB7.js?v=e56d4dc1:13623:13)
at renderRootSync (chunk-UQN7SVB7.js?v=e56d4dc1:13602:15)
at recoverFromConcurrentError (chunk-UQN7SVB7.js?v=e56d4dc1:13192:28)
at performConcurrentWorkOnRoot (chunk-UQN7SVB7.js?v=e56d4dc1:13140:30)
at workLoop (chunk-UQN7SVB7.js?v=e56d4dc1:278:42)
at flushWork (chunk-UQN7SVB7.js?v=e56d4dc1:257:22)
createInstance @ chunk-UQN7SVB7.js?v=e56d4dc1:16296
completeWork @ chunk-UQN7SVB7.js?v=e56d4dc1:8426
completeUnitOfWork @ chunk-UQN7SVB7.js?v=e56d4dc1:13709
performUnitOfWork @ chunk-UQN7SVB7.js?v=e56d4dc1:13691
workLoopSync @ chunk-UQN7SVB7.js?v=e56d4dc1:13623
renderRootSync @ chunk-UQN7SVB7.js?v=e56d4dc1:13602
recoverFromConcurrentError @ chunk-UQN7SVB7.js?v=e56d4dc1:13192
performConcurrentWorkOnRoot @ chunk-UQN7SVB7.js?v=e56d4dc1:13140
workLoop @ chunk-UQN7SVB7.js?v=e56d4dc1:278
flushWork @ chunk-UQN7SVB7.js?v=e56d4dc1:257
performWorkUntilDeadline @ chunk-UQN7SVB7.js?v=e56d4dc1:465
Show 11 more frames
Show less

The above error occurred in the <ForwardRef(Canvas)> component:

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:18549:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:18403:21)
at CanvasWrapper
at ComputersCanvas
at section
at Hero
at div
at div
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=e56d4dc1:4031:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=e56d4dc1:4774:5)
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Error: R3F: Div is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively
at createInstance (chunk-UQN7SVB7.js?v=e56d4dc1:16296:15)
at completeWork (chunk-UQN7SVB7.js?v=e56d4dc1:8426:34)
at completeUnitOfWork (chunk-UQN7SVB7.js?v=e56d4dc1:13709:24)
at performUnitOfWork (chunk-UQN7SVB7.js?v=e56d4dc1:13691:13)
at workLoopSync (chunk-UQN7SVB7.js?v=e56d4dc1:13623:13)
at renderRootSync (chunk-UQN7SVB7.js?v=e56d4dc1:13602:15)
at recoverFromConcurrentError (chunk-UQN7SVB7.js?v=e56d4dc1:13192:28)
at performConcurrentWorkOnRoot (chunk-UQN7SVB7.js?v=e56d4dc1:13140:30)
at workLoop (chunk-UQN7SVB7.js?v=e56d4dc1:278:42)
at flushWork (chunk-UQN7SVB7.js?v=e56d4dc1:257:22)

The above error occurred in the

component:

at div
at Loader
at Suspense
at Suspense
at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:16609:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:18403:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:17998:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

import { Suspense, useEffect, useState } from "react"; import { Canvas, useLoader} from '@react-three/fiber'; import { OrbitControls, Preload, useGLTF } from '@react-three/drei'; import CanvasLoader from '../Loader';

const Computers = () => { const computer = useGLTF('./desktop_pc/scene.gltf'); console.log(computer); return ( ); };

const ComputersCanvas = () => { return ( <Canvas frameloop='demand' shadows camera={{position: [20,, 3, 5], fov:25 }} gl={{preserveDrawingBuffer: true}}> <OrbitControls enableZoom = {false} maxPolarAngle = {Math.PI / 2} minPolarAngle = {Math.PI / 2} /> ); };

export default ComputersCanvas; I get the following error, can anyone help me?

Error: R3F: Div is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively at createInstance (chunk-UQN7SVB7.js?v=e56d4dc1:16296:15) at completeWork (chunk-UQN7SVB7.js?v=e56d4dc1:8426:34) at completeUnitOfWork (chunk-UQN7SVB7.js?v=e56d4dc1:13709:24) at performUnitOfWork (chunk-UQN7SVB7.js?v=e56d4dc1:13691:13) at workLoopSync (chunk-UQN7SVB7.js?v=e56d4dc1:13623:13) at renderRootSync (chunk-UQN7SVB7.js?v=e56d4dc1:13602:15) at recoverFromConcurrentError (chunk-UQN7SVB7.js?v=e56d4dc1:13192:28) at performConcurrentWorkOnRoot (chunk-UQN7SVB7.js?v=e56d4dc1:13140:30) at workLoop (chunk-UQN7SVB7.js?v=e56d4dc1:278:42) at flushWork (chunk-UQN7SVB7.js?v=e56d4dc1:257:22) createInstance @ chunk-UQN7SVB7.js?v=e56d4dc1:16296 completeWork @ chunk-UQN7SVB7.js?v=e56d4dc1:8426 completeUnitOfWork @ chunk-UQN7SVB7.js?v=e56d4dc1:13709 performUnitOfWork @ chunk-UQN7SVB7.js?v=e56d4dc1:13691 workLoopSync @ chunk-UQN7SVB7.js?v=e56d4dc1:13623 renderRootSync @ chunk-UQN7SVB7.js?v=e56d4dc1:13602 recoverFromConcurrentError @ chunk-UQN7SVB7.js?v=e56d4dc1:13192 performConcurrentWorkOnRoot @ chunk-UQN7SVB7.js?v=e56d4dc1:13140 workLoop @ chunk-UQN7SVB7.js?v=e56d4dc1:278 flushWork @ chunk-UQN7SVB7.js?v=e56d4dc1:257 performWorkUntilDeadline @ chunk-UQN7SVB7.js?v=e56d4dc1:465 Show 11 more frames Show less

The above error occurred in the <ForwardRef(Canvas)> component:

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:18549:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:18403:21)
at CanvasWrapper
at ComputersCanvas
at section
at Hero
at div
at div
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=e56d4dc1:4031:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=e56d4dc1:4774:5)
at App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Error: R3F: Div is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively at createInstance (chunk-UQN7SVB7.js?v=e56d4dc1:16296:15) at completeWork (chunk-UQN7SVB7.js?v=e56d4dc1:8426:34) at completeUnitOfWork (chunk-UQN7SVB7.js?v=e56d4dc1:13709:24) at performUnitOfWork (chunk-UQN7SVB7.js?v=e56d4dc1:13691:13) at workLoopSync (chunk-UQN7SVB7.js?v=e56d4dc1:13623:13) at renderRootSync (chunk-UQN7SVB7.js?v=e56d4dc1:13602:15) at recoverFromConcurrentError (chunk-UQN7SVB7.js?v=e56d4dc1:13192:28) at performConcurrentWorkOnRoot (chunk-UQN7SVB7.js?v=e56d4dc1:13140:30) at workLoop (chunk-UQN7SVB7.js?v=e56d4dc1:278:42) at flushWork (chunk-UQN7SVB7.js?v=e56d4dc1:257:22)

The above error occurred in the

component:

at div
at Loader
at Suspense
at Suspense
at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:16609:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:18403:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:17998:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Turns out you gotta check CanvasLoader.js file.

chunk-IF634Q7A.js?v=a06f2f7e:17762 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. _BufferGeometry
console.error @ chunk-IF634Q7A.js?v=a06f2f7e:17762Understand this error
2chunk-IF634Q7A.js?v=a06f2f7e:15732 Uncaught Error: Could not load ./planet/scene.gltf: Unexpected token '<', " component:

at Earth
at Suspense
at Suspense
at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/chunk-IF634Q7A.js?v=a06f2f7e:16085:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-IF634Q7A.js?v=a06f2f7e:17765:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-IF634Q7A.js?v=a06f2f7e:17372:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
console.error @ chunk-IF634Q7A.js?v=a06f2f7e:17762Understand this error
2chunk-IF634Q7A.js?v=a06f2f7e:17950 Uncaught Error: Could not load ./planet/scene.gltf: Unexpected token '<', " component:

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-IF634Q7A.js?v=a06f2f7e:17910:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-IF634Q7A.js?v=a06f2f7e:17765:21)
at CanvasWrapper
at EarthCanvas
at div
at MotionComponent (http://localhost:5173/node_modules/.vite/deps/framer-motion.js?v=a06f2f7e:467:40)
at div
at Contact (http://localhost:5173/src/components/Contact.jsx:26:45)
at div
at div
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=a06f2f7e:4366:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=a06f2f7e:5109:5)
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.error @ chunk-IF634Q7A.js?v=a06f2f7e:17762Understand this error
react-dom.development.js:26962 Uncaught Error: Could not load ./planet/scene.gltf: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
at chunk-IF634Q7A.js?v=a06f2f7e:17070:39
at _onError (GLTFLoader.js:179:9)
at Object.onLoad (GLTFLoader.js:210:11)
at three.module.js:44019:38Understand this error
16three.module.js:28952 THREE.WebGLRenderer: Context Lost.
**CAN ANY BODY HELP ME to solve this error **

import {Suspense,useState,useEffect} from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Preload, useGLTF,HemisphereLight, PointLight } from '@react-three/drei';

import CanvasLoader from '../Loader';

const Computers = () => {
const computer = useGLTF("./desktop_pc/scene.gltf");
console.log(computer);

return (





)
}

const ComputersCanvas = () => {
return(
<Canvas
frameloop='demand'
shadows
camera={{position: [20, 3, 5], fov: 25}}
gl={{preserveDrawingBuffer: true}}
>
<Suspense fallback={}>
<OrbitControls
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>




);
};

export default ComputersCanvas;

Unknown property 'object' foundeslintreact/no-unknown-property
const computer: GLTF & ObjectMap

What shall I do please help me out

Non of the tag properties are working ,
As you can see in the screenshot the PC 3D image is dark

but in my laptop the model isn't loading at all it's just a blank screen

…

On Sun, Jul 14, 2024, 2:02 PM Om-Shree ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Screenshot.2024-07-14.140030.png (view on web) <https://gist.github.com/user-attachments/assets/550c99bf-8ba5-4911-8256-b100bbd1e5e0> Non of the tag properties are working , As you can see in the screenshot the PC 3D image is dark Screenshot.2024-07-14.140148.png (view on web) <https://gist.github.com/user-attachments/assets/970f6aae-a988-43d6-a5ff-81943399fccf> — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/b1d33c262941a7e21aad833a1cfc84b1#gistcomment-5120738> or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARRLINQTWG5XOUFFVPUMYC3ZMIZTTBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMJSGAZDCNBQU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

FOR the services section , for our own one , from where we can get icons similar to his one.
i mean for other services where can I get the icons .

There's something wrong with the tech section pls helpppp!!!! my animation on balls doesn't work ! idk y the code is ok! there is no error plsssss help me

i find that my iphone can load all model, just android cannot

replit work with android.