Threejs入门课程文档教程

1.1 自适应屏幕大小 你会发现，我们前面写好的代码，在页面尺寸发生改变的时候，并不能自适应的改变尺寸，而出现空白或者滚动条突出的情况。所以监听屏幕大小的改变，来重新设置相机的宽高比例和渲染器的尺寸大

GSAP 是一个强大的 JavaScript 工具集，让大家秒变动画大佬。构建适用于所有主流浏览器的高性能动画。动画 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用

上一节，我们使用了requestAnimationFrame参数来获取时间，并处理动画。这一节我们使用three.js自带的Clock类实例的对象来完成时间的处理。 1 Clock 该对象用于跟踪时间

为了最好的利用性能和渲染效果，那么我们只需要在绘制每一帧画面的时候，计算需要渲染的画面即可。这个时候就可以使用window.requestAnimationFrame方法。 1.1 使用方式 wind

物体的缩放与旋转是我们经常要操作的方式。 1 scale设置缩放 因为物体的scale属性是vector3对象，因此按照vector的属性和方法，设置x/y/z轴方向的缩放大小。 2 rotation

1. 坐标轴辅助器 一般我们在开发阶段，添加物体和设置物体位置，都需要参考一下坐标轴，方便查看是否放置到对应位置。所以一般添加坐标轴辅助器来作为参考，辅助器简单模拟3个坐标轴的对象。红色代表 X 轴.

1 控制物体移动 前面我们创建了物体，为了让物体移动起来。我们可以设置它的position属性进行位置的设置。 相机和立方体都是物体。每个物体都是1个对象。 在官方文档里，我们可以看到相机camera

1 如何360度的查看立方体 上一节，我们讲解了如何渲染出一个立方体物体，但是不能很好的全方位观看立方体。这个时候可以使用控制控制器，让相机围绕立方体运动，就像地球围绕太阳一样运动，去观察立方体。 1

1 基本概念 三维的物体要渲染在二维的屏幕上。首先要创建一个场景来放置物体，那么最终怎么显示三维的内容，就应该找一个相机，将相机放在场景的某个位置，然后想要显示就要把相机拍的内容渲染出来。所以就引出三

为了方便模块化进行three.js项目的学习和开发，又不用学习太多的配置，增加学习成本，所以就使用Parcel这个web应用打包工具。 Parcel官网：https://v2.parceljs.cn/

因为Three.js官网是国外的服务器，所以为了方便学习和快速的查阅文档，我们可以自己搭建Three.js官网和文档，方便随时查看案例和文档内容进行学习。 1、首先进入threejs库GitHub地址

近年来web得到了快速的发展。随着HTML5的普及，网页的表现能力越来越强大。网页上已经可以做出很多复杂的动画，精美的效果。还能通过WebGL在网页中绘制高性能的3D图形。 随着浏览器性能和网络带宽的