three.js 09-03 之 Tween 动画

最新推荐文章于 2024-06-26 15:01:14 发布
最新推荐文章于 2024-06-26 15:01:14 发布
阅读量998 收藏
点赞数 2
分类专栏： javascript threejs three.js webgl 文章标签： three.js webgl tween.js threejs javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhulx_sz/article/details/79388113
版权
threejs 同时被 3 个专栏收录
59 篇文章 7 订阅
订阅专栏
three.js
59 篇文章 6 订阅
订阅专栏
webgl
59 篇文章 2 订阅
订阅专栏

    Tween.js 是一个小型的 JavaScript 库，可以从 https://github.com/sole/tween.js 下载。这个库可以用来定义某个属性在两个值之间的过渡，自动计算起始值和结束值之间的所有中间值。这个过程叫 tweening（补间）。例如，你可以用这个库将一个网格 x 轴上的位置在 10 秒钟内从 10 递减到 3，如下代码片段所示：

var tween = new TWEEN.Tween({x: 10})
    .to({x: 3}, 10 000)
    .easing(TWEEN.Easing.Elastic.InOut)
    .onUpdate(function() {
        // 更新你的 Mesh
    })
    .onComplete(function(){
        // 如果需要，在此进行后处理动作
    });

在这段简短的示例代码中，我们创建了一个 TWEEN.Tween 对象，这个对象可以保证 x 属性在 10 秒钟内从 10 变化到 3。通过 Tween.js 你还可以指定在指定时间内属性如何变化，是线性的、指数性的，还是其他任何可能的方式（具体看可参考官方指南https://github.com/sole/tween.js/blob/master/docs/user_guide.md）。

    属性值在指定时间内的变化成为 easing（缓动），在 Tween.js 中，你可以通过 .easing() 函数来配置缓动效果。在 three.js 中使用这个库非常简单。下面我们给出一个完整的示例，代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>示例 09.03 - 补间动画</title>
	<script src="../build/three.js"></script>
	<script src="../build/js/controls/OrbitControls.js"></script>
	<script src="../build/js/libs/stats.min.js"></script>
	<script src="../build/js/libs/dat.gui.min.js"></script>
	<script src="../build/js/libs/tween.js"></script>
	<script src="../jquery/jquery-3.2.1.min.js"></script>
    <style>
        body {
            /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式 */
            margin: 0;
            overflow: hidden;
        }
		/* 统计对象样式 */
		#Stats-output {
			position: absolute;
			left: 0px;
			top: 0px;
		}
    </style>
</head>
<body>

<!-- 用于 WebGL 输出的 Div -->
<div id="webgl-output"></div>
<!-- 用于统计 FPS 输出的 Div -->
<div id="stats-output"></div>

<!-- 运行 Three.js 示例的 Javascript 代码 -->
<script type="text/javascript">

	var scene;
	var camera;
	var render;
	var webglRender;
	//var canvasRender;
	var controls;
	var stats;
	var guiParams;
	var gui;
	
	var ambientLight;
	var spotLight;
	var axesHelper;
	//var cameraHelper;
	
    $(function() {
		initStats();
		initRender();
		initCamera();
		initControls();
		
		scene = new THREE.Scene();
		
		//createAxesHelper();
		createAmbientLight();
		createSpotLight();
		createGuiControls();
		
		// 加入地面
		createGround()
		// 创建网格
		createMesh();
		// 创建补间动画
		createTween();
		
		renderScene();
    });
	
	/** 初始化 stats 统计对象 */
	function initStats() {
		stats = new Stats();
		stats.setMode(0); // 0 为监测 FPS；1 为监测渲染时间
		$('#stats-output').append(stats.domElement);
		return stats;
	}
	
	/** 初始化渲染器 */
	function initRender() {
		webglRender = new THREE.WebGLRenderer( {antialias: true, alpha: true} ); // antialias 抗锯齿
		webglRender.setSize(window.innerWidth, window.innerHeight);
		webglRender.setClearColor(0xEEEEEE, 1.0); // 0xeeeeee
		render = webglRender;
		render.shadowMap.enabled = true; // 允许阴影投射
		
		$('#webgl-output')[0].appendChild(render.domElement);
		window.addEventListener('resize', onWindowResize, false);
	}
	
	/** 初始化相机 */
	function initCamera() {
		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 2147483647); // 2147483647
		camera.position.set(-30, 40, 30);
	}
	
	/** 初始化鼠标控制器 */
	function initControls() {
		var target = new THREE.Vector3(0, 0 , 0);
		controls = new THREE.OrbitControls(camera, render.domElement);
		controls.target = target;
		camera.lookAt(target);
	}
	
	/** 当浏览器窗口大小变化时触发 */
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		render.setSize(window.innerWidth, window.innerHeight);
	}
	
	/** 渲染场景 */
	function renderScene() {
		requestAnimationFrame(renderScene);
		render.render(scene, camera);
		
		stats.update();
		TWEEN.update();
		//animateMesh(); // 使物体动
	}
	
	/** 创建补间动画 */
	var rotationTween;
	var rotationTweenBack;
	var p1 = {speed: 0}, p2 = {speed: Math.PI*2};
	function createTween() {
		rotationTween = new TWEEN.Tween(p1)
			.to({speed: Math.PI*2}, 2000)
			.easing(TWEEN.Easing.Linear.None)
			.onUpdate(animateMesh)
			.onComplete(function(){
				p1.speed = 0;
			});
		rotationTweenBack = new TWEEN.Tween(p2)
			.to({speed: 0}, 2000)
			.easing(TWEEN.Easing.Linear.None)
			.onUpdate(animateMesh)
			.onComplete(function(){
				p2.speed = Math.PI*2;
			});
		
		rotationTween.chain(rotationTweenBack);
		rotationTweenBack.chain(rotationTween);
		rotationTween.start();
	}
	
	/** 物体动画 */
	var mesh;
	function animateMesh() {
		guiParams.rotationSpeed = this.speed;
		guiParams.bouncingSpeed = this.speed;
		guiParams.scalingSpeed = this.speed;
		gui.updateDisplay();
		
		mesh = scene.getObjectByName('cube');
		mesh.rotation.x = guiParams.rotationSpeed;
		mesh.rotation.y = guiParams.rotationSpeed;
		mesh.rotation.z = guiParams.rotationSpeed;
		
		mesh = scene.getObjectByName('sphere');
		var px = 20 + ( 10 * (Math.cos(guiParams.bouncingSpeed)));
		var py = 2 + ( 10 * Math.abs(Math.sin(guiParams.bouncingSpeed)));
		mesh.position.set(px, py, 0);
		
		mesh = scene.getObjectByName('cylinder');
		var scaleX = Math.abs(Math.sin(guiParams.scalingSpeed / 4));
		var scaleY = Math.abs(Math.cos(guiParams.scalingSpeed / 5));
		var scaleZ = Math.abs(Math.sin(guiParams.scalingSpeed / 7));
		mesh.scale.set(scaleX, scaleY, scaleZ);
	}
	
	/** 创建一个坐标轴：X（橙色）、Y（绿色）、Z（蓝色） */
	function createAxesHelper() {
		axesHelper = new THREE.AxesHelper(60);
		scene.add(axesHelper);
	}
	
	/** 创建一个 AmbientLight 环境光源 */
	function createAmbientLight() {
		ambientLight = new THREE.AmbientLight(0x0c0c0c);
		scene.add(ambientLight);
	}
	
	/** 创建一个 AmbientLight 环境光源 */
	function createSpotLight() {
		spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
		spotLight.shadow.mapSize.set(2048, 2048); // 必须是 2的幂，默认值为 512
        scene.add(spotLight);
		//cameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
		//scene.add(cameraHelper);
	}
	
	/** 用来保存那些需要修改的变量 */
	function createGuiControls() {
		guiParams = new function() {
			this.rotationSpeed = 0.02;
			this.bouncingSpeed = 0.03;
			this.scalingSpeed = 0.03;
			this.startTween = true;
		}
		/** 定义 dat.GUI 对象，并绑定 guiParams 的几个属性 */
		gui = new dat.GUI();
		gui.add(guiParams, 'rotationSpeed');
		gui.add(guiParams, 'bouncingSpeed');
		gui.add(guiParams, 'scalingSpeed');
		gui.add(guiParams, 'startTween').onChange(function(e) {
			if (guiParams.startTween) {
				rotationTween.start();
			} else {
				rotationTween.stop();
			}
		});
	}
	
	/** 加入地面 */
	function createGround() {
		var groundGeom = new THREE.PlaneGeometry(60, 20);
		var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xbbbbbb, side: THREE.DoubleSide} ); // 0x777777
		var ground = new THREE.Mesh(groundGeom, groundMaterial);
		ground.name = 'ground';
		ground.receiveShadow = true; // 地面接收阴影
		ground.rotation.x = -0.5 * Math.PI;
		ground.position.set(15, 0, 0);
		scene.add(ground);
	}
	
	/** 创建网格 */
	function createMesh() {
		// 创建方块
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
		cube.name = 'cube';
        cube.position.x = -9;
        cube.position.y = 3;
        cube.position.z = 0;
        scene.add(cube);
		
		// 创建球体
		var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
		sphere.name = 'sphere';
        sphere.position.x = 20;
        sphere.position.y = 0;
        sphere.position.z = 2;
        scene.add(sphere);
		
		// 创建柱体
		var cylinderGeometry = new THREE.CylinderGeometry(2, 2, 20);
        var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0x77ff77});
        var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
		cylinder.name = 'cylinder';
        cylinder.position.set(0, 0, 1);
        scene.add(cylinder);
	}
	
</script>
</body>
</html>

在这个示例中，我们使用了两个 Tween 对象，并通过其 .chain() 函数将彼此首尾相连。这样在启动动画之后，程序就会在两个补间动画循环执行。你可以通过右上角的 UI 来观察各个值的实时变化情况。也可以通过菜单上的 startTween 复选钮开启或关闭这两个补间动画。

未完待续···

zhulx_sz
关注
专栏目录
Three.js 基础入门--第12课：进阶篇之使用 Tween.js 创建补间动画
liuhao9999的博客
04-11 345
在 Three.js 中使用 Tween.js，能够很方便地改变模型的位置，不需要手动计算，便能获取到具体的位置数据，以实现我们的需求。
threeJs tweenJs
12-19
在游戏开发中将两个物体融合为一个物体进行游戏设计，最方便的一个使用工具
Three.js - 使用 Tween.js 实现动画效果
ithanmang
09-03 1万+
tween.js是一个小型的javaScript库，其github地址是https://github.com/tweenjs/tween.js 通过这个插件可以是用来定义，某个属性值之间的过渡，自动计算出起始值和结束值之间的所有中间值，这个过程叫做tweening补间。 示例： http://ithanmang.com/threeJs/home/201808/20180829/05-anima...
threejs tween补间动画(七)
最新发布
Summer_Uncle的博客
06-26 352
于是得到这样的一个画面。
ThreeJs使用tweenjs动画库制作动画
Baker的博客
08-18 374
上一节有讲过使用threejs自带的关键帧动画实现动画效果，这节讲一个常用的动画库组件Tween来更简易的实现动画效果，甚至通过一行代码就可以实现一个完整的动画过程，并且Tweenjs还提供了一些相关时间来提供其他操作，比如：开始动画触发，执行中触发和动画执行结束触发，这样可以将整个动画效果和其他操作关联起来。下面看代码，...
Three.js——使用tween.js 完成连续动画
这是个问题
11-17 2111
引入tween.js import TWEEN from '@tweenjs/tween.js' 使用 //先给定初始值 对象内属性的个数不限 let coords = {x: 0, y: 0, z: 0} let tw = new TWEEN.Tween(coords) .to({x: 3, y: 3, z: 3}, 2000) //最终值 .easing(TWEEN.Easing.Linear.None) //变化方.
TWEEN在ThreeJs的基本使用
m0_53770605的博客
11-11 429
/如果后期需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入controls.update()// 将webgl渲染的canvas内容添加到body。// 设置相机投影矩阵的宽高比和视口大小。// 设置动画位置，设置动画次数，设置动画往返。// 使用渲染器，通过相机将场景渲染进来。// 定义窗口大小改变时的回调函数。//在渲染函数中渲染TWEEN。// 将几何体添加到场景中。// 设置渲染的尺寸大小。// 添加坐标轴辅助器。// 导入轨道控制器。// 引入tween。// 创建轨道控制器。
three.js-r133.zip
06-16
2. **动画和交互**：利用`THREE.Animation`和`THREE.Tween.js`进行动画控制，通过监听鼠标和触摸事件实现用户交互。 3. **纹理和光照**：加载和应用纹理增加物体的视觉细节，设置光源增强立体感和真实感。 4. **...
camera-controls:三.js 的相机控件，类似于 THREE.OrbitControls 但支持平滑过渡和更多功能
08-04
路径动画（使用tween.js ） 拖到 iframe 之外 用法 import * as THREE from 'three' ; import CameraControls from 'camera-controls' ; CameraControls . install ( { THREE : THREE } ) ; // snip ( init thre
three.js-master.zip
05-16
Three.js，作为一个基于JavaScript的3D库，是WebGL技术的重要实现框架，使得开发者无需深入了解底层的WebGL API，就能在浏览器中创建出令人惊叹的3D图形效果。这个"three.js-master.zip"文件包含了Three.js项目的...
three.js-3D钢琴播放器.zip
07-13
three.js中的`THREE.Tween.js`或`THREE.AnimationMixer`可以用于创建复杂的动画效果。 在实现3D钢琴播放器时，还需要关注以下几点： - **键盘事件监听**：通过监听用户的键盘输入，我们可以识别哪个琴键被按下，...
WEB 3D技术 three.js 补间动画(tween)
weixin_45966674的博客
01-02 2233
我们new 出一个 Tween 对象 他的两个参数 一个是 sphere1 我们写的一个圆形几何体 就要用它动画 然后 position 告诉它动画操作 position字段。然后 修饰动画 to 两个参数 第一个告诉它 我们要改什么 动画 x轴最终变成4 第二个参数告诉它用时 我们这里 1000 一千毫秒 就是一秒。因为 如果要监听动画对象的 update 你两个都要监听 所以 我们直接监听 TWEEN.update就可以了。然后 它每一次的动画效果 我们也是可以事件监听的。
Three.js —— Tween.js 使用文档 （补间动画）
小道士写程序
11-09 928
目的：将model模型的位置，从原来的(0,0,0)位置，经过1s移动到(20,50,30)的位置。模式一：// 1 设置动画const action=new TWEEN.Tween({x:0,y:0,z:0}) // 初始值.to({x:20,y:50,z:30},1000) // 目标值，毫秒数// 在动画执行期，不断被调用。
81 Three.js 使用TWEEN插件实现动画
热门推荐
现在学习也不晚
03-27 1万+
简介 Tween.js是一个轻量级的JavaScript库，中文官网是：http://www.createjs.cc/tweenjs/。通过这个库可以很容易地实现某个属性在两个值之间的进行过渡，而且起始值和结束值之间的所有中间值都会自动计算出来，这个过程叫作tweening（补间）。基础请查看：Tween.js补间动画插件入门 实现案例 案例查看地址：http://www.wjceo.c...
Three.js —— Tween.js 使用文档
weixin_50999722的博客
04-09 1759
本文主要为Tween.js动画的基本使用介绍，对Tween.js官方使用文档进行了总结归纳以及three.js + tween.js 的动态案例供大家参考参考。
tween.js+three.js： 使用文档 --- Three.js
weixin_1095的博客
01-24 1174
目的：将model模型的位置，从原来的(0,0,0)位置，经过1s移动到(20,50,30)的位置。模式一：// 1 设置动画const action=new TWEEN.Tween({x:0,y:0,z:0}) // 初始值.to({x:20,y:50,z:30},1000) // 目标值，毫秒数// 在动画执行期，不断被调用。其中obj为"to"里面的内容// x:20}).start()// 2 启动动画// 更新动画。
three.js 使用 tweenjs绘制相机运动动画
yinge0508的博客
01-12 818
【代码】three.js 使用 tweenjs绘制相机运动动画。
threejs、TWEEN、光晕效果的简单使用
qq_1336674576的博客
03-23 1136
threejs、TWEEN、光晕效果的简单使用。
Three.js - 通过 Tween.js 维护粒子位移
ithanmang
09-03 1126
使用Tween.js可以一个属性在两个状态之间不断切换，因此，如果让两个粒子系统在特定的时间内不断的切换，就是可以实现一些特效。 示例： http://ithanmang.com/threeJs/home/201808/20180830/02-animation-tween-particle.html 步骤一 示例中，从外部json文件中加载进来了两个Gepmetry对象 let...
three.js 使用tween.js 实现完整飞线动画
05-09
是的，three.js和tween.js可以一起使用，实现复杂的动画效果，包括飞线动画。以下是一个简单的例子，演示了如何使用three.js和tween.js创建一条飞线动画： ```javascript // 创建three.js场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建飞线路径 var curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-10, 0, 0), new THREE.Vector3(-5, 5, 0), new THREE.Vector3(0, 0, 0), new THREE.Vector3(5, -5, 0), new THREE.Vector3(10, 0, 0) ]); // 创建飞线材质 var material = new THREE.LineBasicMaterial({ color: 0xffffff }); // 将飞线路径转换为几何体 var geometry = new THREE.Geometry(); geometry.vertices = curve.getPoints(50); // 创建飞线网格 var line = new THREE.Line(geometry, material); scene.add(line); // 创建飞线动画 var tween = new TWEEN.Tween({t:0}) .to({t:1}, 5000) // 5秒钟 .onUpdate(function() { // 根据tween的进度计算飞线的位置 var position = curve.getPoint(this.t); // 更新飞线网格的位置 line.position.copy(position); }) .start(); // 渲染场景 function render() { requestAnimationFrame(render); TWEEN.update(); // 更新tween动画 renderer.render(scene, camera); } render(); ``` 在这段代码中，我们首先创建了一个three.js场景、相机和渲染器。然后，我们创建了一个CatmullRomCurve3曲线，用于定义飞线路径，并将其转换为three.js几何体。接下来，我们创建了一个TWEEN.Tween对象，将其起始值设置为0，结束值设置为1，表示飞线动画的进度。在Tween对象的 onUpdate 回调函数中，我们根据飞线路径计算当前进度对应的位置，并将飞线网格的位置更新为该位置。最后，我们创建了一个渲染函数，用于在每帧更新Tween动画和渲染场景。 希望这个例子可以帮助你了解如何使用three.js和tween.js创建飞线动画。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值