使用three.js加载3dmax资源，以及实现场景中的阴影效果

看见就非常 2020-01-19

展开全文

使用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 这个网址既是官方案例。我们需要的文件也可以在这里下载到。

以下代码便是将素材导入的代码，我们除了像官方那样导入文件之外，还加入了阴影效果。

 1 var onError = function ( xhr ) { };
 2                 THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
 3                 var mtlLoader = new THREE.MTLLoader();
 4                 mtlLoader.setPath( './' );       //设置我们需要加载的mtl文件路径
 5                 mtlLoader.load( 'lyn.mtl', function( material ) {      //这里加载我们需要的文件名  
 6                     material.preload();
 7                     var objLoader = new THREE.OBJLoader();
 8                     objLoader.setMaterials( material );      //材质，也可自定义
 9                     objLoader.setPath( './' );               //设置要加载的obj文件的路径
10                     objLoader.load( 'lyn.obj', function ( object ) {           //加载obj文件
11                         object.position.z = 1;         //这里设置我们的素材相对于原来的大小以及旋转缩放等
12                         object.position.y = -0.5;
13                         object.scale.x = 0.2;
14                         object.scale.y = 0.2;
15                         object.scale.z = 0.2;
16                         object1 = object;               //这里是对素材设置阴影的操作
17                         for(var k in object.children){  //由于我们的素材并不是看上去的一个整体，所以需要进行迭代
18                                                         //对其中的所有孩子都设置接收阴影以及投射阴影
19                                                         //才能看到阴影效果
20                             object.children[k].castShadow = true;   //设置该对象可以产生阴影
21                             object.children[k].receiveShadow = true;  //设置该对象可以接收阴影
22                         }
23                         scene.add( object1 );
24                         
25                     }, onProgress, onError );
26                 });

上述的代码除了设置阴影以及调整大小之外，都是八股文，需要的时候复制粘贴即可，如果经常从事这方面开发，才建议检查源代码的实现。有时我们会发现，即便导入后，我们也无法看到素材。我们需要考虑以下几方面问题。第一方面，我们是否将我们的3dmax素材做的太大或者太小。太大的话，我们只能看到素材的一部分，造成一种看不到的假象。太小，又会看不清楚或者无法显示。这种问题就需要各位根据我们摄像机的视距等来调整了。还有一种问题，就是由于我们没有为我们的素材设置材质，而且我们的代码中没有添加光源，导致只显示黑漆漆的一片。所以，如果要看到这个素材，我们还需要添加光照。

以下是添加聚光灯光源的代码，因为聚光灯光源可以聚焦，我们演示会方便一些。小伙伴们也可以自己动手尝试其他光源。记住，我们需要的是点光源或者平行光等光源。环境光是无法生成阴影的。但如果希望周围显示的更加清楚，我们也可以同时添加点光源和环境光，只是环境光的光强需要弱一些，避免环境光过强影响阴影的正常显示。

function SpotLight(){
                light = new THREE.SpotLight( '#ffffff' ,1);
                light.castShadow = true;
                light.distance = 50; 
                light.angle = 0.6; 
                light.decay = 2;
                light.penumbra = 0.2;          
                light.position.set( 3, 2, 1 );
                light.shadow.camera.near = 1;
                light.shadow.camera.far = 3;
                light.shadow.camera.visible = true;            
                light.shadow.mapSize.width = 1024;
                light.shadow.mapSize.height = 1024;                                    
                light.target = sp;
                scene.add(light);
            }

我们还需要一个地板，将阴影投射到我们的地板上，这样才能看到阴影。而之前我们讲到过receiveShadow这个属性。假设我们创建了一个添加了材质的图形sp。我们需要使用sp.receiveShadow=true来让其可以接收阴影。如果设置为false，会出现什么情况呢？