一个框架。自定义组件与magic-hands.js组合

时间:2018-08-08 08:13:27

标签: components this aframe

magic-hands lib
example on codepen
我正在开发用于场景修改的工具。万一我需要结合克隆实体和他的举动。 现在,问题: -如何仅从窗口到元素删除事件区域? -在mousedown上,我遇到了一连串的事件,而不是一个单独的实体克隆,这是进展。我认为,问题出在主动实体选择上。我需要如何为正常工作重写组件? -我需要同时停用克隆组件,如何在不删除属性的情况下停用组件?

<!DOCTYPE html>
<html>
<head>
    <title>clone&drag'n'drop</title>
    <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.11.4/dist/aframe-extras.min.js"></script>
  <script src="https://unpkg.com/super-hands@2.0.0/dist/super-hands.min.js"></script>
</head>
<body style='background-color: rgb(80,80,80);'>
<script>
AFRAME.registerComponent('clone-entity', {
    // Init lifecycle method fires upon initialization of component.
    init: function() {
        // Allows the use of "self" as "this" within the listener without binding.
        var self = this;
        console.log(self.el.sceneEl);
        // Add the click listener.
        this.el.addEventListener('mousedown', function() {
            document.body.style.cursor = 'move'; //crosshair
            var twin = this.cloneNode(true);
            twin.setAttribute('material', 'color: rgba(165,225,75), transparent: true; opacity: 0.3');
            twin.setAttribute('position', this.getAttribute('position'));
            twin.flushToDOM(true);
            self.el.sceneEl.appendChild(twin);
        });
    }
});
</script>
<a-scene>
        <a-entity camera wasd-controls position="0 1.6 0"  cursor="rayOrigin:mouse" super-hands="colliderEvent: raycaster-intersection;
                             colliderEventProperty: els;
                             colliderEndEvent:raycaster-intersection-cleared;
                             colliderEndEventProperty: clearedEls;">
            <a-cursor></a-cursor>
    </a-entity>
    <a-box position="0 1.6 -3" data-clickable clone-entity grabbable stretchable draggable droppabl event-set__dragdrop event-set__dragon event-set__dragoff transparent="false"></a-box>
</a-scene>
</body>
</html>

0 个答案:

没有答案