Итак, у меня есть несколько точек, которые создают многоугольник. Я рассчитал центральную точку многоугольника и использовал ее для создания размерных линий для каждой стороны многоугольника. Моя проблема в том, что некоторые размерные линии не перемещаются в новую позицию, которую я рассчитал. Чтобы лучше рассмотреть, вот изображение того, что у меня есть и что я хочу, чтобы произошло.
Что у меня есть:
Чего я хочу достичь: я добавил красный кружок к проблеме, которая у меня есть, должна переместиться в новую точку - синие линии.
Вот фрагмент кода:
var viewHeight = window.innerHeight / 2;
var viewWidth = window.innerWidth / 2;
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera(
viewWidth / - 2, viewWidth / 2, viewHeight / 2, viewHeight / - 2, 1, 1000);
camera.translateZ(15);
camera.updateProjectionMatrix();
scene.add(camera);
var points = [
{
start: {x: -99.74425000000002, y: 68.61000000000001},
end: {x: -99.74425000000002, y: -37.87599999999999}
},
{
start: {x: -99.74425000000002, y: -37.87599999999999},
end: {x: 69.22574999999995, y: -37.87599999999999}
},
{
start: {x: 69.22574999999995, y: -37.87599999999999},
end: {x: 69.22574999999995, y: -1.2999999999999832}
},
{
start: {x: 69.22574999999995, y: -1.2999999999999832},
end: {x: 120.02574999999996, y: -1.2999999999999827}
},
{
start: {x: 120.02574999999996, y: -1.2999999999999827},
end: {x: 120.02574999999996, y: 68.61000000000001}
},
{
start: {x: 120.02574999999996, y: 68.61000000000001},
end: {x: -99.74425000000002, y: 68.61000000000001}
}
];
var vertices = [];
for (var i in points) {
var line = points[i];
vertices.push(new THREE.Vector2(line.start.x, line.start.y));
};
// build floor
var floor = buildFloor(vertices);
scene.add(floor);
// get center point of floor
var center = findCentroid(vertices);
// build dimension lines
for (var i in points) {
var line = points[i];
var lineCenterPoint = findLineCenterPoint(line.start, line.end);
var degrees = getAngle(center.x, center.y, lineCenterPoint.x, lineCenterPoint.y);
var radians = degrees * Math.PI / 180;
var startX = line.start.x;
var startY = line.start.y;
var endX = line.end.x;
var endY = line.end.y;
if (startY == endY) {
// horizontal
// move point y outward to a new point
var newY = startY + Math.sin(radians) * 20;
startY = newY;
endY = newY;
} else if (startX == endX) {
// vertical
// move point x outward to a new point
var x = startX + Math.cos(radians) * 20;
startX = x;
endX = x;
} else {
// todo diagonal lines
// don't know what should be the formula for this
}
var from = new THREE.Vector3(startX, startY, 0);
var to = new THREE.Vector3(endX, endY, 0);
var direction = to.clone().sub(from);
var length = direction.length();
var hex = 0x0;
var arrorGroupHelper = new THREE.Group();
arrorGroupHelper.add(new THREE.ArrowHelper(direction.normalize(), from, length, hex, 1, 10));
arrorGroupHelper.add(new THREE.ArrowHelper(direction.negate(), to, length, hex, 1, 10));
scene.add(arrorGroupHelper);
var text = document.createElement('div');
text.style.position = 'absolute';
text.style.zIndex = 5;
text.style.backgroundColor = "ffffff";
text.innerHTML = length.toFixed(2);
let interiorCenter = to.clone().add(from).multiplyScalar(0.5);
let textPos = interiorCenter.project( camera );
var widthHalf = viewWidth;
var heightHalf = viewHeight;
var style = 'translate(-50%,-50%) translate(' + ( textPos.x * widthHalf + widthHalf ) + 'px,' + ( - textPos.y * heightHalf + heightHalf ) + 'px)';
text.style.transform = style;
document.getElementById('container').append(text);
}
var threejsCanvas = document.getElementById('threejs-canvas');
var renderer = new THREE.WebGLRenderer({
canvas : threejsCanvas,
alpha : true
});
renderer.autoClear = false;
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.render( scene, camera );
animate();
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
var width = window.innerWidth / 2;
var height = window.innerHeight / 2;
camera.left = -width / 2;
camera.right = width / 2
camera.top = height / 2;
camera.bottom = -height / 2;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.clear();
renderer.render( scene, camera );
}
function findLineCenterPoint(a, b) {
return { x: (b.x - a.x) / 2 + a.x, y: (b.y - a.y) / 2 + a.y };
}
function findCentroid (arr) {
var minX, maxX, minY, maxY;
for (var i = 0; i < arr.length; i++)
{
var x = arr[i]['x'], y = arr[i]['y'];
minX = (x < minX || minX == null) ? x : minX;
maxX = (x > maxX || maxX == null) ? x : maxX;
minY = (y < minY || minY == null) ? y : minY;
maxY = (y > maxY || maxY == null) ? y : maxY;
}
return {x:(minX + maxX) / 2, y:(minY + maxY) / 2};
}
function buildFloor(vertices) {
var material = new THREE.MeshBasicMaterial({
color: 0xcccccc,
});
var shape = new THREE.Shape(vertices);
var geometry = new THREE.ShapeGeometry(shape);
var floor = new THREE.Mesh(geometry, material);
return floor;
}
function getAngle(originX, originY, targetX, targetY) {
var dx = originX - targetX;
var dy = originY - targetY;
var theta = Math.atan2(-dy, -dx);
theta *= 180 / Math.PI;
if (theta < 0) theta += 360;
return theta;
}
#container {
position: relative;
}
#threejs-canvas {
position:absolute;
z-index: 2;
}
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<div id="container">
<canvas id="threejs-canvas"></canvas>
</div>
Вот мой вопрос:
- Как переместить размерные линии, обведенные красным на изображении выше, к новые точки, которые синие линии.
Спасибо. Надеюсь, что кто-то может пролить свет на это.