custom aframe build with extra loaders + cleanup
This commit is contained in:
parent
5131b4f99b
commit
77760a4dd1
|
|
@ -161,7 +161,7 @@ Below you can see how this translates back into good-old URLs:
|
|||
│ the soul of any URL: ://macro /meso ?micro #nano │
|
||||
│ │
|
||||
│ 2D URL: ://library.com /document ?search #chapter │
|
||||
│ │
|
||||
│ xrf:// │
|
||||
│ 4D URL: ://park.com /4Dscene.fbx ─> ?other.glb ─> #view ───> hashbus │
|
||||
│ │ #filter │ │
|
||||
│ │ #tag │ │
|
||||
|
|
@ -179,7 +179,7 @@ Below you can see how this translates back into good-old URLs:
|
|||
|
||||
```
|
||||
|
||||
> ?-linked and #-linked navigation are JUST one possible way to implement XR Fragments, to allow a Hypermediatic FeedbackLoop (HFL) between external and internal 4D navigation.
|
||||
> ?-linked and #-linked navigation are JUST one possible way to implement XR Fragments: the essential goal is to allow a Hypermediatic FeedbackLoop (HFL) between external and internal 4D navigation.
|
||||
|
||||
Traditional webbrowsers can become 4D document-ready by:
|
||||
|
||||
|
|
@ -190,16 +190,20 @@ Traditional webbrowsers can become 4D document-ready by:
|
|||
|
||||
XR Fragments itself are [hypermediatic](https://github.com/coderofsalvation/hypermediatic) and HTML-agnostic, though pseudo-XR Fragment browsers **can** be implemented on top of HTML/Javascript.
|
||||
|
||||
| principle | XR 4D URL | HTML 2D URL |
|
||||
|----------------------|-------------------------------------------------|---------------------------------------|
|
||||
| the XRWG | wordgraph (collapses 3D scene to tags) | Ctrl-F (find) |
|
||||
| the hashbus | hashtags alter camera/scene/object-projections | hashtags alter document positions |
|
||||
| src metadata | renders content and offers sourceportation | renders content |
|
||||
| href metadata | teleports to other XR document | jumps to other HTML document |
|
||||
| href metadata | triggers predefined view | Media fragments |
|
||||
| href metadata | triggers camera/scene/object/projections | n/a |
|
||||
| href metadata | draws visible connection(s) for XRWG 'tag' | n/a |
|
||||
| href metadata | filters certain (in)visible objects | n/a |
|
||||
| principle | XR 4D URL | HTML 2D URL |
|
||||
|-----------------------------|-------------------------------------------------|---------------------------------------|
|
||||
| the XRWG | wordgraph (collapses 3D scene to tags) | Ctrl-F (find) |
|
||||
| the hashbus | hashtags alter camera/scene/object-projections | hashtags alter document positions |
|
||||
| src metadata | renders content and offers sourceportation | renders content |
|
||||
| href metadata | teleports to other XR document | jumps to other HTML document |
|
||||
| href metadata | triggers predefined view | Media fragments |
|
||||
| href metadata | triggers camera/scene/object/projections | n/a |
|
||||
| href metadata | draws visible connection(s) for XRWG 'tag' | n/a |
|
||||
| href metadata | filters certain (in)visible objects | n/a |
|
||||
| href metadata | href="xrf://#-foo&bar" | href="javascript:hideFooAndShowBar()` |
|
||||
| | (this does not update topLevel URI) | (this is non-standard, non-hypermediatic) |
|
||||
|
||||
> An important aspect of HFL is that URI Fragments can be triggered without updating the top-level URI (default href-behaviour) thru their own 'bus' (`xrf://#.....`). This decoupling between navigation and interaction prevents non-standard things like (`href`:`javascript:dosomething()`).
|
||||
|
||||
# Conventions and Definitions
|
||||
|
||||
|
|
@ -234,7 +238,7 @@ That way, if the link gets shared, the XR Fragments implementation at `https://m
|
|||
|-------------------|------------|--------------------|----------------------------------------------------------------------|
|
||||
| `#pos` | vector3 | `#pos=0.5,0,0` | positions camera (or XR floor) to xyz-coord 0.5,0,0, |
|
||||
| `#rot` | vector3 | `#rot=0,90,0` | rotates camera to xyz-coord 0.5,0,0 |
|
||||
| [W3C Media Fragments](https://www.w3.org/TR/media-frags/) | [media fragment](#media%20fragments%20and%20datatypes) | `#t=0,2&loop` | play (and loop) 3D animation from 0 seconds till 2 seconds|
|
||||
| [Media Fragments](https://www.w3.org/TR/media-frags/) | [media fragment](#media%20fragments%20and%20datatypes) | `#t=0,2&loop` | play (and loop) 3D animation from 0 seconds till 2 seconds|
|
||||
| | | | but can also crop, animate & configure uv-coordinates/shader uniforms |
|
||||
|
||||
## List of metadata for 3D nodes
|
||||
|
|
|
|||
18
make
18
make
|
|
@ -52,6 +52,18 @@ server(){
|
|||
|
||||
build(){
|
||||
|
||||
aframe(){
|
||||
test -d src/3rd/js/aframe/build/aframe || git clone https://github.com/aframevr/aframe src/3rd/js/aframe/build/aframe --depth=1
|
||||
curdir=$(pwd)
|
||||
cd src/3rd/js/aframe/build && cp three.module.js aframe/src/lib/. # override to add extra loaders like fbx/collada e.g.
|
||||
cd aframe && npm run dist
|
||||
cd "$curdir"
|
||||
cp src/3rd/js/aframe/build/aframe/dist/aframe-master.min.js dist/aframe.min.js
|
||||
test -f dist/aframe-blink-controls.min.js || {
|
||||
wget "https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js" -O dist/aframe-blink-controls.min.js
|
||||
}
|
||||
}
|
||||
|
||||
parser(){
|
||||
try rm dist/xrfragment.*
|
||||
haxe build.hxml || exit 1
|
||||
|
|
@ -92,12 +104,6 @@ build(){
|
|||
jscat src/3rd/js/plugin/matrix/{matrix-crdt,matrix}.js > dist/xrfragment.plugin.matrix.js
|
||||
jscat src/3rd/js/plugin/p2p/{trystero-torrent.min,trystero}.js > dist/xrfragment.plugin.p2p.js
|
||||
|
||||
# fat all-in-one standalone xrf release
|
||||
test -f dist/aframe.min.js || {
|
||||
wget "https://aframe.io/releases/1.5.0/aframe.min.js" -O dist/aframe.min.js
|
||||
wget "https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js" -O dist/aframe-blink-controls.min.js
|
||||
}
|
||||
|
||||
cat dist/aframe.min.js dist/aframe-blink-controls.min.js dist/xrfragment.aframe.js > dist/xrfragment.aframe.all.js
|
||||
|
||||
# add license headers
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
import * as SUPER_THREE from 'super-three';
|
||||
import { DRACOLoader } from 'super-three/examples/jsm/loaders/DRACOLoader';
|
||||
import { GLTFLoader } from 'super-three/examples/jsm/loaders/GLTFLoader';
|
||||
import { KTX2Loader } from 'super-three/examples/jsm/loaders/KTX2Loader';
|
||||
import { OBB } from 'super-three/addons/math/OBB.js';
|
||||
import { OBJLoader } from 'super-three/examples/jsm/loaders/OBJLoader';
|
||||
import { FBXLoader } from 'super-three/examples/jsm/loaders/FBXLoader';
|
||||
import { USDZLoader } from 'super-three/examples/jsm/loaders/USDZLoader';
|
||||
import { ColladaLoader } from 'super-three/examples/jsm/loaders/ColladaLoader';
|
||||
import { MTLLoader } from 'super-three/examples/jsm/loaders/MTLLoader';
|
||||
import * as BufferGeometryUtils from 'super-three/examples/jsm/utils/BufferGeometryUtils';
|
||||
import { LightProbeGenerator } from 'super-three/examples/jsm/lights/LightProbeGenerator';
|
||||
|
||||
var THREE = window.THREE = SUPER_THREE;
|
||||
|
||||
// TODO: Eventually include these only if they are needed by a component.
|
||||
require('../../vendor/DeviceOrientationControls'); // THREE.DeviceOrientationControls
|
||||
THREE.DRACOLoader = DRACOLoader;
|
||||
THREE.GLTFLoader = GLTFLoader;
|
||||
THREE.KTX2Loader = KTX2Loader;
|
||||
THREE.OBJLoader = OBJLoader;
|
||||
THREE.MTLLoader = MTLLoader;
|
||||
THREE.FBXLoader = FBXLoader;
|
||||
THREE.USDZLoader = USDZLoader;
|
||||
THREE.ColladaLoader = ColladaLoader;
|
||||
THREE.OBB = OBB;
|
||||
THREE.BufferGeometryUtils = BufferGeometryUtils;
|
||||
THREE.LightProbeGenerator = LightProbeGenerator;
|
||||
|
||||
export default THREE;
|
||||
|
|
@ -3,13 +3,13 @@ window.AFRAME.registerComponent('xrf', {
|
|||
http: { type:'string'},
|
||||
https: { type:'string'},
|
||||
},
|
||||
init: function () {
|
||||
init: async function () {
|
||||
|
||||
// override this.data when URL has passed (`://....com/?https://foo.com/index.glb` e.g.)
|
||||
if( typeof this.data == "string" ){
|
||||
let searchIsUri = document.location.search &&
|
||||
!document.location.search.match(/=/) &&
|
||||
document.location.search.match("://")
|
||||
document.location.search.match("/")
|
||||
if( searchIsUri || document.location.hash.length > 1 ){ // override url
|
||||
this.data = `${document.location.search.substr(1)}${document.location.hash}`
|
||||
}
|
||||
|
|
@ -32,8 +32,11 @@ window.AFRAME.registerComponent('xrf', {
|
|||
renderer: aScene.renderer,
|
||||
loaders: {
|
||||
gltf: THREE.GLTFLoader, // which 3D assets (exts) to check for XR fragments?
|
||||
glb: THREE.GLTFLoader,
|
||||
obj: THREE.OBJLoader
|
||||
glb: THREE.GLTFLoader,
|
||||
obj: THREE.OBJLoader,
|
||||
fbx: THREE.FBXLoader,
|
||||
usdz: THREE.USDZLoader,
|
||||
col: THREE.ColladaLoader
|
||||
}
|
||||
})
|
||||
aScene.renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@ xrf.frag.src.type['fbx'] = function( url, opts ){
|
|||
let {urlObj,dir,file,hash,ext} = xrf.parseUrl(url)
|
||||
let loader
|
||||
|
||||
//let {THREE} = await import('https://unpkg.com/three@0.161.0/build/three.module.js')
|
||||
//let { FBXLoader } = await import('three/addons/loaders/FBXLoader.js')
|
||||
let {THREE} = await import('https://unpkg.com/three@0.161.0/build/three.module.js')
|
||||
let { FBXLoader } = await import('three/addons/loaders/FBXLoader.js')
|
||||
debugger
|
||||
|
||||
//const Loader = xrf.loaders[ext]
|
||||
//if( !Loader ) throw 'xrfragment: no loader passed to xrfragment for extension .'+ext
|
||||
|
|
|
|||
|
|
@ -164,18 +164,14 @@ xrf.portalNonEuclidian.setMaterial = function(mesh){
|
|||
mesh.material.colorWrite = false;
|
||||
mesh.material.stencilWrite = true;
|
||||
mesh.material.stencilRef = xrf.portalNonEuclidian.stencilRef;
|
||||
// mesh.renderOrder = 0;//xrf.portalNonEuclidian.stencilRef;
|
||||
mesh.material.stencilFunc = xrf.THREE.AlwaysStencilFunc;
|
||||
mesh.material.stencilZPass = xrf.THREE.ReplaceStencilOp;
|
||||
mesh.material.stencilZFail = xrf.THREE.ReplaceStencilOp;
|
||||
//n.material.depthFunc = stencilRef > 0 ? xrf.THREE.AlwaysDepth : xrf.THREE.LessEqualDepth
|
||||
//mesh.material.depthTest = false;
|
||||
return mesh
|
||||
}
|
||||
|
||||
xrf.addEventListener('parseModel',(opts) => {
|
||||
const scene = opts.model.scene
|
||||
//for( let i in scene.children ) scene.children[i].renderOrder = 10 // render outer layers last (worldspheres e.g.)
|
||||
})
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../dist
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
xrfragment = require('./dist/xrfragment.js').xrfragment
|
||||
|
||||
console.dir(xrfragment.URI.parse("#pos=foo"))
|
||||
console.log("hello world")
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
from dist import xrfragment
|
||||
|
||||
frag = xrfragment.xrfragment_XRF.toDict( xrfragment.xrfragment_URI.parse("#pos=foo",None) )
|
||||
|
||||
print("hello world")
|
||||
print( frag.keys() )
|
||||
Loading…
Reference in New Issue