根据鼠标指针放大对象

Question

我正在尝试基于鼠标指针位置放大对象（比如立方体）。我在Google上找到了一个想法，可以在D3 JS中实现，并且也可以通过捕获鼠标指针的3D点并在鼠标滚轮函数中传递它来实现。

这里是一个fiddle https://jsfiddle.net/fpt9hswo/

var scene, renderer, camera;
var cube;
var controls;
var containerWidth = window.innerWidth,
  containerHeight = window.innerHeight;

init();
animate();

function init() {
  configureRenderer();

  scene = new THREE.Scene();

  configureCube();

  configureCamera();

  configureLight();

  configureControls();

  fitAll();
}

function configureRenderer() {
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });
  renderer.setSize(containerWidth, containerHeight);
  document.body.appendChild(renderer.domElement);
}

function configureCube() {
  var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
  var cubeMaterial = new THREE.MeshLambertMaterial({
    color: 0xff0000
  });
  cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.set(50, 0, 0);
  scene.add(cube);
}

function configureCamera() {
  camera = new THREE.PerspectiveCamera(45, containerWidth / containerHeight, 1, 1000);
  camera.position.set(0, 160, 400);
  camera.lookAt(scene);
}

function configureLight() {
  pointLight = new THREE.PointLight(0xffffff, 1.0, 100000);
  pointLight.position.set(0, 300, 200);
  scene.add(pointLight);
}

function configureControls() {
  controls = new THREE.TrackballControls(camera, renderer.domElement);
   // configuration of controls
  controls.rotateSpeed = 5.0;
  controls.zoomSpeed = 5.0;
  controls.panSpeed = 2.0;
  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0;
}

function fitAll() {
  // Calculate bounding box of the whole scene
  var boundingBoxOfNode = new THREE.Box3().setFromObject(scene),
    centerOfGravity = boundingBoxOfNode.getCenter();

 /************* CAMERA *************************/
  camera.position.addVectors(camera.position, centerOfGravity);
  camera.lookAt(centerOfGravity);
  //new camera positions will be set here
  //Eg: camera.position.set(newCamera.x,newCamera.y,newCamera.z);
  //Similarly new camera rotation and quaternion coordinates will be set
  //Eg: camera.rotation.set(newCamera.rotatex,newCamera.rotatey,newCamera.rotatez);
  //Eg: camera.quaternion.set(newCamera.qw,newCamera.qx,newCamera.qy,newCamera.qz);

  /*************    CONTROLS *************************/
  controls.target.set(centerOfGravity.x, centerOfGravity.y, centerOfGravity.z);
  //new controls.target values will be set here
  //Eg: controls.target.set(newCamera.targetx,newCamera.targety,newCamera.targetz);
}

function animate() {
  controls.update();
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

提前致谢

- user9651431

---

如果你在向后拉鼠标的同时按下鼠标滚轮按钮，相机会进行缩放。这就是你所说的吗？ - manthrax

Answer 1

要实现您想要的功能，您需要实现自己的鼠标滚轮事件，并禁用THREE.TrackballControls的默认缩放：

controls = new THREE.TrackballControls(camera, renderer.domElement);
//...
controls.zoomSpeed = 0.0;

添加滚轮事件：

例如：

renderer.domElement.addEventListener("wheel", event => {
    const delta = event.deltaY;

    // [...]
}

在透视投影中，可以通过将相机在世界深度中的位置移动来实现缩放。如果要缩放到一个点，则可以沿着从相机位置通过光标（鼠标）位置的射线移动相机，并平行移动目标位置。

在归一化设备空间中可以轻松找到从相机到光标的射线上的点。在归一化设备空间中，所有坐标都在[-1, 1]范围内，并且具有相同x和y坐标的所有点位于同一条射线上。如果z坐标为-1，则该点位于近平面上，如果z为1，则该点位于远平面上。

例如：在远平面上并通过光标的NDC点上的射线：

let x = 2 * event.clientX / window.innerWidth - 1; 
let y = 1 - 2 * event.clientY / window.innerHeight;
let cursorpos = new THREE.Vector3(x, y, 1);

通过THREE.Vector3.unproject()，可以将规范化设备空间中的点转换为世界空间中的点。该函数的参数必须是定义视图和投影的THREE.Camera：

cursorpos.unproject(camera);

相机移动的方向是相机位置到光标位置在世界空间中的归一化方向：

let dir = new THREE.Vector3().copy(cursorpos).sub(camera.position).normalize();

根据方向和鼠标滚轮差值计算移动，并更新相机和THREE.TrackballControls：

let shift = new THREE.Vector3().copy(dir).multiplyScalar(delta * 0.1);

camera.position.add(shift);
controls.position0.add(shift);
controls.target.add(shift);

看一个例子，我将建议应用到问题代码中：

var scene, renderer, camera;
var cube;
var controls;
var containerWidth = window.innerWidth,
  containerHeight = window.innerHeight;

init();

animate();

function init() {
  configureRenderer();

  scene = new THREE.Scene();
  configureCube();
  configureCamera();
  configureLight();
  configureControls();
}

function configureRenderer() {
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });
  renderer.setSize(containerWidth, containerHeight);
  document.body.appendChild(renderer.domElement);

  window.onresize = function() {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      if (controls)
          controls.handleResize();
  }

  renderer.domElement.addEventListener("wheel", event => {
      const delta = event.deltaY;

      let x = 2 * event.clientX / window.innerWidth - 1; 
      let y = 1 - 2 * event.clientY / window.innerHeight;
      let cursorpos = new THREE.Vector3(x, y, 1);

      cursorpos.unproject(camera); 

      let dir = new THREE.Vector3().copy(cursorpos).sub(camera.position).normalize();
      let shift = new THREE.Vector3().copy(dir).multiplyScalar(delta * 0.1);

      camera.position.add(shift);
      controls.position0.add(shift);
      controls.target.add(shift);
  });
}

function configureCube() {
  var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
  var cubeMaterial = new THREE.MeshLambertMaterial({
    color: 0xff0000
  });
  cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.set(50, 0, 0);
  scene.add(cube);
}

function configureCamera() {
  camera = new THREE.PerspectiveCamera(45, containerWidth / containerHeight, 1, 1000);
  camera.position.set(0, 160, 400);
  camera.lookAt(scene);
}

function configureLight() {
  pointLight = new THREE.PointLight(0xffffff, 1.0, 100000);
  pointLight.position.set(0, 300, 200);
  scene.add(pointLight);
}

function configureControls() {
  controls = new THREE.TrackballControls(camera, renderer.domElement);
  // configuration of controls
  controls.rotateSpeed = 5.0;
  controls.zoomSpeed = 0.0;
  controls.panSpeed = 2.0;
  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0;
}

function animate() {
  controls.update();
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>

- Rabbid76