分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

Three.js导入gltf模型和动画

发布时间:2023-09-06 02:18责任编辑:沈小雨关键词:js动画

核心代码

复杂的3D模型一般都是用第三方建模工具生成,然后加载到three中three官方推荐使用gltf格式的文件,代表编辑器是blender本文生成了自定义生成了一个blender模型,并且应用了动画效果,核心代码如下var mixers = [];var clock = new THREE.Clock();(function(){ ???var loader = new THREE.GLTFLoader(); ???loader.load( ‘./static/models/2.gltf‘, function( gltf ) { ???????console.log(gltf); ???????var axesHelper = new THREE.AxesHelper( 5 ); ???????scene.add( axesHelper ); ???????scene.add( gltf.scene ); // 将模型引入three ???????// 调用动画 ???????var mixer = new THREE.AnimationMixer( gltf.scene.children[2] ); ????????mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play(); ???????mixers.push( mixer ); ???})})();var time;var animate = function () { ???requestAnimationFrame(animate); ???var delta = clock.getDelta(); ???for ( var i = 0; i < mixers.length; i ++ ) { // 重复播放动画 ???????mixers[ i ].update( delta ); ???} ???stats.begin(); ???renderer.render( scene, camera ); ???stats.end();};animate();

Three.js导入gltf模型和动画

原文地址:https://www.cnblogs.com/ye-hcj/p/9819205.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved