[英]My three.js script is not running on a-frame
当一个实体可见时,我正试图制作一个raycaster功能。 我被告知要尝试编写脚本以使其工作,所以我继续这样做。 所有实体和子实体,我都可以通过点击进行互动,并通过点击触发大部分事件,这会使某些实体变为不可见:
<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>
您在此处看到的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);
}
}
}
})
现在,我想知道为什么我的这个剧本不起作用。 我密切关注A-frame文档,试图让它工作,但它没有。 光标按钮如下所示:
<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>
有人可以引导我朝着正确的方向前进。
不确定您的组件正在尝试完成什么,到目前为止它有语法错误(架构后缺少逗号)并且el
引用无效。 更正代码:
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');
}
})
}
});
使用类而不是数据属性来实现光线投射。 纠正了故障: https ://glitch.com/edit/#!/ aquatic- aftershave
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.