`
18211103738
  • 浏览: 83666 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

使用MorphAnimMesh实现ThreeJS动画

阅读更多

效果:

 

 

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Morph-Bird</title>
		<style>body{background:#eeeeee;margin:0;padding:0;overflow:hidden;}</style>
		<script src="js/three.min.js"></script>
		<!--<script src="js/stats.min.js"></script>
		<script src="js/Detector.js"></script>-->
	</head>
	<body>
		<script>
		var morphs = [];
		var clock = new THREE.Clock();	//创建一个时针/秒表
		
		var width = window.innerWidth;
		var height = window.innerHeight;
		
		var scene = new THREE.Scene();
		
		var camera = new THREE.PerspectiveCamera( 40, width/2 / height, 1, 10000 );
		camera.position.y = 300;
		camera.target = new THREE.Vector3( 0, 150, 0 );
		//scene.add(camera);
		
		var loader = new THREE.JSONLoader();
		loader.load("models/animated/flamingo.js", function(geometry){
			morphColorsToFaceColors( geometry );
			geometry.computeMorphNormals();		//计算面的每一个法线(这样才能得到正确的关照效果)
			
			var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
			/*MorphAnimMesh类是Mesh的扩展类,封装了对mesh.morphTargetInfluences的处理*/
			var morphAnimMesh = new THREE.MorphAnimMesh( geometry, material );	//动画网格模型(本质和Mesh一样,都表示一个可以显示的对象,所不同的是他包含几个动画帧,可以通过播放帧来看到动画)
			//morphAnimMesh.playAnimation();
			
			morphAnimMesh.duration = 1500;		//持续时间(单位ms)

			morphAnimMesh.scale.set( 1.5, 3.0, 1.5 );	//设置模型比例(放大了一些)
			morphAnimMesh.position.y = 150;		//设置位置(在y轴上)

			scene.add( morphAnimMesh );
			morphs.push( morphAnimMesh );
		});
		
		/*将geometry.morpColors中存储的颜色复制到geometry.faces信息中,因为绘制的时候会用到faces中的颜色*/
		function morphColorsToFaceColors( geometry ) {

			if ( geometry.morphColors && geometry.morphColors.length ) {

				var colorMap = geometry.morphColors[ 0 ];

				for ( var i = 0; i < colorMap.colors.length; i ++ ) {

					geometry.faces[ i ].color = colorMap.colors[ i ];
					geometry.faces[ i ].color.offsetHSL( 0, 0.3, 0 );	//模型的饱和度提高0.3

				}

			}

		}
		
		var upLight = new THREE.DirectionalLight(0xffffff, 1.3);
		upLight.position.set(1, 1, 1);
		scene.add(upLight);
		
		var downLight = new THREE.DirectionalLight(0xffffff, 0.1);
		//downLight.position.set(0.25, -1, 0);
		downLight.position.set(-1, -1, -1);
		scene.add(downLight);
		
		var renderer = new THREE.WebGLRenderer({antialias:true});
		renderer.setSize(width, height);
		renderer.setClearColor(0xeeeeee, 1.0);
		
		renderer.sortObjects = false;
		renderer.autoClear = false;

		renderer.gammaInput = true;
		renderer.gammaOutput = true;
		
		document.body.appendChild(renderer.domElement);
		
		var theta = 0;
		var delta = null;
		var radius = 600;
		function render() {

			theta += 0.1;	//每帧0.1度(如果1秒钟60帧,那么1秒钟就是6度)
			
			/*相机绕y轴以半径为600的圆旋转*/
			camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
			camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );

			camera.lookAt( camera.target );		//相机聚焦于相机的焦点(一般为(0,0,0))

			delta = clock.getDelta();		//得到距离上一次调用render()过去的时间(单位秒)
			
			for ( var i = 0; i < morphs.length; i ++ ) {
				morph = morphs[ i ];
				//console.log(i);		//永远是0
				morph.updateAnimation( 1000 * delta );		//更新动画的每一帧,并在其中渲染动画
			}		

			renderer.clear();		//清空渲染器

			renderer.setViewport( 0, 0, width, height ); //设置视口(等于窗口的位置和大小)
			renderer.render( scene, camera );
			
			requestAnimationFrame(render);
		}
		render();
		</script>
	</body>
</html>

 附注:笔者当前使用的three.js版本是r69

  • 大小: 31.1 KB
分享到:
评论

相关推荐

    基于ARM架构服务器部署docker-compose

    基于arm64版本的docker-compose文件

    附件3-4:台区智能融合终端全性能试验增值税发票开具确认单.docx

    台区终端电科院送检文档

    埃夫特机器人Ethernet IP 通讯配置步骤

    埃夫特机器人Ethernet IP 通讯配置步骤

    rv320e机器人重型关节行星摆线减速传动装置研发.rar

    rv320e机器人重型关节行星摆线减速传动装置研发

    气缸驱动爬杆机器人的设计().zip

    气缸驱动爬杆机器人的设计().zip

    软件工程中期答辩1234567

    56tgyhujikolp[

    基于OpenCV的数字身份验证系统:人脸检测、训练与识别的Python实现

    内容概要:本文档提供了基于OpenCV的数字身份验证系统的Python代码示例,涵盖人脸检测、训练和识别三个主要功能模块。首先,通过调用OpenCV的CascadeClassifier加载预训练模型,实现人脸检测并采集多张人脸图像用于后续训练。接着,利用LBPH(局部二值模式直方图)算法对面部特征进行训练,生成训练数据集。最后,在实际应用中,系统能够实时捕获视频流,对比已有的人脸数据库完成身份验证。此外,还介绍了必要的环境配置如依赖库安装、文件路径设置以及摄像头兼容性的处理。 适合人群:对计算机视觉感兴趣的研发人员,尤其是希望深入了解OpenCV库及其在人脸识别领域的应用者。 使用场景及目标:适用于构建安全认证系统的企业或机构,旨在提高出入管理的安全性和效率。具体应用场景包括但不限于门禁控制系统、考勤打卡机等。 其他说明:文中提供的代码片段仅为基本框架,可根据实际需求调整参数优化性能。同时提醒开发者注意隐私保护法规,合法合规地收集和使用个人生物识别信息。

    Java并发编程面试题详解:123道经典题目解析与实战技巧

    内容概要:本文档详细介绍了Java并发编程的核心知识点,涵盖基础知识、并发理论、线程池、并发容器、并发队列及并发工具类等方面。主要内容包括但不限于:多线程应用场景及其优劣、线程与进程的区别、线程同步方法、线程池的工作原理及配置、常见并发容器的特点及使用场景、并发队列的分类及常用队列介绍、以及常用的并发工具类。文档旨在帮助开发者深入理解和掌握Java并发编程的关键技术和最佳实践。 适合人群:具备一定Java编程经验的研发人员,尤其是希望深入了解并发编程机制、提高多线程应用性能的中级及以上水平的Java开发者。 使用场景及目标:①帮助开发者理解并发编程的基本概念和技术细节;②指导开发者在实际项目中合理运用多线程和并发工具,提升应用程序的性能和可靠性;③为准备Java技术面试的候选人提供全面的知识参考。 其他说明:文档内容详尽,适合用作深度学习资料或面试复习指南。建议读者结合实际编码练习,逐步掌握并发编程技巧。文中提到的多种并发工具类和容器,均附有具体的应用场景和注意事项,有助于读者更好地应用于实际工作中。

    个人健康与健身追踪数据集,包含了日常步数统计、睡眠时长、活跃分钟数以及消耗的卡路里,适用于数据分析、机器学习

    这个数据集包含了日常步数统计、睡眠时长、活跃分钟数以及消耗的卡路里,是个人健康与健身追踪的一部分。 该数据集非常适合用于以下实践: 数据清洗:现实世界中的数据往往包含缺失值、异常值或不一致之处。例如,某些天的步数可能缺失,或者存在不切实际的数值(如10,000小时的睡眠或负数的卡路里消耗)。通过处理这些问题,可以学习如何清理和准备数据进行分析。 探索性分析(发现日常习惯中的模式):可以通过分析找出日常生活中的模式和趋势,比如一周中哪一天人们通常走得最多,或是睡眠时间与活跃程度之间的关系等。 构建可视化图表(步数趋势、睡眠与活动对比图):将数据转换成易于理解的图形形式,有助于更直观地看出数据的趋势和关联。例如,绘制步数随时间变化的趋势图,或是比较睡眠时间和活动量之间的关系图。 数据叙事(将个人风格的追踪转化为可操作的见解):通过讲述故事的方式,把从数据中得到的洞察变成具体的行动建议。例如,根据某人特定时间段内的活动水平和睡眠质量,提供改善健康状况的具体建议。

    《基于YOLOv8的港口船舶靠泊角度偏差预警系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    nginx 访问访问日志按天切割 shell脚本

    nginx

    《基于YOLOv8的核废料运输容器密封性检测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    《基于YOLOv8的农业无人机播种深度监测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    uniapp知识付费(流量主)demo

    模拟知识付费小程序,可流量主运营模式

    java高并发之分片上传

    什么是普通上传 调用接口一次性完成一个文件的上传。 普通上传2个缺点 文件无法续传,比如上传了一个比较大的文件,中间突然断掉了,需要重来 大文件上传太慢 解决方案 分片上传

    英二2010-2021阅读理解 Part A 题干单词(补).pdf

    英二2010-2021阅读理解 Part A 题干单词(补).pdf

    2023-04-06-项目笔记 - 第四百五十五阶段 - 4.4.2.453全局变量的作用域-453 -2025.04-01

    2023-04-06-项目笔记-第四百五十五阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码 小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.453局变量的作用域_453- 2025-04-01

    友缘公司钢材管理平台微信小程序的设计与实现.zip

    微信小程序项目课程设计,包含LW+ppt

    GP300单缸液压圆锥破碎机CAD().zip

    GP300单缸液压圆锥破碎机CAD().zip

    实用telnet调试工具

    超实用telnet调试工具,支持重连,命令定时发送,日志存储等。

Global site tag (gtag.js) - Google Analytics