当画布不是全屏时单击three.js中的对象r74

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

我的控制器

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);
    }

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

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

我的照相机

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 通过添加 div 失败

学分：

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

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