Error in Morphing Vertices using JSON Loader

问题

I've read other articles about morphing vertices, particularly my other post. Then I came up with this code, but still there are errors and I can't find the answer to my current problem.

I've read this example on https://github.com/mrdoob/three.js/blob/master/src/loaders/JSONLoader.js and used the codes there. Yet there are still problems that I can't even know what seems the problem.

Code:

<script src="js/three.min.js"></script>
<script type=text/javascript>
  var camera, scene, renderer;
  var geometry, material, mesh, loader;

  //decalaration of javascript variables thru PHP Declaration
  var customHeight = "<?php $height = ($_POST['height'])*20; print $height; ?>";
  var customWidth = "<?php $width = ($_POST['width'])*20; print $width; ?>";

    var init = function() {
      //camera
     camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 10000 );
     camera.position.z = 1000;
     //scene
     scene = new THREE.Scene();
     //renderer
     renderer = new THREE.CanvasRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.setClearColor(0x404040 , 10);

    document.body.appendChild( renderer.domElement );

    customHeightWidth(customWidth, customHeight);

      function customHeightWidth(width, height){

    //loader
        loader = new THREE.JSONLoader();
    //material
        material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide,
    overdraw: false,
    morphTargets: true,
    wireframe: true
    });
//loader function
loader = function ( showStatus ) {
THREE.Loader.call( this, showStatus );
this.withCredentials = false;
};
THREE.JSONLoader.prototype.load = function ( url, callback, texturePath ) {
var scope = this;
// todo: unify load API to for easier SceneLoader use
texturePath = texturePath && ( typeof texturePath === "string" ) ? texturePath : this.extractUrlBase( url );
this.onLoadStart();
this.loadAjaxJSON( this, url, callback, texturePath );
};

var xhr = new XMLHttpRequest();
var json = JSON.parse( xhr.responseText );
THREE.JSONLoader.prototype.parse = function ( json, texturePath ) {

var scope = this,
geometry = new THREE.Geometry(),
scale = ( json.scale !== undefined ) ? 1.0 / json.scale : 1.0;
parseMorphing( scale );

function parseMorphing( scale ) {
  if ( json.morphTargets !== undefined ) {
     var i, l, v, vl, dstVertices, srcVertices;
     for ( i = 0, l = json.morphTargets.length; i < l; i ++ ) {
       geometry.morphTargets[ i ] = {};
       geometry.morphTargets[ i ].name = json.morphTargets[ i ].name;
           geometry.morphTargets[ i ].vertices = [];

    dstVertices = geometry.morphTargets[ i ].vertices;
    srcVertices = json.morphTargets [ i ].vertices;

    for( v = 0, vl = srcVertices.length; v < vl; v += 3 ) {
    var vertex = new THREE.Vector3();
    vertex.x = srcVertices[ v ] * scale;
    vertex.y = srcVertices[ v + 1 ] * scale;
    vertex.z = srcVertices[ v + 2 ] * scale;

    dstVertices.push( vertex );
    }
      }

   }

mesh = new THREE.Mesh(geometry, material);
   scene.add( mesh );

     }
   };

    var animate = function() {
    requestAnimationFrame(animate);
    //mesh.rotation.x += 0.01; 
    //mesh.rotation.y -= 0.05;

    renderer.render(scene, camera);
     }

 init();
 animate();
 </script>

回答1:

This is nothing like what you were trying to do before. Now it looks like you are trying to parse a JSON file directly, in which you should be now referencing http://threejs.org/examples/#webgl_morphtargets_horse

I see loads of problems in this script. You should refer to the source code of that link because there isn't much there and it pretty straight forward.

The block I shared with you before won't work on its own. It was simply an example of how you populate the geometry.morphTargets, you still have other things to do like setup MorphAnimation class (which the source code of the link demonstrates)

来源：https://stackoverflow.com/questions/23888333/error-in-morphing-vertices-using-json-loader

标签

javascript

json

morphing