three.js学习2（基础）

目录

前言：

参考文档（gsap使用）：

目标一、使物体移动、旋转

Ⅰ、设置时钟方式

Ⅱ、使用gsap

1、安装

2、引入使用 

 目标二、自适应

目标三、双击全屏或者退出全屏

---

前言：

上面学习了three.js在页面上的简单显示，本次学习把展示在页面上的物体动起来

参考文档（gsap使用）：

TweenMax 基础案例_TweenMax中文网tweenmax 是greensock 动画平台的核心插件，greensock 是一套用于在所有主流浏览器中制作高性能html5动画的工具。tweenmax中文网提供tweenmax、tweenlite、timelinemax、timelinelite核心功能的中文文档和greensock 相关插件下载。http://www.tweenmax.com.cn/demo/ 

目标一、使物体移动、旋转

Ⅰ、设置时钟方式

Ⅱ、使用gsap

1、安装

 yarn add gsap

2、引入使用 

 目标二、自适应

解决页面在进行缩放之后，显示bug

// 监听页面变化
window.addEventListener('resize', () => {
	// 更新摄像头
	camera.aspect = window.innerWidth / window.innerHeight
	// 更新摄像机的投影矩阵
	camera.updateProjectionMatrix()
	// 更新渲染器
	renderer.setSize(window.innerWidth, window.innerHeight)
	// 设置渲染器的像素比
	renderer.setPixelRatio(window.devicePixelRatio)
})

目标三、双击全屏或者退出全屏