时间戳

首页 > 解决方案 > A-Frame：如何使用光线投射器旋转远处的组件？

aframe - A-Frame：如何使用光线投射器旋转远处的组件？

问题描述

在 Aframe 中，有没有办法使用控制器通过 raycaster 旋转远处的组件？

标签： aframe

解决方案

是的。光标实体，带有 raycaster 和 class='clickable' 像这样

    <a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: 
.clickable"></a-entity>

然后在要旋转的对象上添加一个自定义组件，该组件侦听鼠标事件，然后旋转对象，直到发生鼠标离开事件。像这样

 AFRAME.registerComponent('over-listener', {
      schema:{
        mouseover:{type: 'boolean', default: false}
      },
      init: function () {

        var el = this.el;  // reference to the entity that contains this component    
        var data = this.data;  // reference to the properties of this component.    
        // Listen for mouseenter event
        this.el.addEventListener('mouseenter', function (evt) { 
          // You can't change the property directly. You must use setAttribute.
          el.setAttribute('over-listener','mouseover', true); 
          // Change the color of the button to indicate rollover state is on.
           el.setAttribute('material','color','#55ee00');;
        });    
        // Listen for mouseleave event
        this.el.addEventListener('mouseleave', function (evt) {              
          el.setAttribute('over-listener','mouseover', false);   
           el.setAttribute('material','color','orange');
        });    
      },
      tick: function(){ // called every frame       
        if(this.data.mouseover){ // Check the mouseover state
          let elOcta = document.querySelector('#octahedron');
          let rot = elOcta.getAttribute('rotation');
          elOcta.setAttribute('rotation',{x: rot.x, y: rot.y , z: rot.z + 1});
        }
      }      
    });

这是一个小故障 https://glitch.com/~rollover-rotate

推荐阅读