使用three.js可以方便的让我们在网页中做出各种不同的3D效果。如果希望2D绘图内容，建议使用canvas来进行。但很多小伙伴不清楚到底如何为我们绘制和导入的图形添加阴影效果，更是不清楚到底如何导入我们已经制作好的3dmax资源。所以这篇教程将简要介绍如何将我们用3dmax制作好的资源导入进来，以及如何为我们导入的资源，包括所有自己绘制的图形添加阴影。也有很多小伙伴表示根本记不住这些八股文一般的代码。其实，每次需要编写代码的时候参考官方案例即可，不必背诵代码。如果编的多，那自然就记住了。如果编的少，我们也没有必要付出大把时间背诵这些我们很少使用的代码。
首先，先介绍如何导入3dmax的资源。这里注意，经过我自己的测试，如果直接从本地打开文件的方式打开编写的网页，谷歌、IE等浏览器将无法显示我们自己加载的资源，原因是由于本地打开文件后是file协议，所以浏览器会因为安全性问题阻止我们加载本地资源。而火狐浏览器却可以正常打开。所以建议大家调试时使用火狐浏览器，或者使用tomcat、apache等先建立一个本地服务器，通过域名来访问自己编写的网页。不推荐修改浏览器的安全性设置。
我们先用3dmax制作一个图形，这里选择其自带的茶壶。用3dmax制作茶壶的教程网上实在太多，所以这里不再赘述，请不会的小伙伴搜索教程即可，几步即可搞定。
当然，制作好了之后不要忘记导出。我们需要将其导出成为一个mtl文件和一个obj文件。这一步操作大多制作茶壶的教程也都有，同样是点点鼠标就行。至于材质等，我们这里不多考虑，毕竟学习要从简单开始。
导出如上图的两个文件之后，我们就可以参考官方的代码导入我们自己的素材了。
首先，我们除了three.js文件之外，还需要引入个三源文件。一个是OBJLoader.js，一个是MTLLoader.js,一个是DDSLoader.js。这些是官方提供的加载我们本地资源的库文件，可以从官网下载。https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.html 这个网址既是官方案例。我们需要的文件也可以在这里下载到。
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26
学习是年轻人改变自己的最好方式