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>