THREE.JS 从搅拌机中导出 JSON 模型(包括纹理)

Posted

技术标签:

【中文标题】THREE.JS 从搅拌机中导出 JSON 模型(包括纹理)【英文标题】:THREE.JS Exporting JSON models from blender (including textures) 【发布时间】:2013-02-21 04:47:38 【问题描述】:

我正在使用 mrdoob Blender 导出插件 (io_mesh_threejs) 导出到三个 JS,但导出的 .js 或 .dae 对象不包含对纹理贴图文件的任何引用。我需要导出对象的特殊方法吗?或者,是否有一种特殊的方式我需要将地图应用于 Blender 2.65 中的对象,以便导出器包含它。最后,如果没有办法,我可以手动在JS文件中添加纹理吗?


导出前的搅拌机


已导出 JSON 对象(不参考纹理)



    "metadata" :
    
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.65 Exporter",
        "vertices"      : 8,
        "faces"         : 6,
        "normals"       : 8,
        "colors"        : 0,
        "uvs"           : [4],
        "materials"     : 1,
        "morphTargets"  : 0,
        "bones"         : 0
    ,

    "scale" : 1.000000,

    "materials" : [ 
        "DbgColor" : 15658734,
        "DbgIndex" : 0,
        "DbgName" : "Material",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorSpecular" : [0.5, 0.5, 0.5],
        "depthTest" : true,
        "depthWrite" : true,
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    ],

    "vertices" : [1,-0.988938,-1,1,-0.988938,1,-1,-0.988938,1,-1,-0.988938,-1,1,1.01106,-0.999999,0.999999,1.01106,1,-1,1.01106,1,-1,1.01106,-1],

    "morphTargets" : [],

    "normals" : [0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],

    "colors" : [],

    "uvs" : [[1,-0,1,1,0,1,-0,0]],

    "faces" : [43,0,1,2,3,0,0,1,2,3,0,1,2,3,43,4,7,6,5,0,0,1,2,3,4,5,6,7,43,0,4,5,1,0,0,1,2,3,0,4,7,1,43,1,5,6,2,0,0,1,2,3,1,7,6,2,43,2,6,7,3,0,0,1,2,3,2,6,5,3,43,4,0,3,7,0,2,3,0,1,4,0,3,5],

    "bones" : [],

    "skinIndices" : [],

    "skinWeights" : [],

    "animation" : 




加载 JSON 对象的代码

var object;
var loader = new THREE.JSONLoader();          

loader.load( "./quirk_logo.js", function(geometry, materials) 
     var material = new THREE.MeshFaceMaterial(materials);
     object = new THREE.Mesh(geometry, materials);

     object.scale.set(1, 1, 1);
     scene.add(object)
     render();
);

【问题讨论】:

【参考方案1】:

这应该是你要找的。​​p>

http://graphic-sim.com/B_basic_export.html

【讨论】:

这可能与您的加载程序代码有关,我将其与我的比较,我有这个: var modelLoader = new THREE.JSONLoader().load("./quirk_logo.js", function (几何,材料) var material = materials[0]; var mesh = new THREE.Mesh(几何,新 THREE.MeshFaceMaterial(材料));mesh.scale.set(1, 1, 1);scene.add(mesh ); );我唯一的猜测是您没有将材质数组设置为第一个元素,因此如果您按照上述教程进行操作,它会创建网格但不会应用材质。如果之后仍然无法正常工作,我会尝试提供更多帮助。【参考方案2】:

我认为您可以先将模型从 Blender 导出到 .obj,然后按照本教程的其余部分来获得正确的 .json 模型。http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html

【讨论】:

我想在不安装 Python 的情况下运行脚本 如果你不想安装 Python,你应该尝试它的便携版本(我正在使用这个版本)。 Download page【参考方案3】:

看看我做的例子。

https://github.com/master-atul/blender3js

你可以在这里看到工作示例:

http://www.atulr.com/blender3js

您可以从我的 repo 链接中查看我的代码。

如果您想知道我使用的导出选项:

我使用此处描述的选项直接从搅拌机导出了动画和所有内容。

https://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/

希望这会有所帮助 干杯:)

【讨论】:

这与纹理有什么关系?他的问题是关于导出带有纹理的模型。

以上是关于THREE.JS 从搅拌机中导出 JSON 模型(包括纹理)的主要内容,如果未能解决你的问题,请参考以下文章

为three.js导出json的搅拌机

如何对从搅拌机导出的动画 js 模型进行纹理处理? [三.js]

第一步是 THREE.js:尝试将搅拌机模型添加到场景中的问题

如何在 Three.js 中处理动画模型?

GLTF 模型在three.js 中旋转时变形

如何将 ms3d 模型转换为 three.js?