tween动画基础使用步骤

var step ={x:0};
var tween = new TWEEN.Tween(step).to({x:100},1000);//x从0到100，用时1s
tween.easing(TWEEN.Easing.Quadratic.Out);//动画缓动函数
tween.start();//动画开始第一帧
TWEEN.update();//配合requestAnimationFrame使用

THREE导入模型

首页要引入必要文件

<script src="js/three.js"></script>
<script src="js/OBJLoader.js"></script>//针对模型文件导入
<script src="js/MTLLoader.js"></script>//针对材质文件导入

具体代码

var onProgress = function ( xhr ) {//模型导入过程if ( xhr.lengthComputable ) {var percentComplete = xhr.loaded / xhr.total * 100;console.log( Math.round( percentComplete, 2 ) + '% downloaded' );}
};
var oncompleteCallback = function (object) {//模型导入完成后引用object.traverse(function(child) {//导入文件中多段模型if (child instanceof THREE.Mesh) {mesh = child;}});object.children[0].geometry.computeBoundingBox();//模型放到中心1object.children[0].geometry.center();//模型放到中心2object.position.y =- 100;//模型操作object.rotation.y =- Math.PI*0.88;//模型操作scene.add( object );animate();
};
var onError = function () { };
new THREE.MTLLoader()//主体1，材质.setPath( 'model/' ).load( 'test.mtl', function ( materials ) {materials.preload();new THREE.OBJLoader()//主体2，模型（也可单独使用）.setMaterials( materials ).setPath( 'model/' ).load( 'deertest.obj', function ( object ) {oncompleteCallback(object);}, onProgress, onError );} );

three与tween配合使用

<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>*{margin: 0;padding: 0;}body{background-color: #000;}
</style>
<body><div id="bloc"></div>
</body>
<script src="js/three.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/MTLLoader.js"></script><script src="js/tween.min.js"></script>
<script>var camera,scene,renderer;renderer = new THREE.WebGLRenderer({antialias:true,alpha:true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth,window.innerHeight);renderer.shadowMap.enabled = true;document.body.appendChild(renderer.domElement);scene = new THREE.Scene();//摄像机camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 200000 );camera.position.z = 1600;camera.position.y = 300;//灯光var ambientlight = new THREE.AmbientLight(0xffffff,0.1);scene.add(ambientlight);var pointlight = new THREE.SpotLight(0xffffff,0.8);pointlight.position.z = 3000;pointlight.position.x = -12000;pointlight.position.y = 12000;scene.add(pointlight);var step ={ry:0,z:0,y:0,x:0};var step1 ={ry:0.4,z:-300,y:-250,x:0};//第一段动画坐标点var step2 ={ry:0.88,z:-1000,y:100,x:150};//第二段动画坐标点var tween = new TWEEN.Tween(step).to(step1,1000);//第一段动画var tween2 = new TWEEN.Tween(step).to(step2,2000);//第二段动画tween.easing(TWEEN.Easing.Quadratic.Out);tween2.easing(TWEEN.Easing.Cubic.InOut);tween.chain(tween2);//第一段动画后进行第二端动画tween.start();//动画开始第一帧var onProgress = function ( xhr ) {if ( xhr.lengthComputable ) {var percentComplete = xhr.loaded / xhr.total * 100;console.log( Math.round( percentComplete, 2 ) + '% downloaded' );}};var oncompleteCallback = function (object) {object.traverse(function(child) {//导入文件中多段模型if (child instanceof THREE.Mesh) {mesh = child;}});object.children[0].geometry.computeBoundingBox();//模型放到中心1object.children[0].geometry.center();//模型放到中心2object.position.y =- 100;//模型操作object.rotation.y =- Math.PI*0.88;//模型操作scene.add( object );animate();};var onError = function () { };new THREE.MTLLoader().setPath( 'model/' ).load( 'test.mtl', function ( materials ) {materials.preload();new THREE.OBJLoader().setMaterials( materials ).setPath( 'model/' ).load( 'deertest.obj', function ( object ) {oncompleteCallback(object);}, onProgress, onError );} );function animate() {requestAnimationFrame( animate );render();}function render() {TWEEN.update();//动画一帧帧更新配合requestAnimationFramemesh.rotation.y = step.ry;mesh.position.z = step.z;mesh.position.y = step.y;mesh.position.x = step.x;camera.lookAt( scene.position );renderer.render( scene, camera );}</script>
</html>

效果

THREE 使用Tween插件实现动画相关推荐

unity2D动画-角色切片与2DAnimation插件做动画
unity2D动画-角色切片做动画写在前面的话开发环境与准备用角色切片做动画终于可以Key动画了 2DAnimation插件做动画总结写在前面的话更新建议有复杂2D动画需求的话用spi ...
AE插件自定义动画曲线AEscripts flow for Mac
AE插件自定义动画曲线AEscripts flow for Mac AE插件自定义动画曲线AEscripts flow for Mac是一款在After Effects中运行的ae插件,提供了25 ...
Unity动画DG.Tween插件
研究了一下DoTween插件,简单记录一下学习心得.还有几个小Demo实现规定时间内完成进度条进度 UI到指定位置缩小和透明消失下面有一些我自己的小总结
语音识别插件_2D动画唇动合成，根据语音自动生成动画人物口型
蕾师师发自凹非寺量子位报道 | 公众号 QbitAI 只需要输入一段语音,代码会自动生成与之相对的动画唇形. 还是毫无违和感的那种. 这是一个在GitHub上拥有501星的开源项目,叫做Rhu ...
android 动画结束停留,循环动画 tween durationMillis = 90195 动画将停留在最后一针
android jetpack compose rememberInfiniteTransition tween durationMillis >= 90195.动画将停留在最后一针. jetp ...
maya python插件_Maya动画批量重定向插件及Python开发插件笔记
前言前段时间研究使用Maya重定向动画,但一个一个手动操作还是有点心烦,所以我花了2天时间学习了Pyhton并写了这个插件(本人有c++.qt.JavaScript经验所以学的快),在这个过程也积累 ...
svga插件_svga动画组件
更新记录 1.0.1(2020-12-21) 修复ios app uploader上传bug 1.0.0(2020-12-14) 统一事件返回查看更多原生插件通用使用流程: 购买插件,选择该插件绑 ...
svga插件_svga动画插件，直播svga礼物展示
更新记录 1.0.1(2020-09-16) 1.startAnimation接口支持url指定网络地址动画,path指定本地路径动画 1.0.0(2020-09-15) 1.初始化接口:init 2 ...
ae插件form_MG动画教程 | 那些会用AE插件的设计师都可以提前下班了
在制作一些动效复杂的MG动画时,为了达到流畅的动态效果,有时候需要对数量较多的关键帧逐个进行调整设置,那么工程量相对来说就比较大了.这时候如果能使用第三方插件或相应的动效脚本,可以在很大程度上省去这种 ...
React插件及动画
一.插件 React.addons是为了构建 React应用而放置的一些有用工具的地方.此功能应当被视为实验性的,但最终将会被添加进核心代码中或者有用的工具库中: TransitionGroup和CS ...

THREE 使用Tween插件实现动画

tween动画基础使用步骤

THREE导入模型

three与tween配合使用

THREE 使用Tween插件实现动画相关推荐

最新文章

热门文章