0

頂点のモーフィングに関する他の記事、特に他の投稿を読みました。次に、このコードを思いつきましたが、まだエラーがあり、現在の問題に対する答えが見つかりません。

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

1 に答える 1

0

これは、以前にやろうとしていたこととはまったく異なります。JSON ファイルを直接解析しようとしているように見えます。ここでhttp://threejs.org/examples/#webgl_morphtargets_horseを参照する必要があります。

このスクリプトには多くの問題があります。そのリンクのソースコードを参照する必要があります。そこには多くの情報がなく、非常に簡単です。

以前にあなたと共有したブロックは、単独では機能しません。これは、geometry.morphTargets を設定する方法の単なる例でした。MorphAnimation クラスのセットアップなど、他にもやるべきことがあります (リンクのソース コードが示しています)。

于 2014-05-29T02:34:25.037 に答える