更新:此插件https://github.com/mayognaise/aframe-mouse-cursor-component
解决了问题这里有新的框架。我正在创建一个场景,我希望用户能够“点击”桌面浏览器上的对象,我不想花很多时间搞乱现有的外观控件代码或创建一个新组件,所以我看了一下来自https://stackoverflow.com/a/36071100/5132437的代码并设计了一个解决方案,我尝试使跟随鼠标移动的位置:
// code for moving the cursor
var mouse = {
x: 0,
y: 0
};
var camera = document.querySelector('#camera').components.camera.camera;
console.log(camera.position);
function onMouseMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
var vector = new THREE.Vector3(mouse.x, mouse.y, -1);
vector.unproject(camera);
var dir = vector.sub(camera.position).normalize();
var distance = -camera.position.z / dir.z;
var pos = camera.position.clone().add(dir.multiplyScalar(distance));
positionStr = String(pos.x) + " " + String(pos.y) + " " + String(pos.z);
document.querySelector('#cursor').setAttribute('position', positionStr);
}
window.addEventListener('mousemove', onMouseMove, false);
这里的问题是每次鼠标移动时光标都会消失到位置(0,0,0)。我知道在相框中获取正确的相机数据可能有问题,但我不确定。
任何帮助将不胜感激
答案 0 :(得分:2)
解决方案:https://github.com/mayognaise/aframe-mouse-cursor-component
我将在https://github.com/aframevr/aframe/pull/1196土地上完成这个工作。有一个跟随鼠标的光标,然后单击将光线投射到场景中。
你不会使用<a-cursor>
但是你会做http://threejs.org/examples/#webgl_interactive_cubes