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

Question

我做了一些研究，並學習如何將obj文件導出爲可以通過Three.js的JSON模型導入的.js文件。但你怎麼能動畫這樣的模型？我有一個.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); 

       });