threeJS开发day01-在画线的中间加上矩形

builder.signals.sceneChanged.add(function () { updateGeometry(); }); function updateGeometry() { var i, j, m, n, k = 0; for (i = 0 , m = scope.builder.drafts.length; i < m; i++) { for (j = 0 , n = scope.builder.drafts[i].points.length; j < n; j++) { var mesh=new THREE.Mesh(scope.geometry,scope.material); mesh.rotateX(-Math.PI*0.5); mesh.position.copy(scope.builder.drafts[i].points[j].point); scope.add(mesh); } for (j = 0 , n = scope.builder.drafts[i].lines.length; j < n; j++) { var p0=scope.builder.drafts[i].lines[j].p0.point.clone(); var p1=scope.builder.drafts[i].lines[j].p1.point.clone(); var a01 = p1.sub(p0) var distance=a01.length(); var geometrys= new THREE.BoxGeometry( 500, 900,2); var mesh=new THREE.Mesh(geometrys,scope.material); mesh.rotateX(-Math.PI*0.5); mesh.position.copy(a01.normalize().multiplyScalar(distance/2).add(p0)); scope.add(mesh); } } }

添加监听事件，页面改变时调用 当前草图下的点、线 1，点计算时需要克隆再进行 2，计算两点距离使用sub().length 3,设置位置为中间点 copy-设置方法 normalize-单位化向量，乘以距离的一半，再加上起始点 添加旋转后的代码： for (j = 0 , n = scope.builder.drafts[i].lines.length; j < n; j++) { var p0=scope.builder.drafts[i].lines[j].p0.point.clone(); var p1=scope.builder.drafts[i].lines[j].p1.point.clone(); //两个点之间的向量 var a01 = p1.sub(p0); var distance=a01.length(); var geometrys= new THREE.BoxGeometry( distance, 1, 300); var mesh=new THREE.Mesh(geometrys,scope.material); //x轴的向量 var xPoint=new THREE.Vector3(1,0,0); var angle=Math.acos(a01.clone().normalize().dot(xPoint)); if(a01.z>0) { angle=-angle; } mesh.rotateY(angle); mesh.position.copy(a01.normalize().multiplyScalar(distance/2).add(p0)); scope.add(mesh); } 求两条线的夹角： 向量a*向量b=模向量a*模向量b*cons角。 向量a*向量b=xa*xb+ya*yb+za*zb=>a.dot(b) 当向量ab单位化后：向量a*向量b=cons角。 角=acons(向量a*向量b),即角=acons(a.dot(b))(a,b为单位化后)