使用JSON加载器变形顶点时出错

Question

我读过其他关于变形顶点的文章，特别是我的另一篇文章。然后我想出了这个代码，但仍然有错误，我找不到我目前的问题的答案。

我在https://github.com/mrdoob/three.js/blob/master/src/loaders/JSONLoader.js上阅读了这个例子，并使用了那里的代码。然而，仍然有一些问题，我甚至不知道是什么问题。

代码:

<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>

Answer 1

这与您之前尝试做的事情完全不同。现在看起来您正在尝试直接解析JSON文件，其中您现在应该引用http://threejs.org/examples/#webgl_morphtargets_horse

我看到这个脚本中有很多问题。您应该参考该链接的源代码，因为那里没有太多内容，而且非常直接。

我之前和你分享的块不会自己工作。这只是一个如何填充几何图形的例子。对于morphTargets，您还有其他事情要做，比如设置MorphAnimation类(链接的源代码演示了这一点)