【ThreeJS基础教程-高级几何体篇】2.2 加载模型,加载模型时的常见错误

加载模型,加载模型时的常见错误

  • 学习ThreeJS的捷径
  • 关于加载模型篇的一些建议
  • 加载OBJ格式模型
    • 案例分析
  • 模型加载时的常见错误
    • 模型文件数据错误
    • 路径错误
    • 没有报错的情况下,我们看不到模型怎么办
    • 经过上述检查后,模型数据正常,我们看不到怎么办
    • 做了上述操作我们依然看不到模型
  • 一些碎碎念
  • 常见的建模验收标准
  • 下一篇预告:多模型加载管理器

学习ThreeJS的捷径

本段内容会写在0篇以外所有的,本人所编写的Threejs教程中

对,学习ThreeJS有捷径
当你有哪个函数不懂的时候,第一时间去翻一翻文档
当你有哪个效果不会做的时候,第一时间去翻一翻所有的案例,也许就能找到你想要的效果
最重要的一点,就是,绝对不要怕问问题,越怕找找别人问题,你的问题就会被拖的越久

如果你确定要走WebGL/ThreeJS的开发者路线的话,以下行为可以让你更快的学习ThreeJS

  1. 没事就把所有的文档翻一遍,哪怕看不懂,也要留个印象,至少要知道Threejs有什么
  2. 没事多看看案例效果,当你记忆的案例效果足够多时,下次再遇到相似问题时,你就有可能第一时间来找对应的案例,能更快解决你自己的问题
  3. 上述案例不只是官网的案例,郭隆邦技术博客,跃焱邵隼,暮志未晚等站点均有不少优质案例,记得一并收藏
    http://www.yanhuangxueyuan.com/ 郭隆邦技术博客
    https://www.wellyyss.cn/ 跃焱邵隼
    http://www.wjceo.com/ 暮志未晚
    这三个站点是我最常逛的站点,推荐各位有事没事逛一下,看看他们的案例和写法思路,绝对没坏处

关于加载模型篇的一些建议

本篇中将主要介绍如何加载模型,会使用到模型界中最通用的模型格式OBJ格式,但是OBJ格式并非我们实际开发中使用的理想格式,在下一篇中,我们会着重讲解GL格式的加载与获取方式,本篇的重点在于加载模型以及加载模型后的接下来一系列操作

加载OBJ格式模型

案例代码

案例效果

【ThreeJS基础教程-高级几何体篇】2.2 加载模型,加载模型时的常见错误

这里我们使用的文件在threejs开发包中:three.js-masterexamplesmodelsobjtree.obj

案例分析

引入我们的加载器,加载器一般都需要外部引入,如果是使用引入,需要从以下地址引入
three.js-master/examples/js/loaders/OBJLoader.js

接下来是声明我们的Loader

如果你使用引入则需要加上THREE前缀

构造器:new OBJLoader( manager );
manager:加载管理器,这个在后面的教程中会着重讲解,这里我们不需要填充它

接下来进入我们的加载过程,加载过程为异步,一定要搞清楚,这里是异步加载

如果你对异步函数使用比较熟悉的话,你还可以使用异步函数来让代码更具有逻辑性,本段代码仅供初期学习时参考使用

	//注意,Loader这个对象仅建议在全局上创建一个	let loader = new OBJLoader();	 function loadModel(path){return new Promise((resolve)=>{    loader.load(path,(obj)=>{ resolve(obj)    })})    }    async function addMesh(){let model = await loadModel("./tree.obj");console.来源:幻梦往昔
                                                        

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2022年9月19日
下一篇 2022年9月19日

相关推荐