threejs 模板参数关联和包围框

threejs 模板参数关联和包围框

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

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

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

• 参数面板到模型的更新

来看下关键代码

/* 控制器 */ function initControls() { controls = new THREE.OrbitControls(camera, renderer.domElement); /* 属性参数默认 */ } /* 调试插件 */ function initGui() {guiControls = new function () { up = true; ation = false; this.scale = 1; ateX = ateY = ateZ = anslateX = anslateY = anslateZ = 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, zcontrols.add(guiControls, 'translateX', 0, 1000).onChange(function (e) { anslateX(e); }); controls.add(guiControls, 'translateY', 0, 1000).onChange(function (e) { anslateY(e); }); controls.add(guiControls, 'translateZ', 0, 1000).onChange(function (e) { anslateZ(e); }); // rotate x, y, zcontrols.add(guiControls, 'rotateX', 0, 360).onChange(function (e) { ateX(e); }); controls.add(guiControls, 'rotateY', 0, 360).onChange(function (e) { ateY(e); }); controls.add(guiControls, 'rotateZ', 0, 360).onChange(function (e) { ateZ(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 boxscene.add(helper);// If you just want the numbers//console.log(helper.box.min);//console.log(helper.box.max);} );//加载.obj文件，执行obj函数});//加载.mtl文件，执行mtl函数