Three.js MMDLoader.js Mmd模型的加载 pmx模型加载测试

全部代码就不贴上了 太多了 有兴趣可以查看 源码
https://github.com/bemlai/webglMmd

function init() { 

            var loader = new THREE.MMDLoader();
            helper = new THREE.MMDHelper();
            var audioParams ={ delayTime:0 };// { delayTime: 160 * 1 / 30 };      

            loader.load( modelFile, vmdFiles, function ( object ) {

                mesh = object;
                mesh.castShadow = true;
                mesh.receiveShadow = true;

                helper.add( mesh );
                helper.setAnimation( mesh );
                //helper.setPhysics( mesh );


                /
                /*
                 * Note: create CCDIKHelper after calling helper.setAnimation()
                 */
                //骨骼辅助显示
                ikHelper = new THREE.CCDIKHelper( mesh );
                ikHelper.visible = false;
                scene.add( ikHelper );

                /*
                 * Note: You're recommended to call helper.setPhysics()
                 *       after calling helper.setAnimation().
                 *   
                 */
                 //物理刚体辅助显示
                helper.setPhysics( mesh );
                physicsHelper = new THREE.MMDPhysicsHelper( mesh );
                physicsHelper.visible = false;
                scene.add( physicsHelper );

                //
                //描边 已取消
                //effect.enabled = false;

                loader.loadVmds( cameraFiles, function ( vmd ) {

                    helper.setCamera( myMmdScen.camera );

                    loader.pourVmdIntoCamera( myMmdScen.camera, vmd );

                    helper.setCameraAnimation( myMmdScen.camera );

                    //默认初始化不开启自动镜头,改到加载后,时间同步、
                    //更改 开启镜头
                    //helper.doCameraAnimation = true;

                    if(helper.doCameraAnimation)SLOG("开启自动镜头");

                    loader.loadAudio( audioFile, function ( audio, listener ) {


                        helper.setAudio( audio, listener, audioParams );

                        //===================
                        //helper.doCameraAnimation = false;

                        /*
                         * Note: call this method after you set all animations
                         *       including camera and audio.
                         */
                        //console.log("统一模型工作时间");
                        // 该函数作用:查找摄像机 音频 动作数据 模块 中最长的时间 当到达最最长时间 所有都停止 如果未设置 则模块到达自己结束时间停止 不会同步
                        helper.unifyAnimationDuration();


                        if(myMmdScen.camera.add( listener ))SLOG("音频已绑定至相机");


                        if(scene.add( mesh ))SLOG("模型已添加至场景");  

                        if(mesh.add( audio ))SLOG("音频已添加至模型");

                        readyStarHtml();


                        renderer.render( scene, myMmdScen.camera );

                        SLOG("就绪  &nbsp :)");

                        //helper.doCameraAnimation = false;
              }, onProgress, onError );

                }, onProgress, onError );

            }, onProgress, onError );
            //effect.enabled = false;
            //document.getElementById('otherinfo1').innerHTML = "";
        }
帧率不高 用的GTX950M的显卡 全屏 平均50fps 开启镜面、阴影、物理 只有30多 :(
这个Demo 演示地址http://www.niuini.com/index.php?m=play&c=index&a=play&projectId=1

这里写图片描述

### 回答1: 使用three.js加载mmd模型的动画很简单,首先你需要使用MMDLoader.js加载MMD模型,然后将加载模型添加到three.js的场景中,最后使用animationMixer来播放mmd模型的动画。 ### 回答2: 使用Three.js加载MMD模型动画需要以下步骤: 1. 导入Three.js库:在HTML文件中导入Three.js的库文件,确保正确引用并加载。 2. 创建场景和渲染器:使用Three.js创建一个场景对象和一个渲染器对象。 3. 加载模型和动画:使用Three.js提供的Loader类可以加载MMD模型文件(通常是.pmd或.pmx格式)。使用MMDLoader库可以加载模型的骨架和动画数据。可以从Three.js的官方GitHub库中下载和使用这个库。 4. 设置模型材质和贴图:根据需要设置模型的材质和贴图,可以根据模型文件中的贴图路径加载贴图,并设置给模型的材质对象。 5. 创建摄像机和光源:使用Three.js创建一个适当的摄像机和光源,以确保正确的渲染效果。 6. 动画控制:创建一个AnimationMixer对象,将模型和动画数据传递给它,并使用AnimationMixer的update()方法定期更新模型的动画。 7. 渲染循环:在每一帧中,使用渲染器的render()方法将场景和摄像机渲染到屏幕上,并在每一帧中更新动画。 8. 添加互动控制:根据需要添加鼠标或键盘控制,以便用户可以与模型进行互动。 9. 调整渲染效果和性能:根据需要调整渲染效果和性能,例如添加阴影、光照效果等,或者优化资源加载和内存使用。 10. 完成:完成以上步骤后,就可以在浏览器中加载和显示MMD模型的动画了。 总结:使用Three.js加载MMD模型的动画需要导入Three.js库、创建场景和渲染器、加载模型和动画、设置材质和贴图、创建摄像机和光源、控制动画、渲染循环、添加互动控制,最后调整渲染效果和性能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值