参考 https://threejs.org/examples/#webgl_animation_skinning_morph
在three.js的\examples\js\loaders下,有一个GLTFLoader.js文件用来加载gltf模型。但是在微信小游戏环境下,会遇到一些特殊的问题。
(1)把RobotExpressive.glb模型文件放在代码目录中时,上传会提示“文件类型不在白名单中,不会被上传”,这个问题的解释在:https://developers.weixin.qq.com/minigame/dev/guide/framework/code-package.html
因此,避开的方法是直接再加一个在白名单中的扩展名,如:RobotExpressive.glb.stl
(2)不能用GLTFLoader的load方法,因为他只支持http从远端下载,要用parse方法:
let file='js/libs/three/RobotExpressive.glb.stl';
import { GLTFLoader } from './js/libs/three/GLTFLoader.js';
loadModel(file);
function loadModel(file){
wx.showModal({
content: file,
})
const fs = wx.getFileSystemManager();
let content=fs.readFileSync(file);//,'binary');
// console.log(content);
//load方法无法加载wxfile://文件,只能加载http://文件
let loader = new GLTFLoader();
//loader.load(file, function (gltf) {
loader.parse(content, file,function (gltf) {
wx.showModal({
content: 'gltf loaded.',
});
console.log('loaded glb');
console.log(gltf.animations);
console.log(gltf);
let model = gltf.scene;
model.scale.set(20,20,20);
g_scene.add(model);
const states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];
const emotes = [ 'Jump', 'Yes', 'No', 'Wave', 'Punch', 'ThumbsUp' ];
g_mixer = new THREE.AnimationMixer( model );
const clip = gltf.animations[ 10 ];
const action = g_mixer.clipAction( clip );
if ( emotes.indexOf( clip.name ) >= 0 || states.indexOf( clip.name ) >= 4 ) {
action.clampWhenFinished = true;
action.loop = THREE.LoopOnce;
}
action.reset()
.setEffectiveTimeScale( 1 )
.setEffectiveWeight( 1 )
.fadeIn( 0.5 )
.play();
},function(e){
wx.showModal({
content: 'gltf load fail'+JSON.stringify(e),
});
});
}