threejs 模板参数关联和包围框

模板参数关联部分，主要是希望用户拖动模板参数，对象模型实现相应的更新。至于包围框，一般二位绘图用的比较多，因为对边界，距离比较敏感，或者需要兼容同类型产品的数据，需要比较模型的位置信息、大小信息。比如二位CAD产品，国内的厂家可能希望兼容AutoDeskD的产品（毕竟人家在二位设计领域是全球第一），所以就需要比较细节的差异。

目前对threejs的应用场景和发展方向不是很清楚，所以先通过常见三维CAD软件的操作习惯开始，逐步探索通过threejs实现对三维模型的操作，场景从桌面设计软件到web上。

这一节主要是实现从模型控制三维模型的缩放、xyz轴三个方向上的旋转和平移。

• 参数面板到模型的更新

来看下关键代码

/* 控制器 */ 
		function initControls() { 
			controls = new THREE.OrbitControls(camera, renderer.domElement); 
			/* 属性参数默认 */ 
		} 
		/* 调试插件 */ 
		function initGui() {
			guiControls = new function () { 
				this.group = true; 
				this.rotation = false; 
				this.scale = 1; 
				this.rotateX = 0;
				this.rotateY = 0;
				this.rotateZ = 0;
				this.translateX = 0;
				this.translateY = 0;
				this.translateZ = 0;
			}; 
			let controls = new dat.GUI(); 
			controls.add(guiControls, 'scale', 0.1, 5).onChange(function (e) { 
				obj.scale.set(e, e, e); 
			}); 
			
			// position x, y, z
			controls.add(guiControls, 'translateX', 0, 1000).onChange(function (e) { 
				obj.translateX(e); 
			}); 
			controls.add(guiControls, 'translateY', 0, 1000).onChange(function (e) { 
				obj.translateY(e); 
			}); 
			controls.add(guiControls, 'translateZ', 0, 1000).onChange(function (e) { 
				obj.translateZ(e); 
			}); 
			
			// rotate x, y, z
			controls.add(guiControls, 'rotateX', 0, 360).onChange(function (e) { 
				obj.rotateX(e); 
			}); 
			controls.add(guiControls, 'rotateY', 0, 360).onChange(function (e) { 
				obj.rotateY(e); 
			}); 
			controls.add(guiControls, 'rotateZ', 0, 360).onChange(function (e) { 
				obj.rotateZ(e); 
			}); 
			
			
			controls.add(guiControls, 'group'); 
			controls.add(guiControls, 'rotation'); 
		}

有两个关键点，所有对模型的缩放，平移，旋转，同时需要更新模型和相机。

• 包围框

模型加载完成后，就可以绘制边框。还有另外一种方式，完成边框绘制，其实基本都是调用BoundingBoxHelper, 但小面的方法实现了类型转换，先将对象转到Box3类型，然后再计算包围框

var bbox = new THREE.Box3().setFromObject(node);
            var helper = new THREE.BoundingBoxHelper(bbox, 0xff0000);
            helper.update();
            // If you want a visible bounding box
            scene.add(helper);

obj = null;
        var mtlLoader = new THREE.MTLLoader();//mtl材质加载器
        mtlLoader.load( mtlPath, function(materialss){
            var objLoader = new THREE.OBJLoader();//obj模型加载器
            objLoader.setMaterials( materialss );//mtl材质赋值给obj模型
            objLoader.load( objPath, function(object3D){

                obj = object3D;
                // object3D.scale.set(100,100,100);//放大object3D对象
                scene.add( object3D );//object3D对象插入场景对象

                group.add( object3D );
				
				// 绘制箭头
				var arrow = new THREE.ArrowHelper (new THREE.Vector3(1, 0, 0), obj.position, 10, 0xFF0800);
				scene.add(arrow);
				
				// 绘制边框
				//var mesh = new THREE.Mesh(geom,material);
				//scene.add(mesh);
				//var edges = new THREE.EdgesHelper( object3D, 0x1535f7 );//设置边框，可以旋转
				//scene.add( edges );
				var helper = new THREE.BoundingBoxHelper(obj, 0xff0000);
				helper.update();
				// If you want a visible bounding box
				scene.add(helper);
				// If you just want the numbers
				//console.log(helper.box.min);
				//console.log(helper.box.max);


            } );//加载.obj文件，执行obj函数

        });//加载.mtl文件，执行mtl函数