Javascript 使用JSON加载程序变形顶点时出错

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

我已经阅读了上面的示例并使用了其中的代码。但仍然有一些问题，我甚至不知道问题出在哪里

代码：

摄像机、场景、渲染器；
变量几何、材料、网格、装载机；
//通过PHP声明去除javascript变量
var customHeight=“”；
var customWidth=“”；
var init=函数（）{
//摄像机
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，101000）；
摄像机位置z=1000；
//场面
场景=新的三个。场景（）；
//渲染器
renderer=new THREE.CanvasRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
setClearColor（0x404040，10）；
document.body.appendChild（renderer.doElement）；
customHeightWidth（customWidth，customHeight）；
功能自定义高度宽度（宽度、高度）{
//装载机
loader=new THREE.JSONLoader（）；
//材料
材料=新的三网格基本材料({
颜色：0xffffff，
三面，双面，
透支：错，
对,，
线框：正确
});
//加载器功能
加载程序=功能（显示状态）{
三.加载器.调用（此，showStatus）；
this.withCredentials=false；
};
THREE.JSONLoader.prototype.load=函数（url、回调、texturePath）{
var范围=此；
//todo:将加载API统一到以便于SceneLoader使用
texturePath=texturePath&（typeof texturePath==“string”）？texturePath:this.extractUrlBase（url）；
这个.onLoadStart（）；
this.loadAjaxJSON（this、url、回调、texturePath）；
};
var xhr=new XMLHttpRequest（）；
var json=json.parse（xhr.responseText）；
THREE.JSONLoader.prototype.parse=函数（json，texturePath）{
var scope=这个，
几何体=新的三个。几何体（），
scale=（json.scale！==未定义）？1.0/json.scale:1.0；
解析变形（尺度）；
函数解析变形（比例）{
if（json.morphTargets！==未定义）{
变量i、l、v、vl、DST顶点、SRC顶点；
对于（i=0，l=json.morphTargets.length；i

这与您以前尝试做的完全不同。现在您似乎正在尝试直接解析JSON文件，您现在应该在其中引用它

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

---

我之前与您共享的块本身无法工作。它只是一个如何填充几何体的示例。morphTargets，您还有其他事情要做，例如设置MorphAnimation类（链接的源代码演示了该类）

我理解您提供的链接的大部分代码，但有一件事我不太理解。

loader.load（“models/animated/horse.js”，function（geometry）{

this

models/animated/horse.js

这是您在另一个js文件中创建的几何图形吗？我没有创建它，但您可以使用Blender exporter创建一个类似的JSON文件。您的第一个示例似乎是尝试手动定义顶点，在这种情况下，我建议您构建一个JSON对象（格式类似于打开其中一个文件的格式），然后将JSON对象传递给loader.parse（）让JSONLoader类为您完成所有排序数据的工作。这比从类中复制代码并尝试自己重建代码要轻松得多。您能告诉我一个可以进一步研究此类示例的站点吗？我对下一步要做什么有点困惑。您能参考这个upda吗ted代码？

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