diff --git a/example/assets/axist.min.css b/example/assets/axist.min.css new file mode 100644 index 0000000..0b937f3 --- /dev/null +++ b/example/assets/axist.min.css @@ -0,0 +1 @@ +:root{--primary:#1524d9;--light-primary:#2332ea;--secondary:#ff2e88;--light-secondary:#fc77b1;--red:red;--black:#212529;--white:#fdfdfd;--dark-gray:#343334;--gray:#616060;--light-gray:#ccc;--lighter-gray:#f6f6f6;--font-sans-serif:system-ui,-apple-system,segoe ui,roboto,ubuntu,helvetica,cantarell,noto sans,sans-serif;--font-monospace:menlo,monaco,lucida console,liberation mono,dejavu sans mono,bitstream vera sans mono,courier new,monospace,serif;--boder-radius:.2rem}*{box-sizing:border-box;margin:0;padding:0;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-family:var(--font-sans-serif)}html{font-size:calc(16px + ((100vw - 600px) / 250));padding:0;text-decoration-skip-ink:"auto";line-height:1.953rem;margin:auto;min-height:100%;overflow-x:hidden;max-width:1140px}body{padding:0;margin:calc((100vh / 25) * 1.563) calc((100vw / 25) * 1.563);background-color:var(--white);color:var(--black);caret-color:var(--black);word-wrap:break-word}h1,h2,h3,h4,h5,h6{margin-bottom:1rem;margin-top:1em;font-weight:bold}h1{font-size:3.052rem;letter-spacing:-0.15rem;line-height:1}h2{font-size:2.441rem;letter-spacing:-0.12rem;line-height:1.2}h3{font-size:1.953rem;letter-spacing:-0.09rem;line-height:1.2}h4{font-size:1.563rem;letter-spacing:-0.06rem;line-height:1.3}h5{font-size:1.25rem;letter-spacing:-0.03rem;line-height:1.4}h6{font-size:1rem;letter-spacing:0;line-height:1.5}p{margin-bottom:1.563rem}p>*:last-child{margin-bottom:0}blockquote{border-left:1px solid var(--light-gray);padding:0 1rem;margin-bottom:1.563rem}a{color:var(--primary);text-decoration:none}@media(hover:hover){a:hover{text-decoration:underline}}small{font-size:.888rem}hr{border:0;height:2px;margin:1rem 0;background:var(--light-gray)}fieldset{border:0;padding:0;margin:0}label,legend{font-weight:bold;display:inline-block}input[type="email"],input[type="text"],input[type="number"],input[type="password"],input[type="date"],input[type="month"],input[type="week"],input[type="datetime"],input[type="datetime-local"],input[type="url"],input[type="search"],input[type="tel"],input:not([type]){display:block;padding:1rem;font-size:1rem;border:2px solid var(--lighter-gray);color:var(--black);appearance:none;border-radius:var(--boder-radius);background-color:var(--lighter-gray);-webkit-appearance:none;-moz-appearance:none}select{display:block;padding:1rem;font-size:1em;border:2px solid var(--lighter-gray);border-radius:var(--boder-radius);color:var(--black);background-color:var(--lighter-gray);appearance:none;-webkit-appearance:none;-moz-appearance:none}textarea{display:block;font-size:1rem;padding:1rem;line-height:1rem;color:var(--black);border-radius:var(--boder-radius);border:2px solid var(--lighter-gray);background-color:var(--lighter-gray);box-sizing:border-box;resize:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}input:focus,select:focus,textarea:focus{outline:0;border:2px solid var(--primary)}input:invalid,select:invalid,textarea:invalid{border:2px solid var(--red);outline:0}input[type="checkbox"]:hover,input[type="radio"]:hover{cursor:pointer}input[type="submit"],input[type="reset"],input[type="button"],button{padding:.5rem 1.25rem;font-size:1rem;border:0;border-radius:var(--boder-radius);color:var(--lighter-gray);height:2.5rem;background-color:var(--primary);-webkit-appearance:none;-moz-appearance:none;font-weight:bold}@media(hover:hover){input[type="reset"]:hover,input[type="submit"]:hover,input[type="button"]:hover,button:hover{cursor:pointer;background-color:var(--light-primary)}}button:focus-visible,input[type="submit"]:focus-visible,input[type="reset"]:focus-visible,input[type="button"]:focus-visible{border-color:var(--light-primary);outline:0}input[disabled],button:disabled{background-color:var(--gray)}table{width:100%;border-collapse:collapse;margin:1.75rem 0;font-variant-numeric:tabular-nums}th,td{vertical-align:top;border-bottom:2px solid var(--light-gray);line-height:15px;padding:15px}th{font-weight:bold;text-align:left;color:var(--dark-gray)}code,pre{font-family:var(--font-monospace);color:var(--dark-gray);background-color:var(--lighter-gray);font-size:.8rem;vertical-align:middle;overflow:scroll;border-radius:var(--boder-radius)}code{white-space:nowrap;vertical-align:baseline;padding:0 .328rem}pre{white-space:pre;margin:.262rem 0;padding:.64rem 1rem}pre::after{content:" "}ul{margin:0;padding:0 1px;list-style:disc outside;font-variant-numeric:tabular-nums}ol{list-style:decimal outside}ol,ul{padding-left:1rem;margin-bottom:1rem}li{list-style-position:inside}kbd{display:inline-block;padding:0 .328rem;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:.64rem;color:var(--dark-gray);vertical-align:middle;background-color:#f9f9f9;border:solid 1px #d8d8d8;border-bottom:solid 2px #a6a5a6;border-radius:5px}abbr{text-decoration:none;border-bottom:2px dashed #949394}@media(hover:hover){abbr:hover{cursor:help}} diff --git a/example/assets/style.css b/example/assets/style.css index 4351a71..4cbf9d8 100644 --- a/example/assets/style.css +++ b/example/assets/style.css @@ -19,11 +19,41 @@ font-size:12px; } -textarea, select, input { +textarea, select, input[type="text"] { background: linear-gradient( var(--lighter-gray), var(--gray) ) !important; } +input[type="submit"] { + color: var(--light-gray); +} + .title { border-bottom: 2px solid var(--secondary); padding-bottom: 20px; } + +#overlay{ + background: #FFF; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 48px; + box-shadow: 0px 0px 10px #0004; + opacity: 0.9; +} + +#overlay .logo{ + width: 92px; + position: absolute; + top: 7px; + left: 93px; +} + +#overlay > input[type="submit"]{ + height: 32px; + font-size: 14px; + position: absolute; + right: 9px; + top: 8px; +} diff --git a/example/assets/utils.js b/example/assets/utils.js new file mode 100644 index 0000000..a30f44a --- /dev/null +++ b/example/assets/utils.js @@ -0,0 +1,21 @@ + +// contentLoaders = {".gltf" : () => .....} and so on + +export function loadFile(contentLoaders, multiple){ + return () => { + 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(); + } +} diff --git a/example/explorer.html b/example/explorer.html index faeb809..1d7636a 100644 --- a/example/explorer.html +++ b/example/explorer.html @@ -1,6 +1,6 @@ - + diff --git a/example/threejs/basic/index.html b/example/threejs/basic/index.html index 89600e6..8a56f16 100644 --- a/example/threejs/basic/index.html +++ b/example/threejs/basic/index.html @@ -4,9 +4,16 @@ three.js vr - sandbox + + +
+ + +
+ @@ -23,6 +30,7 @@ import * as THREE from 'three'; import xrfragment from './../../../dist/xrfragment.module.js'; + import { loadFile } from './../../assets/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'; @@ -57,7 +65,11 @@ let model; const loader = new GLTFLoader().setPath( './../../assets/') - loader.load( 'example1.gltf', function ( gltf ) { + let loadGLTF = function ( gltf ) { + if( model ){ + scene.remove(model) + //model.dispose() + } gltf.scene.position.y = 1.5 gltf.scene.position.z = -1 gltf.scene.scale.x = gltf.scene.scale.y = gltf.scene.scale.z = 1; @@ -105,7 +117,8 @@ render(); - }); + }; + loader.load( 'example1.gltf', loadGLTF ); //const torusGeometry = new THREE.TorusKnotGeometry( ...Object.values( parameters ) ); @@ -195,6 +208,12 @@ statsMesh.scale.setScalar( 2.5 ); group.add( statsMesh ); + let fileLoaders = loadFile({ + ".gltf": (file) => file.arrayBuffer().then( (data) => loader.parse( data, '', loadGLTF, console.error ) ), + ".glb": (file) => loader.parse( file.arrayBuffer(), '', loadGLTF, console.error ) + }) + document.querySelector("#overlay > input").addEventListener("click", fileLoaders ) + } function onWindowResize() { diff --git a/make b/make index e1eab73..98745e2 100755 --- a/make +++ b/make @@ -35,6 +35,11 @@ doc(){ src/xrfragment/Parser.hx > doc/RFC.md } +server(){ + test -f cert.pem || openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem + http-server -c-1 -S -C cert.pem . +} + build(){ try rm dist/* haxe build.hxml diff --git a/serve b/serve deleted file mode 100755 index e59f5c4..0000000 --- a/serve +++ /dev/null @@ -1,3 +0,0 @@ -#!/bin/bash -[[ ! -f cert.pem ]] && openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem -http-server -c-1 -S -C cert.pem .