Three.js外部模型加载
来源：博客园
首先我们要在官网:
下载我们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.
准备导入AsciiBinary需要导入&script src="js/BinaryLoader.js"&&/script&
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中，以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件，需要结合OBJLoader和MTLLoader两个类来实现，这也提供了操作的灵活性。下述代码中首先使用MTLLoader加载egg.mtl材料文件，然后把该材料设置给一个OBJLoader对象，以便在加载obj模型的时候进行应用。onProgress是加载过程回调函数，onError是错误处理函数。//&model
var&onProgress&=&function(xhr)&{
&&&&if&(xhr.lengthComputable)&{
&&&&&&&&var&percentComplete&=&xhr.loaded&/&xhr.total&*&100;
&&&&&&&&console.log(Math.round(percentComplete,&2)&+&'%&downloaded');
var&onError&=&function(xhr)&{};
THREE.Loader.Handlers.add(/\.dds$/i,&new&THREE.DDSLoader());
var&mtlLoader&=&new&THREE.MTLLoader();
mtlLoader.setPath('/uploads/160601/obj/');
mtlLoader.load('egg.mtl',&function(materials)&{
&&&&materials.preload();
&&&&var&objLoader&=&new&THREE.OBJLoader();
&&&&objLoader.setMaterials(materials);
&&&&objLoader.setPath('/uploads/160601/obj/');
&&&&objLoader.load('egg.obj',&function(object)&{
&&&&&&&&object.position.y&=&-0.5;
&&&&&&&&scene.add(object);
&&&&},&onProgress,&onError);
});在线演示实例：
随着HTML技术的发展，网页要解决的问题已经远不止是简单的文本信息，而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...Angular和React是主流的2个前端开发框架，但是严格来说两者并非对等的概念。Angular是一个基于MVC（或者MVVM）的框架，包含model（模型）/view（视图）/controll...内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...本站收录了多个算法可视化动画，如模拟鸟群运动：等等。这里面除...HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能，搞出来一些混合APP的解决方案。比如Apache的Cordova（也就是以前的PhoneGap），...进度条是基础的界面控件，可用于多种场合，比如任务完成进度，手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示：直观上，我们可以把该进度条控件分为2个部分，外部的边界用来表示固定的目标范围，里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下：.pb-scope全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图，你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...WebGL中使用纹理贴图来实现细腻的物体表面观感，其中一个重要的参数是纹理滤镜（Texture Filter）。这个参数用来处理当对象出现缩放时，纹理如何处理中间...之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果，但并非真正的3D场景，如果要加入用户交互，进行36...现在JS分成了两个分支，一部分在服务器端发展如NodeJS，一部分是传统的浏览器运行环境。有些插件在编写JS代码时，是针对Node编写的，所以直接在浏览器中使...静态布局（Static Layout）即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；对于移动设备，单独设计一个布...有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制，而其中图书的展示是最为简单的一种，无需复杂的建模过程，使用图片和CSS3的一些变换即可实现...我们需要在wow云开发平台支持sass/compass等预编译样式语言，为此我们首先尝试了scssphp扩展，但是在支持最新语法上，经常会出现异常。所以我们采用了代理的方式...three.js学习笔记 obj模型加载问题
three.js最新版本'75'相较以前使用的'71'版本obj模型加载的方法发生了变化。
& 移除了OBJMTLLoader.js,并将原来OBJLoader.js和MTLLoader.js加载方法loader.setCrossOrigin更改为loader.setPath。
& 所以再使用原来的加载方式：
var onProgress = function(xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
var onError = function(xhr) {};
var loader = new THREE.OBJMTLLoader();
loader.load('obj/test.obj', 'obj/test.mtl', function(object) {
scene.add(object);
}, onProgress, onError);
& 会产生如下错误：
&&loader.setCrossOrigin is not a function
& 需要将加载方式改为：
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
var onError = function ( xhr ) { };
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl( 'obj/' );
mtlLoader.setPath( 'obj/' );
mtlLoader.load( 'test.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'obj/' );
objLoader.load( 'test.obj', function ( object ) {
scene.add( object );
}, onProgress, onError );
转自：http://blog.csdn.net/u/article/details/
本文转载自 dragoo1的专栏 , 原文链接： , 转载请保留本声明！
每一个你不满意的现在，都有一个你没有努力的曾经。
Copyright (C) &&
&&Powered by&3dmax导出obj没有贴图该怎么解决
栏目: 3DSMAX教程 来源: 　
&　　解决3dmax导出three.js使用的obj格式文件时缺少贴图的问题，最近一直在研究使用three.js加载obj模型，遇到的很多问题，其中之一就是这个让人头大，模型/贴图/材质/渲染都没有问题，导出来的OBJ怎么就没有贴图了呢，经过一周折腾得到的答案，其实答案很简单，就是3dmax导出obj(含贴图)，是不支持插件渲染器下的材质，只支持3dmax本身自带的默认扫描线渲染器下的材质。
　　1、打开3dmax导入模型，按F10打开渲染设置，把渲染器改成默认扫描线渲染器，不要使用常用插件渲染器(如mental ray，v-ray)
　　2、然后按M键，打开材质球编辑器，材质球的材质必须使用3dmax自带材质下的标准材质(如果默认渲染不是插件渲染器，材质中也不会含有插件材质的选择项)
　　3、同样，材质下的贴图选择项，也须要选择贴图下的标准贴图，不能使用v-ray或其他插件贴图
　　4、这时候在默认扫描线渲染器和标准材质下的3D模型导出obj，保存时会弹出obj导出选择项，点击右边的材质导出，勾选使用材质路径，选择obj同目录文件夹内(ps：three.js加载obj时，要把导出的贴图放在obj文件夹外)，这时候打开导出的文件夹就发现有导出的贴图了
　　5、这时候用代码编辑器或记事本打开mtl文件，就会发现有贴图信息了
　　6、如果渲染器选择插件渲染器(mental ray，v-ray)材质，导出的obj格式文件都找不到贴图，mtl文件也不含有贴图信息
03-13 03-13 03-10 03-10 03-10 02-14 01-19 01-16