adrianhajdin / project_3D_developer_portfolio

The most impressive websites in the world use 3D graphics and animations to bring their content to life. Learn how to build your own ThreeJS 3D Developer Portfolio today!
https://jsmastery.pro
5.71k stars 1.26k forks source link

fix for all the errors you guy's are getting here #112

Open bilalmirza74 opened 11 months ago

bilalmirza74 commented 11 months ago

check my repo

3D model can be render on mobile phones added lazy loading

https://github.com/bilalmirza74/folio/tree/master

don't forget to give a ⭐if it fixed your issue

sajithsojan commented 11 months ago

@bilalmirza74 The error for Computers.jsx is not fixed

bilalmirza74 commented 11 months ago

@bilalmirza74 The error for Computers.jsx is not fixed

Actually you need to change the 3D model for the mobile phone view to make it responsive

Because the size of Computer 3D model is too big to render on mobile phone

sajithsojan commented 10 months ago

@bilalmirza74 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.

this error keeps popping up all the time

bilalmirza74 commented 10 months ago

https://stackoverflow.com/questions/62183371/threejs-three-buffergeometry-computeboundingsphere-gives-error-nan-position

check out this

sajithsojan commented 10 months ago

@bilalmirza74 the tech sections is not getting renderred in some mobiles after i deploy

bilalmirza74 commented 10 months ago

In which mobiles? Did you noticed?

sajithsojan commented 10 months ago

oneplus,realme devices

bilalmirza74 commented 10 months ago

That might be a issue with phone RAM random access memory

Not be able to render full 3D model

jaismeenMehra commented 10 months ago

@bilalmirza74 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.

this error keeps popping up all the time

I am getting same error. Did you solved the error?

sajithsojan commented 10 months ago

That might be a issue with phone RAM random access memory

Not be able to render full 3D model

my phone has 12gb latest ram and still

bilalmirza74 commented 10 months ago

That might be a issue with phone RAM random access memory

Not be able to render full 3D model

my phone has 12gb latest ram and still

https://www.webdevfreelancer.me/

Check this out is this working

sajithsojan commented 10 months ago

That might be a issue with phone RAM random access memory

Not be able to render full 3D model

my phone has 12gb latest ram and still

https://www.webdevfreelancer.me/

Check this out is this working

It is working, but has issue with the pc 3d model It is same for mobile and pc

MaheshBabu11 commented 10 months ago

@sajithsojan . You can use these compressed models to improve the performance.

  1. The computer scene (https://github.com/MaheshBabu11/3D-Portfolio/blob/main/public/desktop_pc/scene.glb) 1.33 MB
  2. The planet scene ( https://github.com/MaheshBabu11/3D-Portfolio/blob/main/public/planet/scene.glb) 325 KB

Usage : const computer = useGLTF("./desktop_pc/scene.glb");

Adding ` <Canvas frameloop="demand" shadows dpr={[1, 2]} camera={{ position: [20, 3, 5], fov: 25 }} gl={{ preserveDrawingBuffer: true ,alpha: true}}

,alpha: true` in gl can resolve the loading issues in mobile.

Hope that helps. (I have deployed mine here : portfolio)

bilalmirza74 commented 10 months ago

@MaheshBabu11 After scrolling down upto form While scrolling up this happens

Screenshot_2023-10-23-10-53-54-45_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

Screenshot_2023-10-23-10-54-30-52_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

Screenshot_2023-10-23-10-54-15-79_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

Hope you understand the problem :(

responsive-we commented 9 months ago

Has anyone found any solutions for it? I am also getting the same error. Please help

AT0047 commented 9 months ago

I have the same issue here too after deployment on my PC works fine but on other PCs and mobile doesn't work

responsive-we commented 9 months ago

I think it is due to the limitations of the mobile browsers. So it must be optimised for phone? anyone could help us with it?

responsive-we commented 9 months ago

I have the same issue here too after deployment on my PC works fine but on other PCs and mobile doesn't work

But mine works on PCs, on all browsers installed in an iPhone and Mozilla firefox (on android).