三.js，缩放对象时意外的位置偏移

Question

我正在尝试创建一个缩放框，到目前为止，我设法将光标位置从语言环境转换为世界坐标，并使用正确的 uv 在光标周围创建一个框对象。

这是我尝试的 fiddle :https://jsfiddle.net/2ynfedvk/2/

在不缩放的情况下，框完全以光标为中心，但如果您切换缩放复选框来设置比例 zoomMesh.scale.set(1.5, 1.5, 1)，框位置会移动进一步将光标从场景中心移开。

我是否弄乱了诸如“transform origin”之类的 CSS，让 Three.js 的缩放比例以对象为中心，这是获得这种缩放效果的正确方法吗？

我对 Three.js 和 3d 不太熟悉，所以感谢您的帮助。

Answer 1

当您将网格缩放为 1.5 时，这意味着应用缩放顶点值的变换矩阵。

问题来自于顶点的变化。顶点位于网格的局部空间中。例如，当您将正方形的左上角顶点设置为 [10, 10, 0] 时，然后应用 .scale.set(1.5, 1.5, 1) code> 到网格中，则顶点坐标变为 [15, 15, 0]。其他 3 个顶点也是如此。这就是为什么正方形的中心在从图片中心到鼠标指针的 1.5 倍处不匹配的原因。

因此，一个选择是不缩放网格，而是更改正方形的大小。

我稍微改变了你的 fiddle ，所以也许它会更具解释性:

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>