|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/building-designing-3d-portfolio-website-with-three-js/
课程评论：没有评论
课程名称：使用 Three JS 构建和设计 3D 作品集网站 课程概述：欢迎参加《使用 Three JS 构建和设计 3D 作品集网站》课程。本课程是一门全面的项目基础课程，通过分步学习，您将掌握如何使用 Javascript 和专门为构建 3D 网站设计的 Three JS 库来构建和设计作品集网站。您将学习如何以最引人注目的方式向未来的雇主或客户展示您的技能和资历。此外，您还将学习如何将多种 3D 模型集成到您的作品集网站中，增强其互动性和吸引力。 在课程的引导部分，您将学习 Three JS 的基本原理，包括了解其常见用例、主要特性，以及浏览一些使用 Three JS 构建的网站实例。接着，您将探索几种值得考虑构建的 3D 网站创意。在集中于构建 3D 作品集网站的过程中，您将了解作品集网站中几个重要的部分，例如关于我部分、项目详细描述、作品展示以及来自之前客户的评价或评论。在项目开始之前，您将学习如何从 Sketchfab 和 Clara IO 等网站找到并下载 3D 模型，因为这些模型将被整合到您的作品集网站。 随后，您还将逐步指导如何准备您的 IDE 和 Javascript 库。一旦掌握了必要的 Three JS 知识，您将进入课程的主要部分——项目环节，在这里您将获得逐步指导，学习如何使用 Three JS 构建和设计 3D 作品集网站，并在此阶段花费大部分时间。完成 3D 作品集网站后，您将进行测试，以确保网站正常运行并具备高质量的用户界面。测试的四个主要目标包括功能测试、用户体验测试、性能测试和兼容性测试。 为了明确为何学习如何使用 Three JS 构建作品集网站以及将 3D 模型集成到网站中的好处，这些问题很多。首先，求职市场竞争越来越激烈，因此为了获取雇佣或客户，您需要找到最有效的策略，使自己在众人中脱颖而出，构建 3D 作品集网站就是您应该考虑的诸多方式之一，这将潜在地让您与其他竞争对手区分开来。此外，通过以独特的方式展示您的项目，未来的雇主或客户通常会对您的作品集网站印象深刻，从而显著提高您被录用的机会。 最后，学习如何使用 Javascript 和 Three JS 构建 3D 网站，绝对是市场上需求量大的技能，可以让您能够构建和设计许多酷炫的项目，例如虚拟房地产、虚拟课堂、3D 电商市场、互动地图等。 课程学习内容包括： - 学习 Three JS 的基本原理及其常见用例、主要特性和语法 - 了解作品集网站中重要的组成部分，如关于我部分、项目描述、作品展示及客户评价 - 学习如何从 Sketchfab 和 Clara IO 网站找到并下载 3D 模型 - 学习如何初始化 Vite JS 包 - 学习如何在 Three JS 中创建场景、相机和渲染器 - 学习如何创建 3D 立方体，并在每一面上覆盖您的照片 - 学习如何加载 3D 模型并设置其缩放 - 学习如何旋转和动画化 3D 模型 - 学习如何添加环境光和定向光 - 学习如何构建一个完全功能的 3D 作品集网站，并包含动态的 3D 背景 - 学习如何向 HTML 文件添加内容 - 学习如何用 CSS 样式化您的网站 - 学习如何将按钮连接到您的 Github 页面 - 进行测试以确保网站正常运行，包括功能性、用户体验、性能和兼容性测试。
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 syntaxGet to know several important aspects to have in portfolio website, such as about me section, project description, portfolio showcase, and reviews from previous clientsLearn how to find and download 3D models from Sketchfab and Clara IOLearn how to initialize Vite JS packageLearn how to create scene, camera, and renderer in Three JSLearn how to create 3D cube and cover each side with your photoLearn how to load 3D model and set the scaleLearn how to rotate and animate 3D modelsLearn how to add ambient lighting and directional lightingLearn how to build a fully functioning 3D portfolio website with fully animated 3D backgroundsLearn how to add content to your HTML fileLearn how to style your website with CSSLearn how to connect your button with your Github pageConduct 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.
