Three.js網格動畫和紋理映射

Question

我進行了一些研究，並學習了如何將obj文件導出到.js文件，該文件可以由Three.js的JSON模型導入。 但是如何為這樣的模型制作動畫呢？ 我有一個.js格式的鳥模型，我需要學習拍打翅膀。 此外，當我從互聯網上下載obj文件（因為它是免費模型）時，它還包含對象的紋理圖像，但是當我在3d建模軟件Blender 3d中導入obj時，它無法加載紋理，但是它的位置恰好在從文本編輯器中打開obj文件時。 當我將其轉換為.js格式時，它也具有位於bmp圖片上以進行紋理映射的正確位置，但是當我使用JSON模型在webgl中加載模型時無法加載。

任何人都可以從我可以學到的所有思想中指出正確的方向，如果您立即知道並幫助我，那將是非常棒的。 拜托，我需要你們的幫助。

Js模型文件的代碼

{
    "metadata" :
    {
        "formatVersion" : 3,
        "generatedBy" : "Blender 2.66 Exporter",
        "vertices" : 2652,
        "faces" : 4798,
        "normals" : 2652,
        "colors" : 0,
        "uvs" : [1202],
        "materials" : 4,
        "morphTargets" : 0,
        "bones" : 0
    },

    "scale" : 1.000000,

    "materials" : [ {
        "DbgColor" : 15658734,
        "DbgIndex" : 0,
        "DbgName" : "_5___Default0",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "n-201.bmp",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Lambert",
        "specularCoef" : 2,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },
    {
        "DbgColor" : 15597568,
        "DbgIndex" : 1,
        "DbgName" : "_5___Default1",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "n-200.bmp",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Lambert",
        "specularCoef" : 2,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },
    {
        "DbgColor" : 60928,
        "DbgIndex" : 2,
        "DbgName" : "_5___Default2",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "n-202.bmp",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Lambert",
        "specularCoef" : 2,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },
    {
        "DbgColor" : 238,
        "DbgIndex" : 3,
        "DbgName" : "_5___Default",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "n-203.bmp",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Lambert",
        "specularCoef" : 2,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },

    {
        "DbgColor" : 15658496,
        "DbgIndex" : 4,
        "DbgName" : "_5___Default0",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "n-201.bmp",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Lambert",
        "specularCoef" : 2,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },

    {
        "DbgColor" : 61166,
        "DbgIndex" : 5,
        "DbgName" : "_5___Default1",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "n-200.bmp",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Lambert",
        "specularCoef" : 2,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },

    {
        "DbgColor" : 15597806,
        "DbgIndex" : 6,
        "DbgName" : "_5___Default2",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "n-202.bmp",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Lambert",
        "specularCoef" : 2,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },

    {
        "DbgColor" : 419610,
        "DbgIndex" : 7,
        "DbgName" : "_5___Default",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "n-203.bmp",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Lambert",
        "specularCoef" : 2,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    }],

Answer 1

在這里看看

http://threejs.org/examples/webgl_morphnormals.html http://threejs.org/examples/webgl_morphtargets_horse.html

在第一個示例中，請看第90行

var loader = new THREE.JSONLoader();
                loader.load( "models/animated/flamingo.js", function( geometry ) {

                    morphColorsToFaceColors( geometry );
                    geometry.computeMorphNormals();

                    var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
                    var meshAnim = new THREE.MorphAnimMesh( geometry, material );

                    meshAnim.duration = 5000;

                    meshAnim.scale.set( 1.5, 1.5, 1.5 );
                    meshAnim.position.y = 150;

                    scene1.add( meshAnim );
                    morphs.push( meshAnim );

                } );