一、由3D场景下的坐标点,来绘制一个原生 input 输入框:
static makeInput(point1, point2, type, axisDir, dir) {
if (!type || !axisDir || !dir) return;
const line3 = new THREE.Line3(point1, point2);
const distance = line3.distance();
const selected = StorageMgr.datas.SELECTED;
const centerPoint = type === 'size' ? line3.at(0.3) : line3.getCenter();
selected.object3d.parent.localToWorld(centerPoint);
const { top, left } = Compute.d3PosToScreenPos(centerPoint);
const input = globalThis.document && document.createElement('input');
const height = 1.25;
const width = Tools.setFixed(distance).toString().length / (distance.toString().includes('.') ? 1.8 : 1.5);
const isH = dir === 'left' || dir === 'right';
const isV = dir === 'top' || dir === 'bottom';
input.style.display = 'block';
input.style.position = 'fixed';
input.style.top = top + 'px';
input.style.left = left + 'px';
input.style.width = `${width}rem`;
input.style.height = `${height}rem`;
input.style.textAlign = "center";
input.style.borderRadius = "3px";
input.style.transform = `translateX(${isH ? '-50%' : '0.1rem'}) translateY(${isV ? '-50%' : '0.1rem'})`;
input.style.border = "unset";
input.style.background = "#ffffff00";
input.style.color = "#3d6cdc";
input.onclick = function (e) {
this.style.border = "1px solid black"
this.style.background = "white";
this.style.color = "black";
this.focus();
this.select();
};
input.onblur = function (e) {
this.style.border = "unset";
this.style.background = "#ffffff00";
this.style.color = "#3d6cdc";
this.blur();
};
input.type = "number";
input.className = "dimension-input";
input.onmousewheel = function (evt) {
evt = evt || window.event;
if (evt.preventDefault) {
evt.preventDefault();
evt.stopPropagation();
} else {
evt.cancelBubble = true;
evt.returnValue = false;
}
return false;
};
input.onkeydown = function (e) {
if (['ArrowUp', 'ArrowDown'].includes(e.key)) return false;
};
input.customPreValue = distance;
input.value = Tools.setFixed(distance);
input.onchange = function (e) {
this.blur();
if (['', ' '].includes(e.target.value)) return this.value = Tools.setFixed(this.customPreValue);
let value = Number(e.target.value);
if (type === 'position') value = this.customPreValue - value;
selected.onDimensionChange(type, axisDir, value);
this.customPreValue = value;
};
return input;
}
二、css 如下:
.dimension-input::-webkit-outer-spin-button,
.dimension-input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.dimension-input[type="number"]{
-moz-appearance: textfield;
}