added dynamic frags

This commit is contained in:
Leon van Kammen 2023-10-26 13:19:03 +02:00
parent a68ffe12d0
commit 291b87f94a
8 changed files with 152 additions and 28 deletions

View file

@ -48,8 +48,6 @@
<script> <script>
window.$ = (s) => document.querySelector(s) window.$ = (s) => document.querySelector(s)
window.notify = notify(window)
window.embed = embed
console.log = ( (log) => function(str){ console.log = ( (log) => function(str){
if( String(str).match(/:.*#/) ) window.notify(str) if( String(str).match(/:.*#/) ) window.notify(str)
@ -60,6 +58,9 @@
$('#home').setAttribute('xrf', document.location.search.substr(1)+document.location.hash ) $('#home').setAttribute('xrf', document.location.search.substr(1)+document.location.hash )
$('a-scene').addEventListener('XRF', () => { $('a-scene').addEventListener('XRF', () => {
window.notify = notify(window)
window.embed = embed
let XRF = window.AFRAME.XRF let XRF = window.AFRAME.XRF
setupConsole( $('textarea') ) setupConsole( $('textarea') )

File diff suppressed because one or more lines are too long

View file

@ -14,16 +14,26 @@
* xrf.emit('foo',123).then(...).catch(...).finally(...) * xrf.emit('foo',123).then(...).catch(...).finally(...)
*/ */
xrf.addEventListener = function(eventName, callback) { xrf.addEventListener = function(eventName, callback, scene) {
if( !this._listeners ) this._listeners = [] if( !this._listeners ) this._listeners = []
if (!this._listeners[eventName]) { if (!this._listeners[eventName]) {
// create a new array for this event name if it doesn't exist yet // create a new array for this event name if it doesn't exist yet
this._listeners[eventName] = []; this._listeners[eventName] = [];
} }
if( scene ) callback.scene = scene
// add the callback to the listeners array for this event name // add the callback to the listeners array for this event name
this._listeners[eventName].push(callback); this._listeners[eventName].push(callback);
}; };
xrf.removeEventListeners = function( everything ){
if( everything ) this._listeners = []
else{
for( let eventName in this._listener ){
this._listener[eventName] = this._listener[eventName].filter( (e) => e.callback ? null : e )
}
}
}
xrf.emit = function(eventName, data){ xrf.emit = function(eventName, data){
if( typeof data != 'object' ) throw 'emit() requires passing objects' if( typeof data != 'object' ) throw 'emit() requires passing objects'
return xrf.emit.promise(eventName,data) return xrf.emit.promise(eventName,data)

View file

@ -0,0 +1,24 @@
xrf.addEventListener('dynamicKeyValue', (opts) => {
let {scene,match,v} = opts
let light = v.fragment
scene.traverse( (o) => {
if( o.isLight && o.name == light ){
if( v.x != undefined ){
o.color.r = v.x
o.color.g = v.y
o.color.b = v.z
console.dir(o)
}else{
let driver = xrf.scene.getObjectByName(v.string)
if( !driver ) return
o.onAfterRender = () => {
let model = xrf.model
if( !model || !model.clock ) return
o.color.r = v.x
o.color.g = v.y
o.color.b = v.z
}
}
}
})
})

View file

@ -0,0 +1,32 @@
xrf.addEventListener('dynamicKeyValue', (opts) => {
let {scene,match,v} = opts
let material = v.fragment
const setMaterial = (mesh,v) => {
let mat = mesh.material
mat.transparent = v.x < 1.0
mat.opacity = v.x
}
console.dir(v)
scene.traverse( (mesh) => {
if( mesh.material){
if( mesh.material && mesh.material.name == material ){
delete mesh.onBeforeRender
delete mesh.driver
let opacity = v.float || v.x
if( opacity != undefined ){
setMaterial( mesh, {x:opacity})
}else{
mesh.driver = xrf.scene.getObjectByName(v.string)
if( !mesh.driver ) return
mesh.onBeforeRender = function(){
let model = xrf.model
if( !model || !model.clock ) return
setMaterial( this, this.driver.position )
}
}
}
}
})
})

View file

@ -1,24 +1,26 @@
xrf.addEventListener('dynamicKeyValue', (opts) => { xrf.addEventListener('dynamicKeyValue', (opts) => {
let {scene,match,v} = opts let {scene,match,v} = opts
let materialName = v.fragment let texture = v.fragment
scene.traverse( (mesh) => { scene.traverse( (mesh) => {
if( mesh.material){ if( mesh.material){
if( mesh.material.map && mesh.material.name == materialName ){ if( mesh.material.map && mesh.material.map.name == texture ){
let mat = mesh.material let mat = mesh.material
delete mesh.onBeforeRender
delete mesh.driver
if( v.x != undefined ){ if( v.x != undefined ){
mat.map.offset.x = v.x mat.map.offset.x = v.x
mat.map.offset.y = v.y mat.map.offset.y = v.y
mat.map.rotation = v.z mat.map.rotation = v.z
}else{ }else{
let driver = xrf.scene.getObjectByName(v.string) mesh.driver = xrf.scene.getObjectByName(v.string)
if( !driver ) return if( !mesh.driver ) return
xrf.addEventListener('render', (opts) => { mesh.onBeforeRender = function(){
let model = xrf.model let model = xrf.model
if( !model || !model.clock ) return if( !model || !model.clock ) return
mat.map.offset.x = driver.position.x this.material.map.offset.x = this.driver.position.x
mat.map.offset.y = driver.position.y this.material.map.offset.y = this.driver.position.y
mat.map.rotation = driver.position.z this.material.map.rotation = this.driver.position.z
}) }
} }
} }
} }

View file

@ -14,7 +14,9 @@ xrf.frag.t = function(v, opts){
mixer.setTime(time) mixer.setTime(time)
mixer.time = Math.abs(mixer.time) mixer.time = Math.abs(mixer.time)
mixer.update(0) // (forgetting) this little buddy costed me lots of time :] mixer.update(0) // (forgetting) this little buddy costed me lots of time :]
// (re)trigger audio xrf.model.animations.map( (anim) => {
anim.action.setLoop( v.z == 0 ? THREE.LoopOnce : THREE.LoopRepeat)
})
} }
// play animations // play animations

View file

@ -50,6 +50,7 @@ class XRF {
public var x:Float; // |vector| x,y,z| comma-separated | #pos=1,2,3 | public var x:Float; // |vector| x,y,z| comma-separated | #pos=1,2,3 |
public var y:Float; public var y:Float;
public var z:Float; public var z:Float;
public var w:Float;
public var color:String; // |string| color| FFFFFF (hex) | #fog=5m,FFAACC | public var color:String; // |string| color| FFFFFF (hex) | #fog=5m,FFAACC |
public var string:String; // |string| | | #q=-sun | public var string:String; // |string| | | #q=-sun |
public var int:Int; // |int | | [-]x[xxxxx] | #price:>=100 | public var int:Int; // |int | | [-]x[xxxxx] | #price:>=100 |
@ -107,6 +108,7 @@ class XRF {
if( xyz.length > 0 ) v.x = Std.parseFloat(xyz[0]); // 1. anything else will be treated as string-value if( xyz.length > 0 ) v.x = Std.parseFloat(xyz[0]); // 1. anything else will be treated as string-value
if( xyz.length > 1 ) v.y = Std.parseFloat(xyz[1]); // 1. incompatible value-types will be dropped / not used if( xyz.length > 1 ) v.y = Std.parseFloat(xyz[1]); // 1. incompatible value-types will be dropped / not used
if( xyz.length > 2 ) v.z = Std.parseFloat(xyz[2]); // if( xyz.length > 2 ) v.z = Std.parseFloat(xyz[2]); //
if( xyz.length > 3 ) v.w = Std.parseFloat(xyz[3]); //
} // > the xrfragment specification should stay simple enough } // > the xrfragment specification should stay simple enough
// > for anyone to write a parser using either regexes or grammar/lexers // > for anyone to write a parser using either regexes or grammar/lexers
if( isColor.match(str) ) v.color = str; // > therefore expressions/comprehensions are not supported (max wildcard/comparison operators for queries e.g.) if( isColor.match(str) ) v.color = str; // > therefore expressions/comprehensions are not supported (max wildcard/comparison operators for queries e.g.)