三.js点击对象 [英] Three.js click object

问题描述

我一直在尝试让 这个 示例对我有用.我快到了.我的问题是我没有使用全屏画布.我正在使用一个较小的 div，它可能会根据分辨率放置不同的位置.

I've been trying to make this example work for me. I'm almost there. My problem is that I'm not using a full screen canvas. I'm using a smaller div that might be placed differently depending on resolution.

我的工作是在这个 div 内获取鼠标点击的坐标，并且点击对象也能正常工作.但是一切都有点偏移，可点击区域比对象本身大.

What I have working is getting the coordinates of the mouse click inside this div, and clicking objects are working as well. But Everything is a little bit offset and the clickable area is bigger than the object itself.

所以我的问题是如何使这更准确.

So my question is how I can make this more accurate.

此代码http://jsfiddle.net/phacer/FHD8W/1/ 有效在我的浏览器中，但不在 JSFiddle 中.那么在这种情况下，我该如何点击我的对象?

This code http://jsfiddle.net/phacer/FHD8W/1/ works in my browser but not in JSFiddle. So in this context, how can I click my objects?

我认为第 180 行是错误的.

I think line 180 is what is wrong.

var vector = new THREE.Vector3((x / WIDTH) / 1 - 1, -(y / HEIGHT) / 1 + 1, 0.5);

推荐答案

与您非常亲近.最大的问题是使用旧的 r54 库.从 r58 开始，光线投射变得更好了.所以看看这个新的小提琴 http://jsfiddle.net/FHD8W/3/ 我已经删除了r54 链接并将外部资源添加到 github.io.

your very close. The big problem is the use of the old r54 library. As of r58 Raycasting became a lot better. So check out this new fiddle http://jsfiddle.net/FHD8W/3/ I've removed the r54 link and added an external resource to the github.io.

另外，你是对的，第 180 行需要稍微调整一下才能看起来像这样:

Also, you were correct line 180 needed a slight tweak to look like this:

var vector = new THREE.Vector3((x / WIDTH) * 2 - 1, -(y / HEIGHT) * 2 + 1, 0.5);

应该可以

这篇关于三.js点击对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！