javascript - 如何使我的光线投射器仅在与可见对象/实体相交时工作?
问题描述
我想让我的光线投射器只与可见的物体相交。我有三个类,.menu_one、.menu_two 和 .menu_three。当我单击其中一个时,我希望所有其他菜单消失,以便查看者可以看到 3d 背景。但是,当我四处走动时,当我不想时,我仍然可以单击过去与光线投射器一起出现的菜单。我通过 raycaster="objects: ???" 传递什么 或任何其他使其工作的方法。...
<a-cursor
id="cursor"
material="color: black; shader: flat"
position="0 0 -4.5"
geometry="primitive: ring; radiusInner: 0.15; radiusOuter: 0.2"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__mouseenter="_event: mouseenter; color: springgreen"
event-set__mouseleave="_event: mouseleave; color: black"
raycaster="objects: [data-visible]">
</a-cursor>
<a-entity class="menu1"
geometry="primitive: plane; height: 0.2; width: 0.5"
material="color: black"
text="value: ${city_name}; color: white; align: center; wrapCount: 10; font: exo2bold"
event-set__mouseenter="scale: 1.5 1.5 1"
event-set__mouseleave="scale: 1 1 1"
event-set__1="_event: click; _target: #models; _delay: 300; visible: false">
...
我希望光线投射器只能与用户可见的对象相交。
嗨,这是使这项工作的方法吗?
AFRAME.registerComponent('data-raycastable', {
init: function () {
var self = this;
var el = this.el;
var data = this.data;
this.eventHandlerFn = function () {
if (el.object3D.visible = true){
el.setAttribute('data-raycastable', '');
}
else {
el.removeAttribute('data-raycastable')
}
}
update: function() {
el.addEventListener('click', this.eventHandlerFn);
}
}
}
})
解决方案
您应该明确控制 raycasterobjects
列表。例如:
raycaster="objects: [data-raycastable]"
现在我们有了一个我们想要使 raycastable 的实体:
<a-entity geometry material data-raycastable>
假设我们隐藏了实体。我们还删除了它的 raycastable 属性:
el.object3D.visible = false;
el.removeAttribute('data-raycastable');
假设我们把它加回来:
el.object3D.visible = true;
el.setAttribute('data-raycastable', '');
在更复杂的场景中,在许多实体上可能会更乏味。诸如aframe-state-component
(https://www.npmjs.com/package/aframe-state-component)之类的东西可以通过根据场景状态以声明方式关闭可投射性来提供帮助。假设我们有<a-entity raycaster="objects: [raycastable]">
with AFRAME.registerComponent('raycastable', {})
,并且状态是isMenuActive
由 state 组件管理:
<a-entity id="button" bind-toggle__raycastable="isMenuActive">
而且我编写了自己的组件来保持 raycastable / 可见性同步。
<a-entity id="button" bind__visible-raycastable="isMenuActive">
推荐阅读
- python - 如何在不使用递归的情况下解决这个问题?(一条线的排列方式有限制)
- c - 我们如何计算嵌入式 C 中以下 for 循环给出的延迟?
- android - 如何在android中创建进入1个视图并从另一个视图退出的动画
- visual-c++ - EvaluateScriptAsync 在 CLR CefSharp 应用程序中挂起浏览器
- python - 对二维数组按列排序的最佳方法是什么?
- php - 检查 $_POST 中先前提交的值并替换默认选定项
- go - 尝试调用 Golang 跟踪时出错
- excel - ColorRows Application.EnableEvents
- javascript - 我在 React js 应用程序上工作,出现了这个问题(TypeError: Cannot read property 'request' of undefined)
- css - 引导边距类不适用于按钮