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

       });