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 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
PHP生成压缩文件实例
2015/02/07 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
什么造成了Java里面的异常
2016/04/24 面试题
会计职业生涯规划范文
2014/01/04 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
工程承包协议书
2014/10/20 职场文书
2014年团总支工作总结
2014/11/21 职场文书
离职告别感言
2015/08/04 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Python list列表删除元素的4种方法
2021/11/01 Python
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫