HTML5技术

Three.js外部模型加载 - CQ-engineer

字号+ 作者:H5之家 来源:H5之家 2016-12-13 10:00 我要评论( )

1. 首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 2. 创建three.js核心对象 Scene(场景) Camera(相机) Light(光源) Mesh(模型) Renderer(渲染器

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)

5.  准备导入

Ascii

Binary

需要导入

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

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Three.js 入门指南(核心对象) - CQ-engineer

    Three.js 入门指南(核心对象) - CQ-engineer

    2016-12-13 08:24

  • AlloyTouch与three.js 3D模型交互 - 【当耐特】

    AlloyTouch与three.js 3D模型交互 - 【当耐特】

    2016-12-08 10:00

  • Three.js制作360度全景图 - 九成

    Three.js制作360度全景图 - 九成

    2016-12-01 16:00

  • THREE.js 学习笔记(一) - jerrylsxu

    THREE.js 学习笔记(一) - jerrylsxu

    2016-06-03 16:00

网友点评
c