模板参数关联部分,主要是希望用户拖动模板参数,对象模型实现相应的更新。至于包围框,一般二位绘图用的比较多,因为对边界,距离比较敏感,或者需要兼容同类型产品的数据,需要比较模型的位置信息、大小信息。比如二位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函数