javascript - 当 Canvas 不是全屏 r74 时单击 three.js 中的对象

Question

感谢您花时间回答我的问题。

在r74版本的三个JS中如何使用raycaster我实在找不到很好的例子。

r55 和 r76 版本之间似乎有很多变化......而且许多论坛都在谈论和放三个小版本的例子..

谁能给我们举个例子说明如何做？

顺便说一句，我使用了 angular 和 bootstrap

这是我尝试过的:

我的看法

<div class="col-md-11">
  <div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body" style="padding: 0px">
        <div class="canvas-zonas" ng-click="zonas.click($event)">
        </div>
      </div>
    </div>
  </div>
</div>

我的 Css(使用手写笔)

.canvas-zonas
  height 67vh

我的 Controller

var = mouse = new THREE.Vector3();
var = raycaster = new THREE.Raycaster();
var = canvas = document.querySelector(".canvas-zonas");

function clickObject(event) {
      event.preventDefault();
      mouse.x= ((event.clientX - canvas.offsetLeft)/canvas.clientWidth) * 2 - 1;
      mouse.y=-((event.clientY - canvas.offsetTop)/canvas.clientHeight) * 2 + 1;
      mouse.z = 0.5;
      raycaster.setFromCamera( mouse, camera );
      var intersects = vm.raycaster.intersectObjects(scene.children);
      console.info(intersects);
    }

因此，当我单击 Canvas 并打印 Intersects 变量时，有时即使单击对象我也会得到 [] 一个空数组，有时即使单击对象外部也会得到 [object] .

我想向你们展示一下我的相机配置:

我的相机

var camera = new THREE.PerspectiveCamera(30, canvas.clientWidth / canvas.clientHeight, 0.10, 1000)
camera.position.y = 20;
camera.position.z = 50;
camera.lookAt(scene.position);
camera.updateProjectionMatrix();

那是我的相机配置，而且请记住，我使用 WEBGL 作为渲染器

var renderer = new THREE.WebGLRenderer({antialias: true});

此外，请记住我正在进行调整大小事件:

function listenResize() {
  window.bind('resize', function () {
    canvas = document.querySelector(".canvas-zonas");
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
    camera.aspect = (canvas.clientWidth / canvas.clientHeight);
    camera.updateProjectionMatrix();
  });
}

最后，我将张贴一张正在发生的事情的图片:

图 1

图 2

非常感谢您，请原谅我上次发帖。我已经更新了!!!

Answer 1

我遇到了和你一样的问题。在互联网上潜伏了两天后，我终于找到并测试了这个并取得了不错的效果:

let canvasBounds = this.renderer.context.canvas.getBoundingClientRect();
this.mouse.x = ( ( event.clientX - canvasBounds.left ) / ( canvasBounds.right - canvasBounds.left ) ) * 2 - 1;
this.mouse.y = - ( ( event.clientY - canvasBounds.top ) / ( canvasBounds.bottom - canvasBounds.top) ) * 2 + 1;

来源:THREE.js Ray Intersect fails by adding div

致谢:

• Y 坐标 - “Kris Roofe”答案。
• X 坐标 - 对 Kris Roofe 的回答发表评论的“beepscore”。

我希望它能帮助像我一样的许多人。