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 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
javascript常用的设计模式
Feb 09 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 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
一个php作的文本留言本的例子(四)
2006/10/09 PHP
php获得当前的脚本网址
2007/12/10 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
深入php数据采集的详解
2013/06/02 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python切片索引用法示例
2018/05/15 Python
python实现ID3决策树算法
2018/08/29 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
程序员跳槽必看面试题总结
2013/06/28 面试题
一名老师的自我评价
2014/02/07 职场文书
个人作风建设心得体会
2014/10/22 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
阿里云日志过滤器配置日志服务
2022/04/09 Servers