shihyingru
5/15/2017 - 9:55 AM
VR-HTML & A-FRAME
VR-HTML
A-FRAME
A-Frame:Core API(Three.js)
Entity
A-Frame:Core API_Entity
Basic Example
//Represent an entity.
<a-entity>
//To give basic shape ane appearence.
<a-entity geometry="primitive: box" material="color: red">
//Emit light.
<a-entity geometry="primitive: box" material="color: red"
light="type: point; intensity: 2.0">
Retrieving an Entity
*文件物件模型(Document Object Model, DOM)
//HTML
<a-entity id="mario">
//JS
//取出一個實體物件,取出後便能進入使用該實體的屬性和方法.
el = document.querySelector('#mario');
Properties
components
*<a-entity>.components是一個附著在實體上的components物件,
這讓我們可以進入存取實體物件的data、狀態和方法.
//JS
var camera = document.querySelector('a-entity[camera]').components.camera.camera;
var material = document.querySelector('a-entity[material]').component.material.material;
//Exposes
//enable objects to be accessed through some means.
//It could let the users create, read, update or delete objects.
//Using the HTTP protocol through some predefined way to interact with your objects (an API).
document.querySelector('a-entity[sound]').components.sound.pause();
isPlaying
*If pause the entity, then isPlaying becomes false.
object3D
<a-entity>.object3D:THREE.JS object3d 實體的參照.
object3D是THREE.Group的物件,裡頭包含THREE.Object3D的多種類型,
如cameras, meshes, lights, sounds...
var groupObject3D = document.querySelector('a-entity').object3D;
console.log(groupObject3D.parent);
console.log(groupObject3D.children);
object3DMap
//一個附著geometry和light的實體可能設置如下:
{
geometry: <THREE.Light Object>,
mesh: <THREE.Mesh Object>
}
//For an Entity with geometry and light components attached
this.el.setObject3D('mesh', new THREE.Mesh(geometry, material));
Using getOrCreateObject3D, setObject3D and removeObject3D
to manage entity's set of THREE.Object3D.
sceneEl
var sceneEl = document.querySelector('a-scene');
var entity = sceneEl.querySelector('a-entity');
console.log(entity.sceneEl === sceneEl);
Methods
addState (stateName)
entity.addEventListener('stateadded', function (evt){
if(evt.detail.state === 'selected'){
console.log('Entity now selected!');
}
});
//addState() 會將一個狀態放置在實體上,便可emit stateadded event.
//emit:the corresponding callback be called
entity.addState('selected');
//並可透過 .is()確認存在狀態
entity.is('selected'); // >> true
emit(name, detail, bubbles)
//emit() 可以 emit 實體的 custom DOM event
//如下面範例,我們可以emit event來觸發動畫
//<a-entity>
// <a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
//</a-entity>
entity.emit('rotate');
//emit() 的第二個參數也可以傳遞event或data.
entity.emit('collide', { target: collidingEntity});
//The event will bubble by default, 可以傳遞false讓他不要執行bubble
entity.emit('sink', null, false);
flushToDom(recursive)
*flushToDom() 會序列化一個實體的物件資料並更新DOM.
getAttribute(componentName)
//getAttribute() 可以取得語法分析的元件資料(包含mixins和 default)
//<a-entity geometry="primitive: box; width: 3">
entity.getAttribute('geometry');
// >> {primitive: "box", depth: 2, height: 2, width:3, ...}
entity.getAttribute('geometry').primitive;
// >> "box"
entity.getAttribute('geometry').height;
// >> 2
entity.getAttribute('position');
// >> {x: 0, y: 0, z: 0}
//if componentName 非定義好的元件名稱,可用下面方式存取
// <a-entity data-position="0 1 1">
entity.getAttribute('data-position');
// >> "0 1 1"
getDOMAttribute(componentName)
//getDOMAttribute()只能取出被確實定義在DOM的元件資料
//<a-entity geometry="primitive: box; width: 3">
entity.getDOMAttribute('geometry');
// >> { primitive: box; width: 3}
entity.getDOMAtrribute('geometry').primitive;
// >> "box"
entity.getDOMAttribute('geometry').height;
// >> undefined
entity.getDOMAttribute('position');
// >> undefined
getObject3D(type)
//getObject3D 會找尋THREE.Object3D的子物件
AFRAME.registerComponent('example-mesh', {
init: function(){
var el = this.el;
el.getOrCreateObject3D('mesh', THREE.Mesh);
el.getObject3D('mesh'); //Returns THREE.Mesh that was created.
}
});
getOrCreateObject3D(type,Constructor)
//If the entity does not have a THREE.Object3D registered under type,
//getOrCreateObject3D() will register an instantiated THREE.Object3D using the passed Constructor.
//if have, getOrCreateObject3D will act as getObject3D
AFRAME.registerComponent('example-geometry', {
update: function(){
var mesh = this.el.getOrCreateObject3D('mesh', THREE.Mesh);
mesh.geometry = new THREE.Geometry();
}
});
pause()
//pause()會暫停所有動態行為,如被定義為animations和components
//pause()會呼叫Component.pause()
//<a-entity id="spinning-jumping-ball">
entity.pause();
play()
//play()會啟動所有動態行為,如被定義為animations和components
entity.pause();
entity.play();
setAttribute(componentName, value, [propertyValue | clobber])
//
//single property component
entity.setAttribute('visible', false);
//single property component2
//property type可以是object物件
entity.setAttribute('position', {x:1, y:2, z:3});
//multi-property component data
//setAttribute(componentName:registered component name, value:object of property)
entity.setAttribute('light', {
type: 'spot',
diatance: 30,
intensity: 2.0
});
//if want to update individual properties for a multi-property component.
entity.setAttribute('material', 'color', 'crimson');
//Putting multi-property component data
//如果true被當作第三個參數傳遞,non-specified properties將會被重置.
entity.setAttribute('light', {
type: 'spot',
diatance: 30,
intensity: 2.0
}, true);
setObject3D(type, obj)
//A-Frame adds obj as a child of the entity’s root object3D
AFRAME.registerComponent('example-orthogonal-camera', {
update: function(){
this.el.setObject3D('camera', new THREE.OrthogonalCamera());
}
});
removeAttribute(componentName, propertyName)
//
//if componentName 是registered component name
entity.removeAttribute('geometry'); //分離geometry物件
entity.removeAttribute('sound'); //分離聲音物件
//if propertyName is given
entity.setAttribute('material', 'color', 'blue'); // the color is blue.
entity.removeAttribute('material', 'color'); //Reset the color to the default value, white.
removeObject3D(type)
AFRAME.registerComponent('example-light', {
update: function(){
this.el.setObject3D('light', new THREE.Light());
// Light is now part of the scene.
// object3DMap.light is now a THREE.Light() object.
},
remove: function(){
this.el.removeObject3D('light');
// Light is now removed from the scene.
// object3DMap.light is now null.
}
});
removeState(stateName)
entity.addEventListener('stateremoved', function (evt){
if(evt.detail.state === 'selected'){
console.log('Entity no longer selected.');
}
});
entity.addState('selected');
entity.is('selected'); // check the state >> true
entity.removeState('selected');
entity.is('selected'); // check the state >> false
VR-HTML&A-FRAME
HTML開發工具:
1.Sublime Text
(http://blog.miniasp.com/post/2014/01/06/Useful-tool-Sublime-Text-3-Quick-Start.aspx)
2.Codepen(線上編輯工具/方便直接觀看html顯示的樣子)
(https://codepen.io/#)
桌面開發工具
CODE編輯軟體：Atom
網路連線軟體：XAMPP
產生後台網頁公開網址：ngrok
html code：放在xampp/htdocs的資料夾裡
設定8080port首頁：header('Location: '.$uri.'/VR_Aframe/index.html');
(/VR_Aframe/index.html為index html檔案位置)
