Hey there!
I’m currently working on my 3D portfolio website, it’s still a work in progress, but I wanted to share what I’ve got so far!
This is my first time using both Blender and Three.js, so any suggestions, tips, or feedback are welcome.
Live Demo: https://ito210.github.io/3d-portfolio-website/
Source Code: https://github.com/ItO210/3d-portfolio-website
I’d really appreciate any thoughts, comments, or ideas for improvement. Thanks!
Carlos.
I like it!
How have you added the audio player, I mean the elements are created in three.js or some other trick?
Also think about adding postprocessing. I think bloom will improve things a lot!
One more thing that you coould do when you go to a section don’t do it linear because it goes trought he model, roatete the camera so that it faces the model dose not go trought it!
Thanks!
The audio player (and the other screens) are actually embedded HTML elements within the 3D scene using React Three Fiber / Drei. So each screen is basically just a React component rendered in 3D space.
I did try adding selective bloom earlier, but I removed it because it felt a bit too heavy. My laptop sounded like it was about to take off 
. I might bring it back though, maybe with an option to toggle it on or off.
And yeah, good point about the camera transitions. I’ll definitely look into rotating the camera toward the model instead of moving linearly through it.
Thanks for the feedback!
I wonder how I can add a HTML element like that in Three.js, not sure where to start, I don’t like React, never used it…
I’m not really sure, to be honest. I actually started this as a pure Three.js project, but as far as I know, there isn’t a built-in way to embed HTML elements directly. After struggling to get HTML embedding working, I discovered that Drei already had an implementation for it.
It handles quite a few things, positioning, rotation, and even occluding it when other objects are in front. Needless to say, I ended up just using the Drei version instead.
Nice example!
Since the building has no interior, you might want to limit how close viewers can get to the building. If you are using OrbitControls, this should be easy to implement.
Who this is the coolest portfolio, the crt-screen is just awesome, the screenshot below is very similar to this thread as well Wheel of Fortune - #5 by Vrrency where I read that issue of 3d immersive interfacing with actual 3d arcade.
Its the things I want to be doing in metaverse, just go in to metaverse arcade gaming. Games within a game, you know the movie inception, dreams within a dream. You will be so deeply immersed inside the experience.
Really cool project for your first time with 3.js, incredible! I think you’re a Spanish speaker; maybe we could collaborate on some 3D web projects. Cheers!
Yes! I actually locked the rotation so you can’t see the bottom, and I’ll definitely add limits as you suggested. Might as well also restrict maxDistance, so the model doesn’t disappear.
Thanks for the idea!
Thanks!
That screen is still a work in progress, I’m still figuring out how I want to implement the games. Maybe someday I’ll turn it into a full 3D VR scene, that would be pretty cool!
Thanks!
Yeah, Spanish is my first language, I just kept English as the default since it’s more accessible for everyone. If you’ve got any project ideas, I’d love to hear them!
