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

1. 主角是一个JSON

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

var doorArray = [ [94, 10, -176, 196, false], [94, 10, -76, 196, false], [94, 10, 76, 196, false], [94, 10, 176, 196, false], [46, 15, 0, 186, false], [46, 60, 0, 147, false], [46, 21, 0, 105.5, true], [46, 10, 0, 89, true], [46, 10, 0, 78, true], [46, 20, 0, 62, true], [46, 20, 0, 41, true], [46, 20, 0, 20, true]]

他是以一个数组的形式表现的，每一个数组代表一个柜子数据，每一个数组中的第一项为当前柜子宽度，第二项为高度，第三项为中心x位置，第四项而中心y位置，第五项为柜子是否能打开（因为有的地方为操作面板等）。

2. ThreeBSP绘制柜子的整体架构。

说完核心，我们在看看柜子的整体框架。下面是柜子的侧面图，通过侧面图我们可以很清晰的看出我们做了什么

其实加的不多，就是在上面加了一个檐，下面加了两个底座，还有就是在每个小快递柜中掏出一个洞。
我们看代码

var texture = new THREE.TextureLoader().load('/static/images/base/cabinet.jpg')let pubMate = new THREE.MeshNormalMaterial();let frameGeom = new THREE.BoxGeometry(450, 200, 50);let frameMesh = new THREE.Mesh(frameGeom, pubMate);frameMesh.position.y = 106;let footShape = new THREE.Shape();footShape.moveTo(0, 2);footShape.lineTo(8, -2);footShape.lineTo(8, -4);footShape.lineTo(0, -4);footShape.lineTo(0, 0);footShape.lineTo(-12, 0);footShape.lineTo(-12, 2);footShape.lineTo(0, 2);let footExtrudeSettings = { steps: 5, depth: 450, bevelEnabled: false};let footGeom = new THREE.ExtrudeGeometry(footShape, footExtrudeSettings);let footMesh = new THREE.Mesh(footGeom, pubMate);let footMesh2 = footMesh.clone();footMesh2.rotation.y = -Math.PI / 2;footMesh2.position.x = 225;footMesh2.position.y = 4;footMesh2.position.z = 25;let footMesh3 = footMesh.clone();footMesh3.rotation.y = Math.PI / 2;footMesh3.position.x = -225;footMesh3.position.y = 4;footMesh3.position.z = -25;let headGeom = new THREE.BoxGeometry(450, 5, 20);let headMesh = new THREE.Mesh(headGeom, pubMate);headMesh.position.z = 23;headMesh.position.y = 206 - 2.5;let framebsp = new ThreeBSP(frameMesh);let foot1bsp = new ThreeBSP(footMesh2);let foot2bsp = new ThreeBSP(footMesh3);let headbsp = new ThreeBSP(headMesh);res = framebsp.union(foot1bsp).union(foot2bsp).union(headbsp);for(var i=0; i<doorArray.length; i++) { let geom = new THREE.BoxGeometry(doorArray[i][0]-1, doorArray[i][1]-1, 50); let mesh = new THREE.Mesh(geom, pubMate); mesh.position.set(doorArray[i][2], doorArray[i][3], 4) let meshbsp = new ThreeBSP(mesh); res = res.subtract(meshbsp);}let cabinetGeom = res.toGeometry();let cabinetMate = new THREE.MeshPhongMaterial({color: 0xD8C513, specular: 0xD8C513, shininess: 10});let cabinetMesh = new THREE.Mesh(cabinetGeom, cabinetMate);cabinetMesh.position.y = 106;scene.add(cabinetMesh);

这里就是在框架BoxGeometry的基础上加了两个底座ExtrudeGeometry，和一个檐BoxGeometry，然后遍历减去小柜子。掌握好各自的空间位置，制作其实并不难。

3. 柜子的统一贴图

将一张图作为贴图，贴到所有的mesh上，如最上面图的效果，因为上节课已经大致的说了关于uv的一点知识。

for(var i=0; i<doorArray.length; i++) { let a0 = doorArray[i][0]; let a1 = doorArray[i][1]; let a2 = doorArray[i][2]; let a3 = doorArray[i][3]; let x1 = ((a2 - a0 / 2) + 223) / 446; let x2 = ((a2 + a0 / 2) + 223) / 446; let y1 = ((a3 - a1 / 2) - 10) / 191; let y2 = ((a3 + a1 / 2) - 10) / 191; doorMesh.geometry.faceVertexUvs[0][8] = [new THREE.Vector2(x1, y2), new THREE.Vector2(x1, y1), new THREE.Vector2(x2, y2)]; doorMesh.geometry.faceVertexUvs[0][9] = [new THREE.Vector2(x1, y1), new THREE.Vector2(x2, y1), new THREE.Vector2(x2, y2)];}

上面已经说过，这里的a0是柜子的宽，a1是柜子的高，a2是柜子中心x的坐标值，a3是柜子中心y的坐标值。因为柜子整体x的范围是[-223, 223]，y的范围的[10, 201]。经过换算x1是纹理x坐标的最小值，x2是纹理x坐标的最大值，y1是纹理y坐标的最小值，y2是纹理y坐标的最大值，最后设置数组索引为8和9小三角面的uv映射（因为我们要设置的面为长方体的左面，就是8和9控制的面）。

最后加上一点点开柜子的动画就大功告成了。

关于three.js利用uv和ThreeBSP制作一个快递柜功能的案例分析就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。