微信小游戏中threejs从本地加载gltf模型

博客参考相关链接,介绍在three.js中用GLTFLoader.js加载gltf模型时,微信小游戏环境下遇到的特殊问题。一是上传模型文件提示不在白名单,可加白名单扩展名解决;二是不能用load方法,需用parse方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考 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),
            });
        });
}

 

评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

火星牛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值