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>

4.  .JS模型的导入

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

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

转换过程:

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

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

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

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

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

   打开.obj文件,

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

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

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

这是.obj文件中的

5.  准备导入

Ascii

Binary

需要导入

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

Three.js外部模型加载的更多相关文章

  1. js 外部文件加载处理

    概述 前端在日常工作中很大一部分时间是在思考页面的优化方案,让页面载入得更快.鉴于javascript是单线程的事件驱动语言,优化工作之一就是:控制图片.swf.iframe等大流量文件以及js和cs ...

  2. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  3. 关于js css html加载顺序整理

    1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正常的网页加载流程是这样的. 浏览器一边下载HTML网页,一 ...

  4. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

  5. 关于html,css,js三者的加载顺序问题

    <head lang="en"> <meta charset="utf-8"> <title></title> ...

  6. js的异步加载你真的懂吗

    面试高频之js的异步加载 讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经历了什么 ?  1  ,  创建document对象, 开始解析页面,    ...

  7. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  8. 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

    来自   https://blog.csdn.net/u011088260/article/details/79563315   最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...

  9. js怎么动态加载js文件(JavaScript性能优化篇)

    下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...

随机推荐

  1. @OutputCache 详解-文章目录

    OutputCache概念学习 OutputCache属性详解(一)一Duration.VaryByParam OutputCache属性详解(二)一 Location OutputCache属性详解 ...

  2. mfc的OnInitDialog的返回值

    以前从未注意过初始化函数的返回值,今天看到书中所述,以后可能用得上. OnInitDialog的返回值告诉windows如何处置输入焦点,如果返回 TRUE,则windows将输入焦点指派给制表键控制 ...

  3. Nhibernate 4.0 教程入门

    Nhibernate 4.0 教程 目录 1.      下载Nhibernate 4.04. 1 2.      入门教程... 2 3.      测试项目详解... 3 4.      总结.. ...

  4. JS原生基础终结篇 (帅哥)

    闭包 基础    面向对象基础 1.1 闭包 在程序语言中,所谓闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落.这些外部执行域的非 ...

  5. ASP.NET MVC5 网站开发实践(一) - 框架(续) 模型、数据存储、业务逻辑

    上次搭建好了项目框架,但还是觉得不太对劲,后来才想起来没有对开发目标进行定位,这个小demo虽然不用做需求分析,但是要实现什么效果还得明确.后来想了一下就做个最简单的网站,目标定为小公司进行展示用的网 ...

  6. Web APi 2.0优点和特点?在Web APi中如何启动Session状态?

    前言 曾几何时,微软基于Web服务技术给出最流行的基于XML且以扩展名为.asmx结尾的Web Service,此服务在.NET Framework中风靡一时同时也被.NET业界同仁所青睐,几年后在此 ...

  7. ViewPager+RadioGroup实现标题栏切换,Fragment切换

    1.说明: 在使用RadioGroup做标题栏切换的时候,跟ViewPager的滑动有冲突,最后查看了源码+断点调试解决了一些碰到的问题,写一篇博客总结一下,有同样需求的朋友可以借鉴一下,自己以后有用 ...

  8. BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习js更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确, ...

  9. 利用Dockerfile构建一个基于centos 7,包括java 8, tomcat 7,php ,mysql+mycat的镜像

    Dockerfile内容如下: FROM centos MAINTAINER Victor ivictor@foxmail.com WORKDIR /root RUN rm -f /etc/yum.r ...

  10. GROUP函数-GROUP_ID,GROUPING,GROUPING_ID

    GROUP_ID 首先我们看看官方的解释: 大意是GROUP_ID用于区分相同分组标准的分组统计结果. 解释起来比较抽象,下面我们来看看具体的案例. 例1:单一分组 SQL> select gr ...