[英]My three.js script is not running on a-frame
I'm trying to make a raycaster only function when an entity is visible. 当一个实体可见时,我正试图制作一个raycaster功能。 I was told to try to write a script in order for this to work, so I went ahead and did such. 我被告知要尝试编写脚本以使其工作,所以我继续这样做。 All entities and child entities, I have interactable through click and have most of my events triggered through click, which make certain entities turn invisible as such: 所有实体和子实体,我都可以通过点击进行互动,并通过点击触发大部分事件,这会使某些实体变为不可见:
<script id="city" type="text/html">
<a-entity class="city"
geometry="primitive: plane; height: 0.2; width: 0.5"
data-raycastable
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: #image-360; _delay: 300; material.src: ${src}"
event-set__2="_event: click; _target: #models; _delay: 300; visible: false"
event-set__3="_event: click; _target: #cities; _delay: 300; visible: true"
event-set__4="_event: click; _target: #show_button; _delay: 300; visible: true"
event-set__5="_event: click; _target: ${map}; _delay: 300; visible: true"
proxy-event="event: click; to: #image-360; as: fade"
sound="on: click; src: #click-sound"></a-entity>
</script>
The data-raycastable parameter you see here is running of this here script: 您在此处看到的data-raycastable参数正在运行此脚本:
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);
}
}
}
})
Now, I'm wondering why this script of mine doesn't work. 现在,我想知道为什么我的这个剧本不起作用。 I followed the A-frame documentation closely in an attempt to make it work, but it doesnt. 我密切关注A-frame文档,试图让它工作,但它没有。 The cursor button looks like this: 光标按钮如下所示:
<a-entity id="camera" camera look-controls>
<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-raycastable], .link, .model">
</a-cursor>
</a-entity>
Can someone please steer me in the right direction. 有人可以引导我朝着正确的方向前进。
Not sure what your component is trying to accomplish, so far it has a syntax error (missing comma after schema) and the el
reference is not valid. 不确定您的组件正在尝试完成什么,到目前为止它有语法错误(架构后缺少逗号)并且el
引用无效。 Corrected code: 更正代码:
AFRAME.registerComponent('data-raycastable', {
schema: {
event: {type: 'boolean', default: true}
},
init: function () {
var el = this.el;
el.addEventListener('click', function() {
if (el.object3D.visible = false) {
el.classList.remove('raycastable');
}
else if (el.object3D.visible = true) {
el.classList.add('raycastable');
}
})
}
});
Use classes instead of data attributes for raycastability. 使用类而不是数据属性来实现光线投射。 Corrected glitch: https://glitch.com/edit/#!/aquatic-aftershave 纠正了故障: https ://glitch.com/edit/#!/ aquatic- aftershave
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.