最近元宇宙的概念很火，并且受到疫情的影响，我们的出行总是受限，电影院也总是关门，但是在家里又没有看大片的氛围，这个时候我们就可以通过自己来造一个宇宙。

我们在网上浏览时，经常能看到很多网站，随着页面滚动条向下滑动时，有非常丰富的页面动画效果；相信很多小伙伴也都很好奇，这样的网站效果是如何做出来的。我们本文就来深入的学习一下GSAP这个库的用法。

Scroll based animation 基于页面滚动的动画 本节我们将学习基于页面滚动的动画。很好的将之前所学的内容做一个复习和运用。 我们会把 WebGL 部分固定到页面中，随着页面的滚动

A-frame配套的glitch项目用手机预览体验太糟糕 。作为新手，遇到很多问题我认为是很正常的，但是这些问题目前得不到解决，不是学习的问题，而是配置的问题，早踩坑早排雷献给大家。

演示代码仓库 。 投射阴影会增加渲染次数。一种常见的解决方案是使用多个灯光，但只有一个平行光产生阴影 EffectComposer 类管理了产生最终视觉效果的后期处理过程链。

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」 右手坐标系 在three.js中使用的是右手坐标系，原因是webGL默认的就是这种坐标系。 简单理解就是，x轴正方向向

应读者的要求，希望我们成立一个专业的、面向成渝地区的前端开发人员的webgl、Threejs行业QQ交流群，便于大家讨论问题。群里有研究webgl、Threejs大佬哦，欢迎大家加入！——点击链接加入

1. 基本概念 在THREEjs中，渲染一个3d世界的必要因素是场景（scene）、相机（camera）、渲染器（renderer）。渲染出一个3d世界后，可以往里面增加各种各样的物体、光源等，形成一个3d世界： 正交摄像机是一个矩形可视区域，物体只有在这个区域内才是可见的物体…

有多种思路可以实现，这里主要提供一种: 绘制一个球体 把全景贴图贴于球内壁。 把摄像机原点置入球内。 添加视角鼠标控制。 添加sprite同时交互。 （一）. 引入所需文件 我的目录结构: （2）.在