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

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

 

在uniapp微信小程序使用three.js导入gltf模型包,你可以按照以下步骤进行操作: 1. 将gltf模型文件放置在uniapp项目的静态资源目录,比如`static/models`。 2. 在uniapp页面或组件的js文件引入three.js库和GLTFLoader。 ```javascript import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; ``` 3. 创建一个canvas元素作为渲染器的渲染目标。 ```html <template> <canvas id="canvas"></canvas> </template> ``` 4. 在mounted钩子函数编写加载和渲染模型的代码。 ```javascript mounted() { const canvas = document.getElementById('canvas'); const renderer = new THREE.WebGLRenderer({ canvas }); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); camera.position.z = 5; const loader = new GLTFLoader(); loader.load('../../static/models/model.gltf', (gltf) => { const model = gltf.scene; scene.add(model); // 设置模型的初始位置、旋转等属性 model.position.set(0, 0, 0); model.rotation.set(0, 0, 0); model.scale.set(1, 1, 1); }); function animate() { requestAnimationFrame(animate); // 更新模型、相机等状态 renderer.render(scene, camera); } animate(); } ``` 请确保将`../../static/models/model.gltf`替换为你实际的模型文件路径。 这样,当页面或组件加载后,就会渲染gltf模型在canvas上。 希望对你有所帮助!如有其他问题,请继续提问。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

火星牛

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

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

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

打赏作者

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

抵扣说明:

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

余额充值