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

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

我之前与您分享的街区不会自行运作。这只是一个如何填充geometry.morphTargets的例子，你还有其他事情要做，比如设置MorphAnimation类（链接的源代码演示）

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

1 个答案: