Three.js，缩放对象时发生意外的位置偏移
我正在尝试创建缩放框，到目前为止，我成功地将光标位置从区域坐标转换为世界坐标，并使用正确的uvs在光标周围创建了一个框对象。
这是我尝试的难点：https://jsfiddle.net/2ynfedvk/2/
在不进行缩放的情况下，长方体将完全围绕光标居中，但如果切换缩放复选框以设置缩放zoomMesh.scale.set(1.5, 1.5, 1)，则光标从场景中心移动的距离越远，长方体位置就会移动。
我是不是搞乱了像“变换原点”这样的CSS，让three.js把比例放在对象的中心，这是获得这种缩放效果的正确方法吗？
我是three.js和3d的新手，非常感谢大家的帮助。
回答 2
Stack Overflow用户
发布于 2020-02-19 04:33:25
感谢你的回答，这并不完全是我想要的(不仅可以调整正方形的大小，还可以放大图像)，但你给我指明了正确的方向。
就像你说的，位置坐标是随着比例移动的，所以我必须重新计算相对于比例的新位置。
使用新的scale和offset变量添加了以下新行：
if(scaleCheckBox.checked){
const offset = scale - 1;
zoomMesh.position.set(
-(x1 * offset) - (size*scale)/2) -(size/2),
-((y1 * offset) + (size*scale)/2) -(size/2)),
0
);
}这是一个有用的工具：https://jsfiddle.net/dc9f5v0m/
它有点乱，需要进行大量的重新计算(特别是将光标放在正方形的中心)，但它完成了工作，并且可以使用任何形状的缩放效果，而不仅仅是正方形。
再次感谢您的帮助。
Stack Overflow用户
发布于 2020-02-19 02:53:20
使用1.5缩放网格时，这意味着应用变换矩阵来缩放顶点的值。
这个问题来自于顶点的变化。顶点位于网格的局部空间中。当您将正方形的左上角顶点设置为[10, 10, 0]，然后将.scale.set(1.5, 1.5, 1)应用于网格时，顶点的坐标将变为[15, 15, 0]。对所有其他3个顶点也是如此。这就是为什么正方形的中心在从图片中心到鼠标指针的1.5倍处不匹配。
因此，一个选项不是缩放网格，而是更改正方形的大小。
我把你的小提琴改了一点，所以可能会更有说服力：
const
[width, height] = [500, 300],
canvas = document.querySelector('canvas'),
scaleCheckBox = document.querySelector('input')
;
console.log(scaleCheckBox)
canvas.width = width;
canvas.height = height;
const
scene = new THREE.Scene(),
renderer = new THREE.WebGLRenderer({canvas}),
camDistance = 5,
camFov = (2 * Math.atan( height / ( 2 * camDistance ) ) * ( 180 / Math.PI )),
camera = new THREE.PerspectiveCamera(camFov, width/height, 0.1, 1000 )
;
camera.position.z = camDistance;
const
texture = new THREE.TextureLoader().load( "https://picsum.photos/500/300" ),
imageMaterial = new THREE.MeshBasicMaterial( { map: texture , side : 0 } )
;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
const
planeGeometry = new THREE.PlaneGeometry( width, height ),
planeMesh = new THREE.Mesh( planeGeometry, imageMaterial )
;
const
zoomGeometry = new THREE.BufferGeometry(),
zoomMaterial = new THREE.MeshBasicMaterial( { map: texture , side : 0 } ),
zoomMesh = new THREE.Mesh( zoomGeometry, zoomMaterial )
;
zoomMaterial.color.set(0xff0000);
zoomGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array([
0, 0, 0,
0, 0, 0,
0, 0, 0,
0, 0, 0
]), 3));
zoomGeometry.setIndex([
0, 1, 2,
2, 1, 3
]);
scene.add( planeMesh );
scene.add( zoomMesh );
var zoom = 1.;
function setZoomBox(e){
const
size = 50 * zoom,
x = e.clientX - (size/2),
y = -(e.clientY - height) - (size/2),
coords = [
x,
y,
x + size,
y + size
]
;
const [x1, y1, x2, y2] = [
coords[0] - (width/2),
coords[1] - (height/2),
coords[2] - (width/2),
coords[3] - (height/2)
];
zoomGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array([
x1, y1, 0,
x2, y1, 0,
x1, y2, 0,
x2, y2, 0
]), 3));
const [u1, v1, u2, v2] = [
coords[0]/width,
coords[1]/height,
coords[2]/width,
coords[3]/height
]
zoomGeometry.setAttribute('uv',
new THREE.BufferAttribute(new Float32Array([
u1, v1,
u2, v1,
u1, v2,
u2, v2,
u1, v1,
u1, v2
]), 2));
}
function setScale(e){
//zoomMesh.scale.set(...(scaleCheckBox.checked ? [1.5, 1.5, 1] : [1, 1, 1]));
zoom = scaleCheckBox.checked ? 1.5 : 1 ;
}
function render(){
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
canvas.addEventListener('mousemove', setZoomBox);
scaleCheckBox.addEventListener('change', setScale);html, body {
margin: 0;
height: 100%;
}
body{
background: #333;
color: #FFF;
font: bold 16px arial;
}
canvas{
}<script src="https://threejs.org/build/three.min.js"></script>
<canvas></canvas>
<div>Toggle scale <input type="checkbox" /></div>
https://stackoverflow.com/questions/60273277
复制相似问题
腾讯云开发者
