3D库房搭建（附源码下载）如何用three.js搭建一个3D库房、3D密集架、3D档案室

本人是做信创档案的（就是国产电脑：统信，麒麟，中科方德系统可以使用的档案系统）

最近接到单位上的一个需求是要做3D库房，之前也没搞过，但是我知道有three.js可以实现，当时就直接答应下来了

具体需求有3D库房展示（需要和一楼的库房基本一致），温湿度控制，开架，合架，通风，休眠，解锁等。

废话不多说 先看个第一版的图片：

主要的代码

```//创建地板
  function createFloor(){
         var loader = new THREE.TextureLoader();
         loader.load("./ThreeJs/images/OutsideFloor.png",function(texture){
             texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
             texture.repeat.set( 10, 10 );
             var floorGeometry = new THREE.BoxGeometry(2600, 1400, 1);
             var floorMaterial = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide } );
             var floor = new THREE.Mesh(floorGeometry, floorMaterial);
             floor.position.y = -0.5;
             floor.rotation.x = Math.PI / 2;
             floor.name = "地面";
             scene.add(floor);
         });
     }

//创建墙
//width, height, depth这三个参数定义了长方体的长宽高，angle定义了长方体旋转的角度
function createCubeWall(width, height, depth, angle, material, x, y, z, name){
	var cubeGeometry = new THREE.BoxGeometry(width, height, depth );
	var cube = new THREE.Mesh( cubeGeometry, material );
	cube.position.x = x;
	cube.position.y = y;
	cube.position.z = z;
	cube.rotation.y += angle*Math.PI;  //-逆时针旋转,+顺时针
	cube.name = name;
	scene.add(cube);
} 
//密集架创建
for (var i=16;i>0;i--)
{ 
	//createmijijia(100, 50, 100, 0, j*60, 0, 150, "密集架"+i);
	creategltf(100, 80, 100, 0, j*60, 0, 150, "密集架"+i,-1,"./glb_mijijia/Unity2GLTF.gltf");
	//creategltf(100, 50, 100, 0, j*60, 0, 150, "密集架"+i,0,"mijijia_door.gltf");
	j++;
}

2.开门关门

$("#label").text("开门");// 显示模型信息
new TWEEN.Tween(intersects[0].object.rotation).to({
	y: 0.5*Math.PI,x:0,z:0
}, 1000).onComplete(function(){
	//完成开门加载后执行事件
}).start();
door_state = true;

3.点击密集架事件

 在创建密集架时候加入判断 即可

if ( child.isMesh ) {
//child.material.envMap = envMap;
	child.material.emissive =  child.material.color;
	child.material.emissiveMap = child.material.map ;
}

给客户看了个初版 客户说太单调了，需要把空调 加湿器 桌子等加上去 马上安排

第二版

第二版加了个自动旋转功能，代码如下：

function animate() {
  if (znum == 1) {
     angle += 0.003;
     // 圆周运动网格模型x坐标计算  绕转半径400
     var x = 400 * Math.sin(angle) + 200;
     // 圆周运动网格模型y坐标计算  绕转半径400
     var z = 400 * Math.cos(angle) + 300;
     // 每次执行render函数，更新需要做圆周运动网格模型Mesh的位置属性
     controls.object.position.set(x, 2500, z);
   }
   requestAnimationFrame(animate);
   renderer.render(scene, camera);
   update();
 }

安装和使用：

• 如果你电脑安装了node.js
• 打开cmd
• 输入命令行npm install anywhere -g 这里是全局变量
• 找到要启动本地服务器的静态文件夹，执行命令：anywhere 它就会自动弹出你的项目页面
• 如下图
  
  如果不会使用node这种方式 直接用工具运行即可 比如：HBuilderX、VS Code等工具运行

第一版源码下载 地址：https://download.csdn.net/download/ACCPluzhiqi/37368360

第二版源码下载地址：
https://download.csdn.net/download/ACCPluzhiqi/37368444

还有第三版 第四版，因为加入了复杂的逻辑 给你们估计也运行不了
如果有定制的3D库房，3D仓库，密集架 的可以联系我
不明白的也可以加我扣扣
扣扣：7332706