It's working fine in Laptop view, but in mobile web hero section is not loading .

I cannot manage to to get any star to appear on my screen. I also can't find anything about maath/random and inSphere on the internet so i'm a little lost...I copied the exact same code that is posted on the repo but it still doesn't work... The only error i get in my console is : ackend_compact.js:2367 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. BufferGeometry {isBufferGeometry: true, uuid: 'c9432c0e-fe6a-48ad-8db3-8825a9f6aedd', name: '', type: 'BufferGeometry', index: null, …}
at Frustum.intersectsObject (http://localhost:5173/node_modules/.vite/deps/chunk-76MQ6OTW.js?v=ca743729:8393:18)
at Suspense
at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/chunk-5AAZIUHE.js?v=ca743729:16593:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-5AAZIUHE.js?v=ca743729:18338:21)
at Frustum.intersectsObject (http://localhost:5173/node_modules/.vite/deps/chunk-76MQ6OTW.js?v=ca743729:8393:18)
overrideMethod @ react_devtools.

I would really appreciate if anyone has an answer to this issue...

Hi,

I have the exact same code, and I am on vs code web(Idk if that matters). I can't see the computer and I have lights and the mesh and everything. Did this happen to anyone else? I have no idea what to attach to show

My site runs perfectly locally on http://localhost:5173/ but when i tried deploying with github pages, I am getting a blank screen with these errors:

Anyone know how to fix these?

When entering the site, it is very slow. When you scroll down it crashes. Then in the console it gives me an error saying THREE.WebGLRenderer: Context Lost. Is there a way I can prevent this error and optimize the site to help with its speed. Help will be much appreciated.

Thank you kindly!

Thanks Adrian for all your great videos.

I have one ERROR happening in the part of App.jsx that imports each component, specifically this code.
The imoprt statement in the Contact.jsx file says it can't find the styles file, and pasting the Github code doesn't work, so I need your help!

[plugin:vite:import-analysis] Failed to resolve import "../styles" from "src/components/Works.jsx". Does the file exist?
/Users/?????/Desktop/Portfolio/src/components/Works.jsx:5:23
17 |  import Tilt from "react-tilt";
18 |  import { motion } from "framer-motion";
19 |  import { styles } from "../styles";
   |                          ^
20 |  import { github } from "../assets";
21 |  import { SectionWrapper } from "../hoc";

I'm not sure if the file itself exists, because I've had no errors with the styles import on other components.

I live in Japan and my English is not very good, so there might be something wrong with my writing.
I'm sorry if I'm wrong, but please help me.

This worked great on chrome or edge on the pc. I tried to remove the motion tags to trouble shoot but get the same issues. Any help would be appreciated.

import React from "react";
import { Tilt } from "react-tilt";
import { motion } from "framer-motion";

import { styles } from "../styles";
import { services } from "../constants";
import { SectionWrapper } from "../hoc";
import { fadeIn, textVariant } from "../utils/motion";

const ServiceCard = ({ index, title, icon }) => (

<motion.div
variants={fadeIn("right", "spring", index * 0.5, 0.75)}
className='w-full green-pink-gradient p-[1px] rounded-[20px] shadow-card' >
<div
options={{
max: 45,
scale: 1,
speed: 450,
}}
className='bg-tertiary rounded-[20px] py-5 px-12 flex justify-evenly items-center flex-col'
>

    <h3 className='text-white text-[20px] font-bold text-center'>
      {title}
    </h3>
  </div>
</motion.div>

const About = () => {
return (
<>

          <p className={styles.sectionSubText}>Introduction</p>
          <h2 className={styles.sectionHeadText}>Overview.</h2>
    

 
    <div className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px]'>
          Lorem ipsum dolor sit amet. Nam molestias ullam sit reprehenderit quaerat est enim vero At molestiae nihil At corrupti consequatur. At voluptatem exercitationem nam quia dolorem ut voluptatem odio hic sunt consequuntur qui saepe neque!

          Eum libero esse et dolorum excepturi et quia sint? Qui voluptatem accusamus 33 tempora modi a modi nihil.

          Aut laudantium ratione et voluptatem reiciendis est ratione nihil ut dicta omnis. Et vitae iusto et harum excepturi eum libero libero vel voluptas beatae cum dolorum placeat! Est doloribus officiis a excepturi fugiat vel pariatur cupiditate non iure porro ut voluptas voluptatem et mollitia vero sed assumenda voluptas. Aut aliquid molestias sit deleniti suscipit aut distinctio quia.
  </div>

      <div className='mt-20 flex flex-col'>
    {services.map((service, index) => (
      <ServiceCard key={service.title} index={index} {...service} />
    ))}
  </div>
</>

);
};

export default SectionWrapper(About, "about");

Hi guys. I'm making this portfolio with Typescript and I'm having the issue with
<div options={{ max: 45, scale:1, speed:450 }} ... />

Compalier is throwing error:

(property) options: { max: number; scale: number; speed: number; } Type '{ children: Element[]; options: { max: number; scale: number; speed: number; }; className: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'options' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322)

What can I do?

Please enable GitHug Pages
Github pages

There seems to be some problem with Chrome Mobile (Android). The first GLTF (computer with desk) and background is neither loading nor scrolling working propely. Kindly reply if somebody find any solution to this.

Im using this template as my portfolio site. The site speed is not as fast as I would like it to be. Does anyone know the best practices to optimize the site?

Any input is appreciated.

Thank you

Console :-

react-dom.development.js:86 Warning: React does not recognize the frameLoop prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase frameloop instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at div
at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:18482:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:18338: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=1d7891e2:3491:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=1d7891e2:3940:5)
at App
printWarning @ react-dom.development.js:86
react-reconciler.development.js:9747 The above error occurred in the

at div
at Loader
at Suspense
at Suspense
at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:16593:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:18338:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:17940:3)

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:18482:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-H2SXTSQU.js?v=1d7891e2:18338: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=1d7891e2:3491:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=1d7891e2:3940:5)
at App

<mesh>
  <hemisphereLight intensity={0.15} 
  groundColor="black"/>
  <pointlight intensity = {1} />
  <primitive 
  object={computer.scene}
  />
</mesh>

<Suspense fallback={<CanvasLoader />}>
  <OrbitControls 
   enableZoom= {false} 
   maxPolarAngle={Math.PI / 2}
   minPolarAngle={Math.PI / 2}
  />
  <Computers />
</Suspense>

<Preload all />

[plugin:vite:import-analysis] Failed to resolve import "../components" from "src\App.jsx". Does the file exist?

this is my problem , how fix ?

I am having an issue where GLTF scenes do not show in the website even if I have everything installed.

Full Error: Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Found this error within chrome's browser console:
This error visually seems to not load the scene.gltf within the computer.jsx component.

I am getting this error along with:

• Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
• and others that are within the Computers function

For some reason after I've started adding extra info about my projects, my entire canvas in Hero section has disappeared and it says that the context is lost, making a big white window instead of the canvas. However, if I CTRL+X and CTRL+V useEffect that is in Computers.jsx, it goes to normal until I refresh the page. What may be the cause of it?

Also, these are some of the warnings I got in my console

Update: this issue only persists in Chrome, Firefox works just fine.
Another update: now it does that every other time in Chrome for some reason.

why??

Hello Adrian, I am getting some errors while rendering the computers component like one of the main error is that Div is not part of the THREE namespace and some other errors too. Can you please help?

Failed to resolve import "react-tilt" from "src\components\About.jsx". Does the file exist?

D:/myportfolio/src/components/About.jsx:2:17
15 | }
16 | import React from "react";
17 | import Tilt from "react-tilt";
| ^
18 | import { motion } from "framer-motion";
19 | import { styles } from "../styles";
at formatError (file:///D:/myportfolio/node_modules/vite/dist/node/chunks/dep-ca21228b.js:41418:46)
at TransformContext.error (file:///D:/myportfolio/node_modules/vite/dist/node/chunks/dep-ca21228b.js:41414:19)
at normalizeUrl (file:///D:/myportfolio/node_modules/vite/dist/node/chunks/dep-ca21228b.js:39706:33)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async TransformContext.transform (file:///D:/myportfolio/node_modules/vite/dist/node/chunks/dep-ca21228b.js:39840:47)
at async Object.transform (file:///D:/myportfolio/node_modules/vite/dist/node/chunks/dep-ca21228b.js:41685:30)
at async loadAndTransform (file:///D:/myportfolio/node_modules/vite/dist/node/chunks/dep-ca21228b.js:39479:29
Click outside or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

The hero section background is not showing.

After writing the ComputersCanvas code, my screen goes black. I tried to open another person's netlify link and it was taking almost 1 minute to load the 3d computer animation.
On my console the error shows:

Can Someone help, please?

[N.B: The file structure is the same as the video shows]

after cloning the repo and running the app in dev / production mode <ComputerCanvas/> component causes the below Error:

What can be the reason?
Because If I do comment the component the rest of the app works fine.

Description:

Steps to reproduce:

Deploy the app to GitHub Pages.
Open the app in the browser.
Open the console and check for errors.
Expected behavior:
The app should load without any errors.

Actual behaviour:
The main.jsx file shows a 404 error and is not loading properly.

Code snippet:
/// main.jsx
`import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import './index.css';

ReactDOM.render(
<React.StrictMode>

</React.StrictMode>,
document.getElementById('root')
);
`
Console output:
ps://ravindrasirvi609.github.io/src/main.jsx net::ERR_ABORTED 404

Additional context:

• This issue only occurs on the deployed version of the app on GitHub Pages, and not on my local machine.
• I have checked that the main.jsx file is present in the repository and included in the deployment.
• Other files, such as index.html and index.js, are loading correctly.

Please let me know if you need any additional information to help troubleshoot this issue. Thank you for your assistance.

Everything was working perfectly so far but whenever I am adding the Ball component in the BallCanvas, my screen went blank.
In the console, it's showing:
THREE.WebGLRenderer: Context Lost.
Here's the code snippet from the video:

const BallCanvas = ({ icon }) => {
  return (
    <Canvas
      frameloop="demand"
      dpr={[1, 2]}
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls enableZoom={false} />
        <Ball imgUrl={icon} />
      </Suspense>
      <Preload all />
    </Canvas>
  )
}

Any information/help on this would be greatly appreciated! Thank you.

I am getting this issue . Please help me with this.

Is a .env file recommended for the Email js Service ID , Template ID and Public Key?
If so how would I import and export it ? and should the .env file go in the . gitignore file ? Id appreciate any feedback.

Thank you!

Hi.

When I was at the half way ot the tutorial, [1:34:25] the part of the 'Experience.jsx' file, I got that error on Console.

`react-jsx-dev-runtime.development.js:87 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.jsx:42.
at App`

I checked line for line of the Experience.jsx file, I copy and paste the full codes as seen here on GitHub, but nothing changed. I also checked the App.jsx file to see if something wrong was there, I've found nothing strange so far.

Besides, the screen is also completely black, all started when the 'Experience' file was included, but I can't remember exactly what line of code was responsible for the error. Some other bugs I've found the answer here and on the internet, but this one got me stuck.

If anyone knows the answer. Thanks in advance.

When clicking on the balls, they rotate fine but after loaded to the screen, they just appear static and has no movements. When I scroll up or down, they have a single frame movement but that's it.

I compared my code inside Ball.jsx file with the tutorial but even if the code are identical, the issue still exists on my side. You can see a live demo HERE.

Does anyone encounter the same issue and if so, could you please share your solution? Thank you!

I know I can remove the strict mode from app.jsx. I rather not , is there any other way to fix this ?

Thank you.

Tech Component crashes the app specifically .
Even tried cloning the repo, same result

Completed the project following the tutorial but after building the project it returns a white screen so upon inspecting the code the following errors show up. help

react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

Check the render method of Tech. See https://reactjs.org/link/warning-keys for more information.
at div
at Tech
at section
at MotionComponent (http://localhost:5173/node_modules/.vite/deps/framer-motion.js?v=88569c61:296:40)
at div
at HOC
at div
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=88569c61:3423:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=88569c61:3841:5)
at App
printWarning @ react-jsx-dev-runtime.development.js:87
react-dom.development.js:86 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Tilt2 which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
at div
at Tilt2 (http://localhost:5173/node_modules/.vite/deps/react-tilt.js?v=88569c61:75:9)
at ServiceCard (http://localhost:5173/src/components/About.jsx:24:3)
at div
at About
at section
at MotionComponent (http://localhost:5173/node_modules/.vite/deps/framer-motion.js?v=88569c61:296:40)
at div
at HOC
at div
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=88569c61:3423:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=88569c61:3841:5)
at App
printWarning @ react-dom.development.js:86
three.module.js:10277 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. BufferGeometry
computeBoundingSphere @ three.module.js:10277
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
DevTools failed to load source map: Could not load content for chrome-extension://gkkdmjjodidppndkbkhhknakbeflbomf/polyfills/browser-polyfill.min.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

when scrolling through the website on a mobile phone, as soon as I get to the Experience section and that starts loading I get a scroll bounce. I checked online for few hours with no solutions for such a thing. I am not sure if that is a framer-motion bug or not but I checked ion framer-motion's GitHub issues and no one ever mentioned this. I checked other peoples' websites on here and every other one had the same issue so I am pretty positive it is not something I did wrong. Any kind of help is appreciated.

Unlike the youtube video and the live site the tech 3D balls don't float, when scrolling the balls seems to move a little bit but if I don't scroll or drag they remain static, I am not sure if it's an error on my side but cloning this repo also has that behavior.

Edit: I don't know if it's related but the app crashes in android (Cloning this repo), debugging I found that the 3D balls section causes that error. I don't see the app crashing in the live site https://jsmasterypro.com/ also the balls float as expected but some are not displaying correctly.

Thanks

Hi Adrian, I am getting the following error in the terminal when i try to import "Canvas" from "@react-three/fiber" in the Computers component:

✘ [ERROR] Could not resolve "three"

node_modules/@react-three/fiber/dist/react-three-fiber.esm.js:5:23:
  5 │ import * as THREE from 'three';

You can mark the path "three" as external to exclude it from the bundle, which will remove this
error.

I am not sure how to fix this. I have even copied and pasted from the github code but it still isn't working.

please help!

There are two things to note.

When you are around 54:00. Be sure to explain to export ComputersCanvas and not Computers, as you do not address it in video.

BIGGER BUG:

For me and others I'm sure, it goes black once you are exporting ComputerCanvas, in your and gives a list of errors in the console such as: (R3F: Div is not part of the THREE namespace! Did you forget to extend?)

WORKAROUND: refresh the page, close the console. go to VSCode and literally just CMD+S (save) without any editing and the page will load the 3D computer and page.

Bug and code should be addressed. I havent finished the video but I just came across this issue and found this to work. If anyone can further explain how to fix permenantly and also explain the cause, I would appreciate it. I would like to fully understand whats going on here.

Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
at hemisphereLight
at mesh
at Computers
at section
at Hero
at div
at div
at Router (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3316:15)
at BrowserRouter (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3729:5)
at App
overrideMethod @ react_devtools_backend.js:2655
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
createElement @ react-dom.development.js:9761
createInstance @ react-dom.development.js:10941
completeWork @ react-dom.development.js:22187
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react_devtools_backend.js:2655 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
at hemisphereLight
at mesh
at Computers
at section
at Hero
at div
at div
at Router (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3316:15)
at BrowserRouter (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3729:5)
at App
overrideMethod @ react_devtools_backend.js:2655
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
createElement @ react-dom.development.js:9816
createInstance @ react-dom.development.js:10941
completeWork @ react-dom.development.js:22187
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react_devtools_backend.js:2655 Warning: React does not recognize the groundColor prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase groundcolor instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at hemisphereLight
at mesh
at Computers
at section
at Hero
at div
at div
at Router (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3316:15)
at BrowserRouter (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3729:5)
at App
overrideMethod @ react_devtools_backend.js:2655
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
validateProperty$1 @ react-dom.development.js:3757
warnUnknownProperties @ react-dom.development.js:3803
validateProperties$2 @ react-dom.development.js:3827
validatePropertiesInDevelopment @ react-dom.development.js:9541
setInitialProperties @ react-dom.development.js:9830
finalizeInitialChildren @ react-dom.development.js:10950
completeWork @ react-dom.development.js:22193
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react_devtools_backend.js:2655 Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
at pointLight
at mesh
at Computers
at section
at Hero
at div
at div
at Router (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3316:15)
at BrowserRouter (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3729:5)
at App
overrideMethod @ react_devtools_backend.js:2655
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
createElement @ react-dom.development.js:9761
createInstance @ react-dom.development.js:10941
completeWork @ react-dom.development.js:22187
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react_devtools_backend.js:2655 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
at pointLight
at mesh
at Computers
at section
at Hero
at div
at div
at Router (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3316:15)
at BrowserRouter (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3729:5)
at App
overrideMethod @ react_devtools_backend.js:2655
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
createElement @ react-dom.development.js:9816
createInstance @ react-dom.development.js:10941
completeWork @ react-dom.development.js:22187
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react_devtools_backend.js:2655 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
at primitive
at mesh
at Computers
at section
at Hero
at div
at div
at Router (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3316:15)
at BrowserRouter (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3729:5)
at App
overrideMethod @ react_devtools_backend.js:2655
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
createElement @ react-dom.development.js:9816
createInstance @ react-dom.development.js:10941
completeWork @ react-dom.development.js:22187
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react_devtools_backend.js:2655 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
at mesh
at Computers
at section
at Hero
at div
at div
at Router (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3316:15)
at BrowserRouter (http://localhost:5177/node_modules/.vite/deps/react-router-dom.js?v=a42b843a:3729:5)
at App

console logs:

index-bb759d07.esm.js:215 Text is not allowed in the R3F tree! This could be stray whitespace or characters.
handleTextInstance @ index-bb759d07.esm.js:215
completeWork @ react-reconciler.development.js:10900
completeUnitOfWork @ react-reconciler.development.js:18725
performUnitOfWork @ react-reconciler.development.js:18697
workLoopSync @ react-reconciler.development.js:18597
renderRootSync @ react-reconciler.development.js:18565
performConcurrentWorkOnRoot @ react-reconciler.development.js:17836
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
index-bb759d07.esm.js:215 Text is not allowed in the R3F tree! This could be stray whitespace or characters.
handleTextInstance @ index-bb759d07.esm.js:215
completeWork @ react-reconciler.development.js:10900
completeUnitOfWork @ react-reconciler.development.js:18725
performUnitOfWork @ react-reconciler.development.js:18697
workLoopSync @ react-reconciler.development.js:18597
renderRootSync @ react-reconciler.development.js:18565
recoverFromConcurrentError @ react-reconciler.development.js:17948
performConcurrentWorkOnRoot @ react-reconciler.development.js:17848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-reconciler.development.js:9747 The above error occurred in the

at div
at Loader
at Suspense
at Suspense
at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=53b5e677:46349:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=53b5e677:48078:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=53b5e677:47679:3)

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=53b5e677:48214:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=53b5e677:48078:21)
at CanvasWrapper
at ComputersCanvas (http://localhost:5173/src/components/canvas/Computers.jsx?t=1679115222889:59:35)
at section
at Hero
at div
at div
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=53b5e677:3316:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=53b5e677:3729:5)
at App

Hi. I am getting these errors. Please help!

Uncaught 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 (index-bb759d07.esm.js:35:15)
at completeWork (react-reconciler.development.js:10851:28)
at completeUnitOfWork (react-reconciler.development.js:18725:16)
at performUnitOfWork (react-reconciler.development.js:18697:5)
at workLoopSync (react-reconciler.development.js:18597:5)
at renderRootSync (react-reconciler.development.js:18565:7)
at recoverFromConcurrentError (react-reconciler.development.js:17948:20)
at performConcurrentWorkOnRoot (react-reconciler.development.js:17848:22)
at workLoop (scheduler.development.js:266:34)
at flushWork (scheduler.development.js:239:14)

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

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=18e02788:48214:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-Z4ST2AXC.js?v=18e02788:48078:21)
at CanvasWrapper
at SoulCanvas
at section
at Hero
at div
at div
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=94c5b88f:3421:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=94c5b88f:3839: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.
logCapturedError @ react-dom.development.js:18687

Hi Adrian,
I followed your tutorial and I deployed the site by making a few changes to the details.
https://abhishekghodke.netlify.app/
I tried to open it on android mobile with browsers brave and chrome but it's not opening properly.
Note: Working fine on Mozilla Firefox( Android App).
Can you please help me with it?
If someone else knows
the solution kindly answer.

Screen becomes blank when react tilt is used in About.js page

terminal is ok but does not show anything

http://localhost:5173/desktop_pc/scene.gltf 404 (Not Found)

Any idea how to make it find it ... following the video for every step... can anyone help?

I am facing problem in this line
const computer = useGLTF("./desktop_pc/scene.gltf");
Console gives following error

THREE.WebGLRenderer: Context Lost.

Some one please help me with these

Everything works fine until I add another canvas. I followed along and coded exactly what was in the youtube video but it just didnt work for me. Package versions are the same as well.

When I add the EarthCanvas part, the Computer hero section goes into a blank white screen and no longer renders.
I get this error in the console:

Warning: Too many active WebGL contexts. Oldest context will be lost.
THREE.WebGLRenderer: Context Lost.

Hi Andrian

How to fix that, when I import components, screen become white, so please give me advice how to fix that

thanks

Hello friends, i was having problems with showing all the canvas elements on my mobile device, reading the other issues it became apparent mobile supports a certain number of canvases, the individual balls was taking up majority of those allotted canvases.

I tested this out by removing all the balls, and yeah the page does seem to render the other canvases, also has a faster page rendering

solution:
you can remove those 3D balls altogether if you have too many

or

My solution was to group all the balls in one canvas. While i lose the control of each ball, i think it looks slightly better this way. the page is much faster at rendering too.

Check out my Portfolio

Shoot an email if you like it :)

import React, { Suspense, useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import {
  Decal,
  Float,
  OrbitControls,
  Preload,
  useTexture,
} from "@react-three/drei";

import CanvasLoader from "../Loader";

import * as THREE from 'three';

const Ball = ({ icon, position, rotation }) => {
  const decal = useMemo(() => new THREE.TextureLoader().load(icon), [icon]);

  return (
    <Float speed={1.75} rotationIntensity={1} floatIntensity={2}>
      <ambientLight intensity={0.03} />
      <directionalLight position={[10, 5, -5]} />
      <mesh castShadow receiveShadow scale={1} position={position}>
        <icosahedronGeometry args={[1, 10]} />
        <meshStandardMaterial
          color='#fff8eb'
          flatShading
        />
        <Decal
          position={[0, 0, 1]}
          rotation={[2 * Math.PI, 0, 6.25]}
          scale={1.2}
          map={decal}
          flatShading
        />
      </mesh>
    </Float>
  );
};

const BallCanvas = ({ icons }) => {
  return (
    <Canvas frameloop='always'
    shadows
    dpr={[1, 1]}
    camera={{ position: [0, 0, 5], fov: 75 }}
    gl={{ preserveDrawingBuffer: true }}>
      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls enableZoom={false} />
        <group>
          {icons.map((icon, index) => {
            const row = Math.floor(index / 3);
            const col = index % 3;
            return (
              <Ball key={icon} icon={icon} position={[col * 3 - 4, row * 3 + -2, -9]} />
            );
          })}
        </group>
      </Suspense>

      <Preload all />
    </Canvas>
  );
};

export default BallCanvas;

Now on your Tech.jsx component create a const variable storing all the icons in an array and pass it into the BallCanvas

const icons = Object.values(technologies).map((technology) => technology.icon);

<div className='w-full h-[75vh] mx-auto'>
          <BallCanvas icons={icons} />
      </div>

Hopefully this helps you all! :)

I have copied codes from Hero.jsx and Computers.jsx files and they worked fine without any console errors. However, the 3D scene scaling does not look right

Below is the original parameters provided by Adrian

I tried to "Zoom" in by playing around with the scaling and position of scene but the scene seems to be bounded by the "view" as marked by the red arrows as shown below.

Does anyone have ideas on what is wrong and how I reposition the scene?
Thank you!

On mobile, when someone is scrolling on top of a canvas, they're unable to scroll the page. Is there a way to be able to scroll normally on top of the canvas while maintaining the ability to rotate the 3d object? Maybe if the scroll direction is up and down it scrolls the page and if it's horizontal it rotates the object? It makes the mobile experience a bit annoying as whole parts of the screen cannot be used to scroll the page.

My desktop pc model is not showing. It looks like continuous loads the stack at 94%. Please give me a solution.