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 通用简单的table选项卡实现
May 07 Javascript
js中settimeout方法加参数
Feb 28 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
create-react-app构建项目慢的解决方法
Mar 14 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
video.js添加自定义组件的方法
Dec 09 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/11/25 PHP
php 远程关机操作的代码
2008/12/05 PHP
Symfony的安装和配置方法
2016/03/17 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
javascript Object与Function使用
2010/01/11 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python多线程编程方式分析示例详解
2013/12/06 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
python实现决策树分类算法
2017/12/21 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python 切分数组实例解析
2019/11/07 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
教师国庆节演讲稿范文2014
2014/09/21 职场文书
大学生在校表现评语
2014/12/31 职场文书
投标售后服务承诺书
2015/04/29 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
Pandas加速代码之避免使用for循环
2021/05/30 Python
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
Python实现仓库管理系统
2022/05/30 Python