Three.js加载外部模型的教程详解


Posted in Javascript onNovember 10, 2017

1.  首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中

2.  创建three.js核心对象

Scene(场景)

Camera(相机)

Light(光源)

Mesh(模型)

Renderer(渲染器)

最后一步就是渲染显示在我们的页面上了renderer.render(scene,camera)

3.  OBJ模型的导入

<script type="text/javascript" src="js/OBJLoader.js"></script>
 <script type="text/javascript" src="js/MTLLoader.js"></script>

Three.js加载外部模型的教程详解

4.  .JS模型的导入

首先我们需要将.OBJ模型的文件转换成.JS文件的模型

.obj格式转.js格式使用的是threejs.org官方提供的一个convert_obj_three.py的工具,这个工具的使用需要安装python环境

转换过程:

    将convert_obj_three.py和要转换的.obj文件和.mtl文件放在同一个目录下

Three.js加载外部模型的教程详解

打开cmd,切换到对应的目录下

python convert_obj_three.py -i infile.obj -o outfile.js [-t ascii|binary]

    可以得到两种编码方式的.js文件(二进制binary和ascii)

出现的问题,转换格式的问题:

   打开.obj文件,

Three.js加载外部模型的教程详解

将mtllib关键字后面改成 .mtl文件相对于.obj文件的路径

Three.js加载外部模型的教程详解

将文件中的这些?改成字母,乱码

Three.js加载外部模型的教程详解

.mtl文件中的newmtl 关联到.obj文件中

Three.js加载外部模型的教程详解

这是.obj文件中的

5.  准备导入

Ascii

Three.js加载外部模型的教程详解

Binary

需要导入

<script src="js/BinaryLoader.js"></script>

Three.js加载外部模型的教程详解

PS:three.js 外部模型加载json

用blender做模型可以直接导出json文件(导出插件可以从three.js包里找到)。从网上下载模型,网上的模型很多事3ds max做的,我就用3ds max把模型格式转换成obj,再导入blender处理好模型后导出json文件。

导出json文件时选项勾选如果选择了SCENE可连灯光一同导出加载时需要用ObjectLoader

var loader = new THREE.ObjectLoader(); 
loader.load('youscene1.json',function(obj){ 
  obj.scale.x = obj.scale.y = obj.scale.z =100; 
  scene.add(obj); 
});

导出json文件时如果不勾选scene,需要页面中添加灯光否则模型全黑,加载时用JSONLoader

var loader = new THREE.JSONLoader(); 
      loader.load( "noscene.json",function( geometry, materials ) { 
        materials[ 0 ].shading = THREE.FlatShading; 
        mesh = new THREE.Mesh( geometry, new THREE.MultiMaterial( materials ) ); 
        mesh.position.x = 0; 
        mesh.position.y = 0; 
        mesh.position.z = 0; 
        mesh.scale.x = mesh.scale.y = mesh.scale.z =100; 
        scene.add( mesh ); 
      });

总结

以上所述是小编给大家介绍的Three.js加载外部模型的教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
javascript实现计算器功能详解流程
Nov 01 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 #Javascript
three.js加载obj模型的实例代码
Nov 10 #Javascript
vue router-link传参以及参数的使用实例
Nov 10 #Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 #Javascript
js+html获取系统当前时间
Nov 10 #Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 #Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 #Javascript
You might like
php4的彩蛋
2006/10/09 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
PHP获取url的函数代码
2011/08/02 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Python3+Appium安装使用教程
2019/07/05 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
工作保证书范文
2014/04/29 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
岗位聘任协议书
2015/09/21 职场文书
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电