coderofsalvation
/
xrfragment
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed threejs compatibility + renamed threejs->three to help './make repos' generate repos from single source

This commit is contained in:
Leon van Kammen 2023-12-06 15:20:58 +01:00
parent b19301cea4
commit f3f2e9c75e
13 changed files with 13757 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

326
dist/xrfragment.aframe.all.js vendored
View File

@ -844,6 +844,7 @@ xrf.model = {}
xrf.mixers = []
xrf.init = ((init) => function(opts){
console.log("add #debug to URL to see XR Fragment debuglog")
let scene = new opts.THREE.Group()
opts.scene.add(scene)
opts.scene = scene
@ -1413,7 +1414,7 @@ xrf.addEventListener('parseModel', (opts) => {
mixer.actions.map( (action) => {
if( mixer.loop.timeStart != undefined ){
action.time = mixer.loop.timeStart
action.setLoop( THREE.LoopOnce, )
action.setLoop( xrf.THREE.LoopOnce, )
action.timeScale = mixer.timeScale
action.enabled = true
if( t.x != 0 ){
@ -2072,9 +2073,9 @@ xrf.portalNonEuclidian = function(opts){
stencilRef: xrf.portalNonEuclidian.stencilRef,
needUpdate: false,
stencilObject: false,
cameraDirection: new THREE.Vector3(),
cameraPosition: new THREE.Vector3(),
raycaster: new THREE.Raycaster(),
cameraDirection: new xrf.THREE.Vector3(),
cameraPosition: new xrf.THREE.Vector3(),
raycaster: new xrf.THREE.Raycaster(),
isLocal: opts.isLocal,
isLens: false,
isInside: false,
@ -2303,6 +2304,323 @@ xrf.addEventListener('t', (opts) => {
let t = opts.frag.t
xrf.scene.traverse( (n) => n.video && (n.video.playXRF(t)) )
})
// contentLoaders = {".gltf" : () => .....} and so on
function loadFile(contentLoaders, multiple){
return () => {
window.notify("if you're on Meta browser, file-uploads might be disabled")
let input = document.createElement('input');
input.type = 'file';
input.multiple = multiple;
input.accept = Object.keys(contentLoaders).join(",");
input.onchange = () => {
let files = Array.from(input.files);
let file = files.slice ? files[0] : files
for( var i in contentLoaders ){
let r = new RegExp('\\'+i+'$')
if( file.name.match(r) ) return contentLoaders[i](file)
}
alert(file.name+" is not supported")
};
input.click();
}
}
function setupConsole(el){
if( !el ) return setTimeout( () => setupConsole( $('.lil-gui') ),200 )
let $console = document.createElement('textarea')
$console.style.position = 'absolute'
$console.style.display = 'block'
$console.style.zIndex = 2000;
$console.style.background = "transparent !important"
$console.style.pointerEvents = 'none'
$console.style.top = '70px'
$console.style.padding = '10px'
$console.style.margin = '10px'
$console.style.background = '#000'
$console.style.left = $console.style.right = $console.style.bottom = 0;
$console.style.color = '#A6F';
$console.style.fontSize = '10px';
$console.style.fontFamily = 'Courier'
$console.style.border = '0'
$console.innerHTML = "XRFRAGMENT CONSOLE OUTPUT:\n"
el.appendChild($console)
console.log = ( (log) => function(){
let str = ([...arguments]).join(" ")
let s = str;
log(s)
let lines = String($console.innerHTML + "\n"+s).split("\n")
while( lines.length > 200 ) lines.shift()
$console.innerHTML = lines.join("\n")
$console.scrollTop = $console.scrollHeight;
})(console.log.bind(console))
}
function setupUrlBar(el,XRF){
let inIframe = window.location !== window.parent.location
let ids = ['#overlay','a#embed','a#source','a#model','#qrcode']
let showButtons = () => {
ids.map( (i) => $(i).style.display = 'block' )
$('a#more').style.display = 'none'
if( inIframe ) $('#uri').style.display = 'block'
}
$('a#more').addEventListener('click', () => showButtons() )
XRF.addEventListener('hash', () => reflectUrl() )
const reflectUrl = window.reflectUrl = (url) => {
el.value = url || document.location.search.substr(1) + document.location.hash
let QR = window.QR
QR.canvas = document.getElementById('qrcode')
QR.draw( document.location.href, QR.canvas )
}
reflectUrl()
}
function SnackBar(userOptions) {
var snackbar = this || (window.snackbar = {});
var _Interval;
var _Message;
var _Element;
var _Container;
var _OptionDefaults = {
message: "Operation performed successfully.",
dismissible: true,
timeout: 7000,
status: ""
}
var _Options = _OptionDefaults;
function _Create() {
let _Containers = [ ...document.querySelectorAll(".js-snackbar-container") ]
_Containers.map( (c) => c.remove() )
_Container = null
if (!_Container) {
// need to create a new container for notifications
_Container = document.createElement("div");
_Container.classList.add("js-snackbar-container");
document.body.appendChild(_Container);
}
_Container.innerHTML = ''
_Element = document.createElement("div");
_Element.classList.add("js-snackbar__wrapper");
let innerSnack = document.createElement("div");
innerSnack.classList.add("js-snackbar", "js-snackbar--show");
if (_Options.status) {
_Options.status = _Options.status.toLowerCase().trim();
let status = document.createElement("span");
status.classList.add("js-snackbar__status");
if (_Options.status === "success" || _Options.status === "green") {
status.classList.add("js-snackbar--success");
}
else if (_Options.status === "warning" || _Options.status === "alert" || _Options.status === "orange") {
status.classList.add("js-snackbar--warning");
}
else if (_Options.status === "danger" || _Options.status === "error" || _Options.status === "red") {
status.classList.add("js-snackbar--danger");
}
else {
status.classList.add("js-snackbar--info");
}
innerSnack.appendChild(status);
}
_Message = document.createElement("span");
_Message.classList.add("js-snackbar__message");
_Message.innerHTML = _Options.message;
innerSnack.appendChild(_Message);
if (_Options.dismissible) {
let closeBtn = document.createElement("span");
closeBtn.classList.add("js-snackbar__close");
closeBtn.innerText = "\u00D7";
closeBtn.onclick = snackbar.Close;
innerSnack.appendChild(closeBtn);
}
_Element.style.height = "0px";
_Element.style.opacity = "0";
_Element.style.marginTop = "0px";
_Element.style.marginBottom = "0px";
_Element.appendChild(innerSnack);
_Container.appendChild(_Element);
if (_Options.timeout !== false) {
_Interval = setTimeout(snackbar.Close, _Options.timeout);
}
}
var _ConfigureDefaults = function() {
// if no options given, revert to default
if (userOptions === undefined) {
return;
}
if (userOptions.message !== undefined) {
_Options.message = userOptions.message;
}
if (userOptions.dismissible !== undefined) {
if (typeof (userOptions.dismissible) === "string") {
_Options.dismissible = (userOptions.dismissible === "true");
}
else if (typeof (userOptions.dismissible) === "boolean") {
_Options.dismissible = userOptions.dismissible;
}
else {
console.debug("Invalid option provided for 'dismissable' [" + userOptions.dismissible + "] is of type " + (typeof userOptions.dismissible));
}
}
if (userOptions.timeout !== undefined) {
if (typeof (userOptions.timeout) === "boolean" && userOptions.timeout === false) {
_Options.timeout = false;
}
else if (typeof (userOptions.timeout) === "string") {
_Options.timeout = parseInt(userOptions.timeout);
}
if (typeof (userOptions.timeout) === "number") {
if (userOptions.timeout === Infinity) {
_Options.timeout = false;
}
else if (userOptions.timeout >= 0) {
_Options.timeout = userOptions.timeout;
}
else {
console.debug("Invalid timeout entered. Must be greater than or equal to 0.");
}
_Options.timeout = userOptions.timeout;
}
}
if (userOptions.status !== undefined) {
_Options.status = userOptions.status;
}
}
snackbar.Open = function() {
let contentHeight = _Element.firstElementChild.scrollHeight; // get the height of the content
_Element.style.height = contentHeight + "px";
_Element.style.opacity = 1;
_Element.style.marginTop = "5px";
_Element.style.marginBottom = "5px";
_Element.addEventListener("transitioned", function() {
_Element.removeEventListener("transitioned", arguments.callee);
_Element.style.height = null;
})
}
snackbar.Close = function () {
if (_Interval)
clearInterval(_Interval);
let snackbarHeight = _Element.scrollHeight; // get the auto height as a px value
let snackbarTransitions = _Element.style.transition;
_Element.style.transition = "";
requestAnimationFrame(function() {
_Element.style.height = snackbarHeight + "px"; // set the auto height to the px height
_Element.style.opacity = 1;
_Element.style.marginTop = "0px";
_Element.style.marginBottom = "0px";
_Element.style.transition = snackbarTransitions
requestAnimationFrame(function() {
_Element.style.height = "0px";
_Element.style.opacity = 0;
})
});
setTimeout(function() {
try { _Container.removeChild(_Element); } catch (e) { }
}, 1000);
};
_ConfigureDefaults();
_Create();
snackbar.Open();
}
function notify(scope){
return function notify(str,opts){
str = String(str)
opts = opts || {}
if( !opts.status ){
opts.status = "info"
if( str.match(/error/g) ) opts.status = "danger"
if( str.match(/warning/g) ) opts.status = "warning"
}
opts = Object.assign({ message: str , status, timeout:4000 },opts)
SnackBar( opts )
}
}
function download(){
function fetchAndDownload(dataurl, filename) {
var a = document.createElement("a");
a.href = dataurl;
a.setAttribute("download", filename);
a.click();
return false;
}
let file = document.location.search.replace(/\?/,'')
fetchAndDownload( file, file )
}
function embed(){
// *TODO* this should be part of the XRF Threejs framework
if( typeof THREE == 'undefined' ) THREE = xrf.THREE
let radToDeg = THREE.MathUtils.radToDeg
let toDeg = (x) => x / (Math.PI / 180)
let camera = document.querySelector('[camera]').object3D.parent // *TODO* fix for threejs
// *TODO* add camera direction
let direction = new xrf.THREE.Vector3()
camera.getWorldDirection(direction)
const pitch = Math.asin(direction.y);
const yaw = Math.atan2(direction.x, direction.z);
const pitchInDegrees = pitch * 180 / Math.PI;
const yawInDegrees = yaw * 180 / Math.PI;
let lastPos = `pos=${camera.position.x.toFixed(2)},${camera.position.y.toFixed(2)},${camera.position.z.toFixed(2)}`
let newHash = document.location.hash.replace(/[&]?(pos|rot)=[0-9\.-]+,[0-9\.-]+,[0-9\.-]+/,'')
newHash += `&${lastPos}`
document.location.hash = newHash.replace(/&&/,'&')
.replace(/#&/,'')
// copy url to clipboard
var dummy = document.createElement('input'),
text = window.location.href;
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);
// End of *TODO*
window.notify(`<b>Link copied to clipboard!</b> ❤️<br>ps. to embed this experience in your website,<br>copy/paste the following into your HTML:<br><input type="text" value="&lt;iframe src='${document.location.href}'&gt;<br>&lt;/iframe&gt;" id="share"/>`,{timeout:10000})
}
window.AFRAME.registerComponent('xrf', {
schema: {
},

1122
dist/xrfragment.aframe.js vendored
View File

File diff suppressed because it is too large Load Diff

85
dist/xrfragment.all.js vendored Normal file
View File

@ -0,0 +1,85 @@
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
/*
* generated at $(date)
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/

12163
dist/xrfragment.module.js vendored
View File

File diff suppressed because it is too large Load Diff

9
dist/xrfragment.three.js vendored
View File

@ -843,6 +843,7 @@ xrf.model = {}
xrf.mixers = []
xrf.init = ((init) => function(opts){
console.log("add #debug to URL to see XR Fragment debuglog")
let scene = new opts.THREE.Group()
opts.scene.add(scene)
opts.scene = scene
@ -1412,7 +1413,7 @@ xrf.addEventListener('parseModel', (opts) => {
mixer.actions.map( (action) => {
if( mixer.loop.timeStart != undefined ){
action.time = mixer.loop.timeStart
action.setLoop( THREE.LoopOnce, )
action.setLoop( xrf.THREE.LoopOnce, )
action.timeScale = mixer.timeScale
action.enabled = true
if( t.x != 0 ){
@ -2071,9 +2072,9 @@ xrf.portalNonEuclidian = function(opts){
stencilRef: xrf.portalNonEuclidian.stencilRef,
needUpdate: false,
stencilObject: false,
cameraDirection: new THREE.Vector3(),
cameraPosition: new THREE.Vector3(),
raycaster: new THREE.Raycaster(),
cameraDirection: new xrf.THREE.Vector3(),
cameraPosition: new xrf.THREE.Vector3(),
raycaster: new xrf.THREE.Raycaster(),
isLocal: opts.isLocal,
isLens: false,
isInside: false,

9
dist/xrfragment.three.module.js vendored
View File

@ -843,6 +843,7 @@ xrf.model = {}
xrf.mixers = []
xrf.init = ((init) => function(opts){
console.log("add #debug to URL to see XR Fragment debuglog")
let scene = new opts.THREE.Group()
opts.scene.add(scene)
opts.scene = scene
@ -1412,7 +1413,7 @@ xrf.addEventListener('parseModel', (opts) => {
mixer.actions.map( (action) => {
if( mixer.loop.timeStart != undefined ){
action.time = mixer.loop.timeStart
action.setLoop( THREE.LoopOnce, )
action.setLoop( xrf.THREE.LoopOnce, )
action.timeScale = mixer.timeScale
action.enabled = true
if( t.x != 0 ){
@ -2071,9 +2072,9 @@ xrf.portalNonEuclidian = function(opts){
stencilRef: xrf.portalNonEuclidian.stencilRef,
needUpdate: false,
stencilObject: false,
cameraDirection: new THREE.Vector3(),
cameraPosition: new THREE.Vector3(),
raycaster: new THREE.Raycaster(),
cameraDirection: new xrf.THREE.Vector3(),
cameraPosition: new xrf.THREE.Vector3(),
raycaster: new xrf.THREE.Raycaster(),
isLocal: opts.isLocal,
isLens: false,
isInside: false,

10
example/aframe/sandbox/index.html
View File

@ -4,14 +4,12 @@
<title>AFRAME - xrfragment sandbox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./../../assets/css/axist.min.css" />
<link type="text/css" rel="stylesheet" href="./../../assets/css/style.css"/>
<script async src="./../../assets/js/alpine.min.js" defer></script>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js"></script>
<script src="./../../../dist/xrfragment.aframe.js"></script>
<script src="./../../assets/js/qr.js"></script>
<script src="./../../../dist/utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js"></script>
<link href="./../../assets/css/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="overlay" style="display:none">

BIN
example/assets/index.glb
View File

Binary file not shown.

24
example/three/sandbox/index.html
View File

@ -15,7 +15,6 @@
<input type="text" id="uri" value="" onchange="XRF.navigator.to( $('#uri').value )" style="display:none"/>
</div>
<!-- open AFRAME inspector: $('a-scene').components.inspector.openInspector() -->
<a class="btn-foot" id="source" target="_blank" href="https://github.com/coderofsalvation/xrfragment-helloworld">➕ clone project</a>
<a class="btn-foot" id="embed" target="_blank" onclick="embed()">🔗 share</a>
<a class="btn-foot" id="model" target="_blank" href="index.gltf">⬇️ scene</a>
@ -23,7 +22,6 @@
<textarea style="display:none"></textarea>
<canvas id="qrcode" style="display:none" width="300" height="300"></canvas>
<script async src="./../../assets/js/alpine.min.js"></script>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
@ -39,9 +37,9 @@
<script type="module">
import * as THREE from 'three';
import xrf from './../../../dist/xrfragment.three.module.js';
import xrf from "./../../../dist/xrfragment.three.module.js";
import { loadFile, setupConsole, setupUrlBar, notify } from './../../assets/js/utils.js';
import { loadFile, setupConsole, setupUrlBar, notify } from "./../../assets/js/utils.js";
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { Lensflare, LensflareElement } from 'three/addons/objects/Lensflare.js';
import { BoxLineGeometry } from 'three/addons/geometries/BoxLineGeometry.js';
@ -103,7 +101,6 @@
camera:cameraRig,
scene,
renderer,
debug: true,
loaders: { gltf: GLTFLoader, fbx: FBXLoader }, // which 3D assets (extensions) to check for XR fragments?
})
@ -181,23 +178,6 @@
setupConsole()
setupUrlBar( $('input#uri'), XRF )
// GUI
function onChange() {
renderer.toneMappingExposure = parameters.env;
}
const gui = new GUI( { width: 300 } );
gui.add( parameters, 'env', 0.2, 3.0, 0.1 ).onChange( onChange );
const mesh = new HTMLMesh( gui.domElement );
mesh.position.x = - 0.75;
mesh.position.y = 1.5;
mesh.position.z = 0.3;
mesh.rotation.y = Math.PI / 4;
mesh.scale.setScalar( 2 );
// Add stats.js
stats = new Stats();
stats.dom.style.width = '80px';

50
make
View File

@ -66,6 +66,7 @@ build(){
# add js module
cat dist/xrfragment.js >> dist/xrfragment.module.js
echo "export default xrfragment;" >> dist/xrfragment.module.js
# add THREE
cat dist/xrfragment.js \
src/3rd/js/*.js \
@ -75,16 +76,29 @@ build(){
src/3rd/js/three/util/*.js \
src/3rd/js/three/xrf/dynamic/*.js \
src/3rd/js/three/xrf/src/*.js > dist/xrfragment.three.js
# add THREE module
cat dist/xrfragment.three.js > dist/xrfragment.three.module.js
echo "export default xrf;" >> dist/xrfragment.three.module.js
# add AFRAME
cat dist/xrfragment.three.js \
src/3rd/js/aframe/*.js > dist/xrfragment.aframe.js
dist/utils.js \
src/3rd/js/aframe/*.js \
example/assets/js/qr.js > dist/xrfragment.aframe.js
# convert ESM to normal browser js
sed 's/export //g' example/assets/js/utils.js > dist/utils.js
# fat all-in-one standalone xrf release
test -f /tmp/xrf-aframe.js || {
wget "https://aframe.io/releases/1.5.0/aframe.min.js" -O /tmp/xrf-aframe.js
wget "https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js" -O /tmp/xrf-blink.js
for i in /tmp/xrf-*.js; do echo -e "\n" >> $i; done # add extra linebreak to prevent bundle issues
}
cat /tmp/xrf-*.js dist/xrfragment.aframe.js dist/utils.js > dist/xrfragment.aframe.all.js
# add license headers
for file in dist/xrfragment.{aframe,module,three,three.module}.js; do
for file in dist/xrfragment.{aframe,module,three,three.module,all}.js; do
awk 'BEGIN{
print "/*"
print " * generated at $(date)"
@ -95,6 +109,8 @@ build(){
}' > /tmp/tmp.js
mv /tmp/tmp.js $file
done
ls -la dist | grep js
return $ok
}
@ -103,5 +119,35 @@ build(){
test -z $1 || "$@"
}
repos(){
release_dir(){
slug=xrfragment-$1-helloworld
test -d ../$slug || git clone git@github.com:coderofsalvation/$slug.git ../$slug
pushd $(pwd)
cp example/assets/index.glb ../$2/index.glb
cat example/$1/sandbox/index.html | \
sed 's|href=".*/assets|href="https://xrfragment.org/example/assets|g' | \
sed 's|"\./.*/dist|"https://xrfragment.org/dist|g' | \
sed 's|"\./.*/assets|"https://xrfragment.org/example/assets|g' \
> ../$2/index.html
test -z $COMMIT || {
set -x; cd ../$slug ; set +x
git add index.html
git commit -m "update index.html to commit $(git log | awk '{ print $1; exit 0; }') from xrfragment-repo"
git push origin main
popd
}
echo " "
}
release_dir aframe xrfragment-aframe-helloworld aframe
release_dir three xrfragment-three-helloworld three.module
release_dir aframe xrfragment-helloworld aframe.all
# remove aframe reference
sed -i 's|<script src="https:\/\/aframe.*||g' ../xrfragment-helloworld/index.html
sed -i 's|<script src=".*blink-controls.*||g' ../xrfragment-helloworld/index.html
}
test -z $1 && build
test -z $1 || "$@"

1
src/3rd/js/three/index.js
View File

@ -3,6 +3,7 @@ xrf.model = {}
xrf.mixers = []
xrf.init = ((init) => function(opts){
console.log("add #debug to URL to see XR Fragment debuglog")
let scene = new opts.THREE.Group()
opts.scene.add(scene)
opts.scene = scene

6
src/3rd/js/three/xrf/src/non-euclidian.js
View File

@ -11,9 +11,9 @@ xrf.portalNonEuclidian = function(opts){
stencilRef: xrf.portalNonEuclidian.stencilRef,
needUpdate: false,
stencilObject: false,
cameraDirection: new THREE.Vector3(),
cameraPosition: new THREE.Vector3(),
raycaster: new THREE.Raycaster(),
cameraDirection: new xrf.THREE.Vector3(),
cameraPosition: new xrf.THREE.Vector3(),
raycaster: new xrf.THREE.Raycaster(),
isLocal: opts.isLocal,
isLens: false,
isInside: false,

2
src/3rd/js/three/xrf/t.js
View File

@ -74,7 +74,7 @@ xrf.addEventListener('parseModel', (opts) => {
mixer.actions.map( (action) => {
if( mixer.loop.timeStart != undefined ){
action.time = mixer.loop.timeStart
action.setLoop( THREE.LoopOnce, )
action.setLoop( xrf.THREE.LoopOnce, )
action.timeScale = mixer.timeScale
action.enabled = true
if( t.x != 0 ){