Building & Designing 3D Portfolio Website with Three JS

Welcome to Building & Designing 3D Portfolio Website with Three JS courses. This is basically an extensive project based course where you will learn step by step on how to build and design portfolio websites using Javascript and Three JS which is a Javascript library created and designed specifically for building 3D websites. In this course, you will extensively learn how to showcase your skill sets and qualifications to your future employers or clients by presenting them in the most compelling way possible. Not only that, you will also learn how to integrate a variety of 3D models to your portfolio website and make it even more interactive and eye-catching. In the introduction session, you will learn basic fundamentals of Three JS, such as getting to know its common use cases, main features, and exploring a few website examples built using Three JS. Then, you will continue by getting to know several 3D website ideas that you should consider to build. Afterward, since this course is going to be concentrating on teaching you to build a 3D portfolio website, you will learn several important aspects that you need to have in your portfolio website, for example like the about me section, detailed project description, portfolio showcase, and testimonials or reviews from your previous clients. Then, before starting the project, you will learn step by step on how to find and download 3D models from websites like Sketchfab and Clara IO since you will need them to be integrated to your portfolio website. Afterward, you will also be guided step by step on how to prepare your IDE and Javascript libraries. Once you’ve learnt all necessary knowledge about Three JS, you will enter the main section of the course which is the project section where you will be guided step by step on how to build and design 3D portfolio websites using Three JS and you will spend most of your time here. Once the 3D portfolio website has been built, you will be conducting testing to make sure that the website has been fully functioning and the website has a high quality user interface. There will be four main testing objectives, those are functionality testing, user experience testing, performance testing, and compatibility testing.

First of all, we need to ask ourselves these questions: why should we learn how to build a portfolio website using Three JS? And what is the benefit of integrating 3D models to our website? Well, there are a lot of answers to those questions, firstly, the job market is getting more and more competitive, therefore, to get hired or to get clients, you will need to find the most effective strategy to be able to stand out from the crowds and the easiest way to do it is by being different in a positive way. Building a 3D portfolio website is one of many things you should consider as it will potentially set you apart from your other competitors. In addition to that, by presenting your projects in such a unique way, your future employers or clients will most likely be impressed with your portfolio website and it also increases your chance of getting hired very significantly as they see values that you have that other candidates do not have. Last but not least, learning how to build 3D websites using Javascript and Three JS is definitely a high demand skill set in the job market as it will enable you to build and design a lot of cool projects, such as virtual real estate, virtual classroom, 3D E-commerce marketplace, interactive map, and still many more.

Below are things that you can expect to learn from this course:

• Learn basic fundamentals of Three JS, such as getting to know its common use cases, main features, and syntax

• Get to know several important aspects to have in portfolio website, such as about me section, project description, portfolio showcase, and reviews from previous clients

• Learn how to find and download 3D models from Sketchfab and Clara IO

• Learn how to initialize Vite JS package

• Learn how to create scene, camera, and renderer in Three JS

• Learn how to create 3D cube and cover each side with your photo

• Learn how to load 3D model and set the scale

• Learn how to rotate and animate 3D models

• Learn how to add ambient lighting and directional lighting

• Learn how to build a fully functioning 3D portfolio website with fully animated 3D backgrounds

• Learn how to add content to your HTML file

• Learn how to style your website with CSS

• Learn how to connect your button with your Github page

• Conduct testing to make sure the website has been fully functioning. For the testing phase, there are four main objectives, those are functionality, user experience, performance, and compatibility testing.

• Learn how to create basketball 3D model and add lighting

• Learn how to animate basketball 3D model using Three JS