Question

感谢您抽出宝贵时间回答我的问题。

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

版本r55和r76之间似乎发生了很多变化......很多论坛都在讨论和放置三个小版本的例子..

任何人都可以举例说明如何做到这一点吗？

我正在使用角度和引导程序

这就是我的尝试：

我的观点

<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 fails by adding div

现金：

Y坐标 - ＆＃34; Kris Roofe＆＃34;答案。
X坐标 - ＆＃34; beepscore＆＃34;谁评论了Kris Roofe的回答。

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

Answer 2

在随后的几年中，情况可能发生了变化……尽管画布响应迅速，这种从鼠标坐标到（-1，1）坐标的映射对我仍然有效：

mouseVector.x = 2 * (e.x / canvas.offsetWidth) - 1;
mouseVector.y = 1 - 2 * ( (e.y - canvas.offsetTop) / canvas.offsetHeight );
mouseVector.z = 0.5 ;

请注意，offsetHeight与高度不同！宽度相同。

祝你好运！

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

2 个答案: