ITPub博客

首页 > 数据库 > 数据库开发技术 > 【04】three.js载入3D模型方式和help

【04】three.js载入3D模型方式和help

原创 数据库开发技术 作者:小南瓜开发平台 时间:2023-03-10 08:00:00 0 删除 编辑

前言   

        目前,3D模型的格式有成千上万种可供选择,但每一种格式都具有不同的目的、用途以及复杂性。虽然 three.js已经提供了多种导入工具, 但是选择正确的文件格式以及工作流程将可以节省很多时间,以及避免遭受很多挫折。某些格式难以使用,或者实时体验效率低下,或者目前尚未得到完全支持。

推荐的工作流程

        如果有可能的话,我们推荐使用glTF(gl传输格式)。.GLB和.GLTF是这种格式的这两种不同版本, 都可以被很好地支持。由于glTF这种格式是专注于在程序运行时呈现三维物体的,所以它的传输效率非常高,且加载速度非常快。        功能方面则包括了网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和摄像机。

        公共领域的glTF文件可以在网上找到,例如 Sketchfab,或者很多工具包含了glTF的导出功能:

  • Blender by the Blender Foundation

  • Substance Painter by Allegorithmic

  • Modo by Foundry

  • Toolbag by Marmoset

  • Houdini by SideFX

  • Cinema 4D by MAXON

  • COLLADA2GLTF by the Khronos Group

  • FBX2GLTF by Facebook

  • OBJ2GLTF by Analytical Graphics Inc

  • …and 还有更多

倘若你所喜欢的工具不支持glTF格式,请考虑向该工具的作者请求glTF导出功能, 或者在the glTF roadmap thread贴出你的想法。

当glTF不可用的时候,诸如FBX、OBJ或者COLLADA等等其它广受欢迎的格式在Three.js中也是可以使用、并且定期维护的。

加载

        在three.js中只会内置一部分加载器(例如:ObjectLoader) —— 其它的需要在你的应用中单独引入。


import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';


        一旦你引入了一个加载器,你就已经准备好为场景添加模型了。不同加载器之间可能具有不同的语法 —— 当使用其它格式的时候请参阅该格式加载器的示例以及文档。对于glTF,使用全局script的用法类似:


const loader = new GLTFLoader();
loader.load( 'path/to/model.glb', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );


请参阅GLTFLoader documentation来深入了解详细信息。

故障排除

你花了几个小时亲手建了一个堪称杰作的模型,现在你把它给导入到网页中—— 哦,天呐~😭它导入以后完全失真了、材质贴图丢了、或者说整个模型完全丢失了!
接下来我们来按照下面的步骤排除故障:

  1. 在Javascript的Console中查找错误,并确定当你调用.load()的时候,使用了onError回调函数来输出结果。

  2. 请在其它的应用程序中查看3D模型。对于glTF格式的模型来说,可以直接在下面的应用程序中进行查看:three.js和 babylon.js。如果该模型能够在一个或者多个应用程序中正确地呈现,请点击这里向three.js提交Bug报告。如果模型不能在任意一个应用程序里显示,我们强烈鼓励你向我们提交Bug报告,并告知我们你的模型是使用哪一款应用程序创建的。

  3. 尝试将模型放大或缩小到原来的1000倍。许多模型的缩放比例各不相同,如果摄像机位于模型内,则大型模型将可能不会显示。

  4. 尝试添加一个光源并改变其位置。模型或许被隐藏在黑暗中。

  5. 在网络面板中查找失败的纹理贴图请求,比如说C:\\Path\To\Model\texture.jpg。载入贴图时,请使用相对于模型文件路径,例如 images/texture.jpg —— 这或许需要在文本编辑器中来对模型文件进行修改。

请求帮助

        如果你已经尝试经历了以上故障排除的过程,但是你的模型仍然无法工作,寻求正确的方法来获得帮助将使您更快地获得解决方案。您可以将您的问题发布到three.js forum, 同时,尽可能将你的模型(或者一个简单的、具有相同问题的模型)包含在你能够使用的任何格式中,为其他人提供足够的信息,以便快速重现这个问题 —— 最好是一个能够现场演示的Demo。


原文作者:小南瓜开发平台;如有侵权,请联系管理员删除。

请登录后发表评论 登录
全部评论

注册时间:2020-08-21

  • 博文量
    209
  • 访问量
    89526