# threejs-learning-case

**Repository Path**: zuoben/threejs-learning-case

## Basic Information

- **Project Name**: threejs-learning-case
- **Description**: 课程学习，教程案例，说明文件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-29
- **Last Updated**: 2025-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# threejs-learning-case

#### Tween.js
	Tween.js是一个轻量级的JavaScript库，可以从https://github.com/sole/tween.js/下载。
	通过这个库可以很容易地实现某个属性在两个值之间进行过渡，而且起始值和结束值之间的所有中间值都会自动计算出来，这个过程叫作tweening（补间）。

	var tween = new TWEEN.Tween({x: 10}).to({x: 3}, 10000)
		.easing(TWEEN.Easing.Elastic.InOut)
		.onUpdate(function(){
			// update the mesh
		})
		.start();
	
	上述代码创建了TWEEN.Tween对象，这个对象会确保x属性值在10000毫秒内从10变化到3。
	通过Tween.js，你还可以指定属性值是如何变化的，是线性的、指数性的，还是其他任何可能的方式（完整列表可以参照http://sole.github.io/tween.js/examples/03_graphs.html）。
	属性值在指定时间内的变化被称为easing（缓动），在Tween.js中你可以使用easing()方法来配置缓动效果;
		
	var tweenBack = new TWEEN.Tween({x: 3}).to({x: 10}, 10000);
		tweenBack.easing(TWEEN.Easing.Elastic.InOut);
		tweenBack.chain(tween);
		tweenBack.start();
		
	这个通过chain()方法可以将这两个补间衔接起来，这样当动画启动之后，程序就会在这两个补间循环。例如：一个动画在另一个动画结束后开始。可以通过chain方法来使实现。
	
	tweenBack.repeat(10);
	如果你想制作循环动画可以使用chain来实现，但是更好的方法是使用repeat方法。它接收一个用于描述你想循环多少次。
	
	tweenBack.yoyo();
	这个函数只在你使用repeat方法是起作用。当它被激活时，tween 的效果类似yoyo效果。该效果是动画会在开始或结束处向反方向反弹。
	
	tweenBack.delay(1000);
	delay方法用于控制动画之间的延时。
	
	TWEEN.add(tween) 和 TWEEN.remove(tween)
	用于向被激活的tweens中添加一个tween，或移除一个tween。
	
	以上方法通常只是在内部使用，一般情况下你了解即可。