使用JSON Loader变形顶点时出错 [英] 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.

我已经在 https:/上阅读了此示例/github.com/mrdoob/three.js/blob/master/src/loaders/JSONLoader.js 并在其中使用了代码.但是仍然存在一些问题，我什至不知道问题出在哪里.

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.

代码:

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

推荐答案

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

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.

我之前与您共享的街区无法单独运行.这只是如何填充geometry.morphTargets的一个示例，您仍然需要执行其他操作，例如setup MorphAnimation类(该链接的源代码演示了该类)

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)

这篇关于使用JSON Loader变形顶点时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！