three.js 利用利用uv和和ThreeBSP制作一个快递柜功能 制作一个快递柜功能 主要介绍了three.js 利用uv和ThreeBSP制作一个快递柜,本文通过实例代码给大家介绍的非常详细，对大家的学 习或工作具有一定的参考借鉴价值，需要的朋友可以参考下 最近有three网友，问我要不要学习blender，其实我感觉学习一下也无妨，不过花大量时间精通，尚可不必，术业有专攻给别 人留一条路吧，哈哈。那我我们就是用ThreeBSP和uv贴图的知识来制作一个定制化的快递柜，先上图，在线案例请点击博客 原文。 下面我们来讲解一下这样一个柜子的制作。 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 footMesh1 = footMesh.clone(); footMesh1.rotation.y = -Math.PI / 2; footMesh1.position.x = 225; footMesh1.position.y = 4; footMesh1.position.z = 25; let footMesh2 = footMesh.clone(); footMesh2.rotation.y = Math.PI / 2; footMesh2.position.x = -225; 

footMesh2.position.y = 4; footMesh2.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(footMesh1); let foot2bsp = new ThreeBSP(footMesh2); let headbsp = new ThreeBSP(headMesh); res = framebsp.union(foot1bsp).union(foot2bsp).union(headbsp); for(var i=0; i