three.js利用紫外线和ThreeBSP制作一个快递柜功能的案例分析

这篇文章将为大家详细讲解有关three.js利用紫外线和ThreeBSP制作一个快递柜功能的案例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

1。主角是一个JSON

这样一个快递柜的核心是JSON数据的创建,有了JSON数据,我们就可以通过循环遍历出柜子,柜门和紫外线映射关系。那面下面来看看我们的JSON数据(部分代码)。

 
 
其实加的不多,就是在上面加了一个檐、下面加了两个底座,还有就是在每个小快递柜中掏出一个洞。
我们看代码
  var结构=new THREE.TextureLoader () .load(& # 39;/静态/图片/基地/cabinet.jpg& # 39;)
　　让pubMate=new THREE.MeshNormalMaterial ();
　　让frameGeom=new三人。BoxGeometry (450、200、50);
　　让frameMesh=new三人。网格(frameGeom pubMate);
　　frameMesh.position。y=106;
　　
　　让footShape=new THREE.Shape ();
　　footShape。函数(0,2);
　　footShape。画线(8、2);
　　footShape。画线(8,4);
　　footShape。画线(0,4);
　　footShape。画线(0,0);
　　footShape。画线(-12 0);
　　footShape。画线(-12 2);
　　footShape。画线(0,2);
　　
　　让footExtrudeSettings={
　　步骤:5
　　深度:450,
　　bevelEnabled:假
　　}；
　　让footGeom=new三人。ExtrudeGeometry (footShape footExtrudeSettings);
　　让footMesh=new三人。网格(footGeom pubMate);
　　让footMesh2=footMesh.clone ();
　　footMesh2.rotation。y=数学。π/2;
　　footMesh2.position。x=225;
　　footMesh2.position。y=4;
　　footMesh2.position。z=25;
　　让footMesh3=footMesh.clone ();
　　footMesh3.rotation。y=数学。π/2;
　　footMesh3.position。x=-225;
　　footMesh3.position。y=4;
　　footMesh3.position。z=-25;
　　
　　让headGeom=new三人。20 BoxGeometry (450 5);
　　让headMesh=new三人。网格(headGeom pubMate);
　　headMesh.position。z=23;
　　headMesh.position。y=206 - 2.5;
　　
　　让framebsp=new ThreeBSP (frameMesh);
　　让foot1bsp=new ThreeBSP (footMesh2);
　　让foot2bsp=new ThreeBSP (footMesh3);
　　让headbsp=new ThreeBSP (headMesh);
　　
　　res=framebsp.union (foot1bsp) .union (foot2bsp) .union (headbsp);
　　
　　(var=0;i 
这里就是在框架BoxGeometry的基础上加了两个底座ExtrudeGeometry,和一个檐BoxGeometry,然后遍历减去小柜子。掌握好各自的空间位置,制作其实并不难。
 
 3。柜子的统一贴图
 
将一张图作为贴图,贴到所有的网格上,如最上面图的效果,因为上节课已经大致的说了关于紫外线的一点知识。
 
three.js利用紫外线和ThreeBSP制作一个快递柜功能的案例分析