[A-frame学习文档笔记]JavaScriptEvents DOM APIs的简单使用

JavaScriptEvents DOM APIs的简单使用

 

一、查找

 

1、查找某个实体

var sceneEl =document.querySelector('a-scene');

通过标签名称查找某个实体，这个通常用来查找a-scene，因为通常只有一个a-scene标签，这样可以唯一的找到这个元素。找到以后我们就可以对其进行操作了。

 

sceneEl.querySelector('#redBox')

通过ID来查找元素 参数的格式为（#<ID>），即在ID名称前加上#，上面的例子是在sceneEl这个标签下来查找ID为redBox的实体。

 

2、查找所有实体

使用了querySelectorAll这个函数可以找到所有的实体。

console.log(sceneEl.querySelectorAll('a-box'));

// [

//  <a-box id="redBox"class="clickable" color="red"></a-box>,

//  <a-boxcolor="green"></a-box>

// ]

 

通过class来查找某个实体，注意的是要在class名称前面加上 .

console.log(sceneEl.querySelectorAll('.clickable'));

// [

//  <a-box id="redBox"class="clickable" color="red"></a-box>

//  <a-sphere class="clickable"color="blue"></a-sphere>

// ]

 

我们还可以通过某个属性或组件来查找元素，格式是[组件名]，注意[]不能少了。

console.log(sceneEl.querySelectorAll('[light]'));

// [

//  <a-entity light="type:ambient"></a-entity>

// <a-entitylight="type: directional"></a-entity>

// ]

 

二、创建修改实体

 

1、创建实体

var el =document.createElement('a-entity');

然而这个实体没有被初始化，它还不是scene的一部分，所以我们应该将其加入scene的下面，完整的应该这样写：

var sceneEl =document.querySelector('a-scene');

var entityEl =document.createElement('a-entity');

// Do`.setAttribute()`s to initialize the entity.

sceneEl.appendChild(entityEl);

 

2、监听实体创建

将这个实体加入到scene 即appendchild这个是异步的操作在浏览器，直到这个实体已经完成在DOM下的附加，我们不能做太多的操作对这个实体（例如getAttribute）如果我们需要查询一个属性在一个已经被附加的实体，我们可以监听loaded事件在这个实体上，或者放置一个逻辑在一个组件上，从而在一旦准备好就可以执行了

Note that .appendChild() isan asynchronous operation in the browser. Until the entity hasfinished appending to the DOM, we can’t do many operations on the entity (suchas calling .getAttribute()). If we need to query an attribute onan entity that has just been appended, we can listen to the loaded event onthe entity, or place logic in an A-Frame component so that it is executed onceit is ready:

var sceneEl =document.querySelector('a-scene');

AFRAME.registerComponent('do-something-once-loaded', {

  init:function () {

    // This will be called after the entity has properly attached and loaded.

    console.log('I am ready!');

  }

});

var entityEl =document.createElement('a-entity');

entityEl.setAttribute('do-something-once-loaded','');

sceneEl.appendChild(entityEl);

组件的意义应该是判断这个实体有没有准备好

 

3、移除一个实体

通过父节点来移除自己。

entityEl.parentNode.removeChild(entityEl);

 

 

4、修改一个实体

我们可以通过.setAttribute(componentName,data)这个来给实体添加一个组件，如下我们给其加上了geometry组件，并赋予了初值。

entityEl.setAttribute('geometry', {

 primitive: 'box',

 height: 3,

 width: 1

});

 

 

我们可以用setAttribute()来更新组件，例如

单属性组件的更新

entityEl.setAttribute('position', {x:1, y:2, z:-3});

// Or entityEl.setAttribute('position','1 2 -3');

 

多属性组件的单属性更新

参数为：组件名，属性名，属性值

entityEl.setAttribute('material','color','red');

 

一次更新多个属性

// <a-entitylight="type: directional; color: #CAC; intensity:0.5"></a-entity>

entityEl.setAttribute('light', {color:'#ACC', intensity: 0.75});

// <a-entitylight="type: directional; color: #ACC; intensity:0.75"></a-entity>

 

给多属性组件替换属性

// <a-entitygeometry="primitive: cylinder; height: 4; radius:2"></a-entity>

entityEl.setAttribute('geometry', {primitive:'torusKnot',p: 1,q: 3,radiusTubular:4}, true);

// <a-entitygeometry="primitive: torusKnot; p: 1; q: 3; radiusTubular:4"></a-entity>

 

移除一个组件，如下为找到有camera组件的元素，移除它的某个组件。

var cameraEl =document.querySelector('[camera]');

cameraEl.removeAttribute('wasd-controls');

 

 

三、事件

 

1、发送一个事件

第一个参数是事件的名字，第二个参数是要传递的参数，第三个参数是决定父实体是否发送这个事件。

entityEl.emit('physicscollided',{collidingEntity: anotherEntityEl}, false);

 

2、监听事件

第一个是参数是监听事件的名称，第二个参数是处理事件的函数。

entityEl.addEventListener('physicscollided',function (event) {

 console.log('Entity collidedwith',event.detail.collidingEntity);

});

 

3、移除监听

         第一个参数是事件名称，第二是要移除的处理函数，因为这个事件的处理函数可能不止一个，所以才要指定函数的名称。

// We have todefine this function with a name if we later remove it.

functioncollisionHandler (event) {

 console.log('Entity collidedwith',event.detail.collidingEntity);

}

entityEl.addEventListener('physicscollided', collisionHandler);

entityEl.removeEventListener('physicscollided', collisionHandler);