Z
Z
zeni1agent2018-12-13 15:26:49
three.js
zeni1agent, 2018-12-13 15:26:49

How to pull mmd models from database in three.js?

I need to output pmx, pmd format model. from the database and display them in the browser
But I had a couple of problems with this because using the code
from the example
https://threejs.org/examples/webgl_loader_mmd.html

function onProgress( xhr ) {
          if ( xhr.lengthComputable ) {
                 				var percentComplete = xhr.loaded / xhr.total * 100;
            console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
          }}
        var modelFile = 'models/藤原妹紅_物理A.pmd';
        var vmdFiles = [ 'models/Test.vmd' ];
        var helper = new THREE.MMDAnimationHelper( {
          afterglow: 2.0
        } );
        var loader = new THREE.MMDLoader();
        loader.loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
          var mesh = mmd.mesh;
          mesh.position.y = - 10;
          scene.add( mesh );
          helper.add( mesh, {
            animation: mmd.animation,
            physics: true
          } );
          var ikHelper = helper.objects.get( mesh ).ikSolver.createHelper();
          ikHelper.visible = false;
          scene.add( ikHelper );
          var physicsHelper = helper.objects.get( mesh ).physics.createHelper();
          physicsHelper.visible = false;
          scene.add( physicsHelper );
          initGui();
        }, onProgress, null );
        var phongMaterials;
        var originalMaterials;
        function makePhongMaterials( materials ) {
          var array = [];
          for ( var i = 0, il = materials.length; i < il; i ++ ) {
            var m = new THREE.MeshPhongMaterial();
            m.copy( materials[ i ] );
            m.needsUpdate = true;
            array.push( m );
          }
          phongMaterials = array;
        }
        function initGui() {
          var api = {
            'animation': true,
            'gradient mapping': true,
            'ik': true,
            'outline': true,
            'physics': true,
            'show IK bones': false,
            'show rigid bodies': false
          };
          var gui = new dat.GUI();
          gui.add( api, 'animation' ).onChange( function () {
            helper.enable( 'animation', api[ 'animation' ] );
          } );
          gui.add( api, 'gradient mapping' ).onChange( function () {
            if ( originalMaterials === undefined ) originalMaterials = mesh.material;
            if ( phongMaterials === undefined ) makePhongMaterials( mesh.material );
            if ( api[ 'gradient mapping' ] ) {
              mesh.material = originalMaterials;
            } else {
              mesh.material = phongMaterials;
                                       }} );
          gui.add( api, 'ik' ).onChange( function () {
            helper.enable( 'ik', api[ 'ik' ] );
          } );
          gui.add( api, 'outline' ).onChange( function () {
            effect.enabled = api[ 'outline' ];
          } );
          gui.add( api, 'physics' ).onChange( function () {
            helper.enable( 'physics', api[ 'physics' ] );
          } );
          gui.add( api, 'show IK bones' ).onChange( function () {
            ikHelper.visible = api[ 'show IK bones' ];
          } );
          gui.add( api, 'show rigid bodies' ).onChange( function () {
            if ( physicsHelper !== undefined ) physicsHelper.visible = api[ 'show rigid bodies' ];
          } );
        }

There were two problems
How to make loading vmdFiles = [ 'models/Test.vmd' ]; an optional condition for the code to work
And what is the best way to load textures if only files can be loaded into the database one by one
and the code looks for the file based on the location of the file 藤原妹紅_物理A.pmd.
and loading the file by url from the database, he will not be able to find the texture
http://localhost/wor/wp-content/uploads/2018/12/藤原...

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question