在three.js中morphTargets允许物体发生变形。如果该物体的geometry有 n 个顶点,那么MorphTargets允许你再指定 n 个, 2n 个, 3n 个甚至更多个顶点(比如,p⋅n 个),同时mesh对象提供一个数组morphTargetInfluences(公式中fj表示morphTargetInfluences[j]),具有 p 个元素,每个元素取值在0-1之间。渲染这个物体的时候,某个顶点 Vi 的位置其实变了,成了:
如果一个立方体有8个顶点,MorphTargets又指定了8个顶点,立方体的一个顶点为(1,1,1),而在MorphTargets中与之对应的顶点为(2,2,2),那么当morphTargetInfluences[0]为0.5的时候,实际渲染的时候该顶点的位置就成了(1.5,1.5,1.5)。这样做的好处是显而易见的,你可以通过简单地调整morphTargetInfluences数组来使物体形变,只要之前你设置好了。
效果:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Morph-Cube</title> <script src="js/three.min.js"></script> <style>body{background:#eee;margin:0;padding:0;overflow:hidden;}div{width:400px;height:250px;float:left;}</style> </head> <body> <div> Use controls to change morph target influneces:<br/> <!-- 通过mesh.morphTargetInfluences[0]的值实现变形 --> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[0]=this.value/100;" /><br/> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[1]=this.value/100;" /><br/> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[2]=this.value/100;" /><br/> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[3]=this.vlaue/100;" /><br/> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[4]=this.value/100;" /><br/> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[5]=this.value/100;" /><br/> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[6]=this.value/100;" /><br/> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[7]=this.value/100;" /> </div> <script> var width = window.innerWidth/2, height = window.innerHeight/2; var scene,camera,renderer; var mesh; function init(){ scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000); camera.position.set(0, 0, 100); scene.add(camera); var geometry = new THREE.BoxGeometry(20, 20, 20); //var material = new THREE.MeshBasicMaterial({color:0xff0000}); var material = new THREE.MeshPhongMaterial({color:0xff0000,morphTargets:true}); //变形目标属性设置为true(激活变形功能) /*向geometry中增加morphTargets*/ for(var i=0; i<geometry.vertices.length; i++){ var vertices = []; for(var j=0; j<geometry.vertices.length; j++){ vertices.push(geometry.vertices[j].clone()); if(j == i){ vertices[vertices.length-1].x *= 2; vertices[vertices.length-1].y *= 2; vertices[vertices.length-1].z *= 2; } } geometry.morphTargets.push({name:"target"+i,vertices:vertices}); } console.log(geometry); console.log(material); mesh = new THREE.Mesh(geometry, material); mesh.scale.set(2, 2, 2); //x/y/z放大到2倍 scene.add(mesh); var light = new THREE.DirectionalLight(0xffffff); light.position.set(100, 100, 100); scene.add(light); renderer = new THREE.WebGLRenderer({anitialias:true}); renderer.setSize(width, height); renderer.setClearColor(0xeeeeee, 1); //renderer.sortObjects = false; //是否排列对象 默认是true document.body.appendChild(renderer.domElement); } function animate(){ requestAnimationFrame(animate); mesh.rotation.x += 0.01; mesh.rotation.y += 0.01; renderer.render(scene, camera); } init(); animate(); </script> </body> </html>
附注: 当前笔者使用的three.js版本是r69
相关推荐
基于springboot大学生就业信息管理系统源码数据库文档.zip
基于java的驾校收支管理可视化平台的开题报告
时间序列 原木 间隔5秒钟 20241120
毕业设计&课设_基于 Vue 的电影在线预订与管理系统:后台 Java(SSM)代码,为毕业设计项目.zip
基于springboot课件通中小学教学课件共享平台源码数据库文档.zip
基于java的网上购物商城的开题报告
Delphi人脸检测与识别Demo1fdef-main.zip
基于java的咖啡在线销售系统的开题报告
基于java的自助医疗服务系统的开题报告.docx
内容概要:本文档全面介绍了Visual Basic(VB)编程语言的基础知识和高级应用。首先概述了VB的基本特性和开发环境,随后详细讲述了VB的数据类型、变量、运算符、控制结构、数组、过程与函数、变量作用域等内容。接着介绍了窗体设计、控件使用、菜单与工具栏的设计,文件操作、数据库访问等关键知识点。最后讨论了VB的学习方法、发展历史及其在桌面应用、Web应用、数据库应用、游戏开发和自动化脚本编写等领域的广泛应用前景。 适合人群:初学者和中级程序员,尤其是希望快速掌握Windows桌面应用开发的人群。 使用场景及目标:①掌握VB的基础语法和开发环境;②学会使用VB创建复杂的用户界面和功能完整的应用程序;③理解数据库操作、文件管理和网络编程等高级主题。 其他说明:Visual Basic是一种简单易学且功能强大的编程语言,尤其适合用于开发Windows桌面应用。文中不仅覆盖了基础知识,还包括了大量的实用案例和技术细节,帮助读者快速提升编程技能。
基于java的疫情期间高校防控系统开题报告.docx
基于springboot+vue社区老年人帮扶系统源码数据库文档.zip
基于java的超市商品管理系统的开题报告.docx
基于SpringBoot房屋买卖平台源码数据库文档.zip
xdu限通院23微处理器系统与应用大作业(两只老虎),适应于汇编语言keil软件,
<项目介绍> - 新闻类网站系统,基于SSM(Spring、Spring MVC、MyBatis)+MySQL开发,高分成品毕业设计,附带往届论文 - 不懂运行,下载完可以私聊问,可远程教学 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------
基于java的学生网上请假系统的开题报告.docx
社会经济繁荣发展的今天,电子商务得到了飞速发展,网上交易越来越彰显出其独特的优越性,在人们的日常生活中,出现了各种类型的交易网站。其中一个就是车辆易主交易网站,它是一个服务于用户买卖二手车辆的交易网站,为用户提供了平等互利、方便快捷的网上交易平台,通过这一类型的网站,用户可自由出售和购买车辆。 本课题主要根据车辆本身的特性,充分发挥互联网的特点与优势,构建一个以二手车辆为商品、基于互联网平台的车辆易主业务交易管理系统,并根据车辆易主业务交易管理系统的应用需求,进行需求分析,进而对网站系统作规划设计。采用IDEA为运行平台,以SSH为框架,运用HTML语言、JSP技术、MySql数据库、JSP与后台数据库链接等关键技术建设二手车网上交易系统,构建车辆易主交易系统的会员注册与登录,网站首页展示、用户发布商品车辆,用户求购商品车辆,分页浏览、购物系统、用户后台管理、管理员用户后台管理等功能,并使这些功能得以实现并更好为用户服务。网站整体构建完成且测试成功后,用户可以进入网站进行注册、登录,登录后,用户可以在网站上发布自己的闲置车辆或者寻找想要购买的车辆,还可以收藏车辆,管理发布和收藏的车辆,
SQLite3的向量扩展库,windows dll,版本0.1.5
基于C++实现(控制台)商品库存管理系统