本教程介绍了如何使用Three.js创建一个令人印象深刻的个人作品集网站，包括3D动画、摄像机和光照等概念。 通过使用Three.js的几何图形、材质和网格来实现对象的动画效果，以及通过添加灯光和纹理等元素来增加真实感。 同时介绍了加载图片和贴图以及使用辅助工具进行调试和优化的方法，最终构建了一个令人惊叹的3D作品集网站。

00:00 本视频介绍了如何使用Three.js创建个人3D作品展示网站，包括使用CSS Grid和Three.js构建网站主体内容、使用JavaScript和WebGL绘制3D图形、设置光源和相机以及动画效果。

• 使用CSS Grid和Three.js构建网站主体内容；
• 使用JavaScript和WebGL绘制3D图形；
• 设置光源和相机以及动画效果；
• 使用Vite工具初始化项目。

02:37 在这个部分，我们将安装和设置Three.js，并创建一个空白的3D场景。

• 创建一个包含3JS场景的canvas元素。
• 导入Three.js库并创建一个场景、相机和渲染器。
• 设置相机的位置和渲染器的像素比例和尺寸。
• 调用渲染器的render方法来渲染场景和相机。

05:14 在使用Three.js创建3D场景的过程中，需要定义几何体、材质和网格，并且可以通过动画循环来实现形状的动画效果。

• Three.js提供了多种内置的几何体，如盒子、球体、圆锥体和圆柱体。
• 几何体需要通过材质来赋予颜色或纹理，可以选择不同类型的材质。
• 网格是将几何体和材质组合在一起的实际对象，需要将网格添加到场景中。
• 通过递归函数和render方法可以实现动画循环，使形状实现动态效果。
• 使用不同类型的光源可以让3D对象更加真实，可以选择点光源来照亮对象。

07:51 在Three.js中，我们可以使用光源和辅助器来调整光照和场景的可视化效果。

• 通过设置光源的x、y和z值，可以调整光源的位置。
• 通过实例化环境光，可以均匀地照亮整个场景。
• 使用光源辅助器可以显示点光源的位置和方向。
• 使用网格辅助器可以在场景中绘制二维网格。
• 通过添加轨道控制器，可以使用鼠标在场景中移动。
• 使用数学辅助器可以在场景中随机生成大量的对象。

10:28 通过随机生成的x、y和z位置值为每个星星设置位置，并将其添加到场景中。

• 使用fill函数将三个值填充到数组中，然后使用3JS的random float spread函数将每个值映射到随机生成的-100到100之间的数字。
• 创建一个包含200个值的数组，并为每个值调用add star函数，将星星添加到场景中。
• 使用3JS纹理加载器加载图像，并将其设置为场景的背景。
• 使用纹理加载器加载图像，并将其作为材质的map属性，实现纹理映射。
• 添加法线贴图来增加物体的真实感。
• 通过滚动用户界面来实现动画效果。

13:05 在构建3D投资组合网站时，需要在页面中添加一些标记，以及在JavaScript中定义一个函数来处理滚动事件。

• 在index.html文件中添加标记，包括网页的头部和主要内容。
• 确保根父元素的位置是绝对定位。
• 在JavaScript中重新定位月球的位置，使其沿着z轴向下移动。
• 定义一个名为moveCamera的函数，并将其分配为文档主体的onScroll事件的事件处理程序。
• 在函数中计算用户当前滚动到的位置。
• 更改3D对象的属性，包括旋转月球和头像，以及更改相机的位置。
• 使用CSS Grid布局来轻松构建页面布局。
• 使用gridColumn属性来定位DOM元素与背景中的3D内容对齐。