My 3D resume: feedback please

Showcase
22

Yo! Congrats, this is probably really exciting.
image

1 Like
23

@Usnul Thanks for the feedback! Iā€™ll probably bake AO using Blender.

@alex.bristow3 I always like to release the code. It can save others hours of coding haha!

@jamie.games Yeah, it is a great achievement! I am very happy with the number of people that have seen it in 5 days. I always add this to my projects so I can count without having to set up Google Analytics and the cookie message:

<script>
fetch('https://api.countapi.xyz/hit/project_name/visits')
.then(response => response.json())
.then(data => null);
</script>
1 Like
24

Looks really pro! I really like the presentation, and it worked well on my windows10 tablet.

Titles bigger and closer to each thing?

Bonus points if you animate the action, never-the-less, very well done. [thumbs up emoji]

Cheers,
Marco

1 Like
25

Thanks for the feedback @Gorgeous_J_Missilaumcher . I cannot make the titles bigger because I am constrained by the smartphoneā€™s vertical viewport.
Happy to see that it worked on your tablet!

@Usnul Iā€™ve added the option to scroll using the keys. Now users with a trackpad/trackball/ultra-fast-scrolling-mice have an alternative.
Regarding the AO, do you have any examples? Maybe @looeee does.
I did some research and I think I have to:

  1. In Blender, bake a texture of the ambient occlusion, for every material (I have 200! Hopefully, there is some script that can automate that)
  2. Load it as a regular texture to my model using Three.js?

Thanks!

26

Hi Enric,

I meant ā€˜betterā€™ integration of the text with itā€™s visual. No worries, I think you made a very clear, compelling and engaging CV.

As far as AO, it really depends on the scope of work you seek. Occlusion is a tasty artistic featureā€¦ If youā€™re going for technical skills, your three.js proves the point of your skills very well. If you are after more control of creative aspects, there are a multitude of eye-candy things that need doingā€¦ like I mentioned animating the scenes, normal maps, and so on.
A total fucking hassle! If youā€™re doing the technical, no need to sweat the other stuff, for example, I can see you have the talent. I guess it depends on how obsessive you are. Nu? I liked your work.

Suerte, chabal!
Marco

27

Can you calculate text size from a canvas dom element on screen set to 90vw?
context.measureText(text).width

28

@Lawrence3DPK I understand what you mean but I am loading a single 3D model (it contains everything: texts, objects, my dog, etc). It is not possible to scale just the texts in this case.

@Gorgeous_J_Missilaumcher I think you are right. I should leave it here (Iā€™ve been very obsessed with this project for more than 3 months), it is hard to see when a side-project must be finished :joy:

1 Like
29

Love it, itā€™s really impressive. Iā€™ve also done a resume with ThreeJS but it doesnt look that good :slight_smile:

1 Like
30

I love your resume. It is very inlined with my companies mission which is making 3D websites mainstream. We believe 3D websites will take over 2D websites. And with Muse, we are allowing anyone to build a 3D website that feels like an immersive virtual world using our no-code editor. I love how you built your resume in 3D!!! That is exactly what we are about. Our creators have even built their own resumes within our 3D websites too. Would you be interested in applying for our Head of Web Graphics role? https://jobs.ashbyhq.com/muse?utm_source=vzpp6eB5Y4

1 Like
31

Hello! Small update: I removed OrbitControls and now the 3D model rotates based on the scroll position, which feels way more natural. In order to keep the damping effect I used the Smooth Scrollbar javascript package.

@vielzutun.ch I added some animations as you suggested :slight_smile:

2 Likes
32

Hello! I did a ā€œsmallā€ rework of my 3D resume:

What do you think? :slight_smile:

I am having some performance issues with low-end phones (the FPS drops to 20-30), I tried adjusting the resolution but it is not very effective:

renderer.setPixelRatio(window.devicePixelRatio < 1.5 ? window.devicePixelRatio : 2);

Screenshot 2024-06-18 at 21.10.57
Screenshot 2024-06-18 at 21.10.572550Ɨ1594 122 KB

2 Likes
33

Buttery smooth on Huawei p30, love the zoom effect, great work!

1 Like
34

@enric1994 scrolling through your resume provides a nice experience.

Just in case if you might be interested in catching up with three.js revisions then see the attached modified version of your index.html file:

  • it uses importmap and the script type within the body is changed to module so imports could be added
  • couple of renderer settings were removed and the DRACO loader settings were changed / added
  • declaration of the newScale was also moved further up

Maybe create a new branch in your GitHub repository and test it yourself before you decide to use any of it. It worked fine for me by using the python server locally.

Not sure if this would improve the experience on mobile devices but feel free to use the code as you please.

index.zip (3.6 KB)

1 Like
35

Thanks! I didnā€™t notice any improvement in performance, but the code is definitely more organised this way. @GitHubDragonFly