lzy
/
threepipe
Beobachten 1
Favorisieren 0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

Fix in code previewer

master
Palash Bansal vor 1 Jahr
Ursprung
2585c0fb57
Commit
1410e84784
Es ist kein Account mit der E-Mail-Adresse des Committers verbunden
4 geänderte Dateien mit 45 neuen und 22 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 14
    8
      examples/examples-utils/simple-code-preview.mjs
  2. 6
    1
      examples/html-js-sample/index.html
  3. 25
    12
      examples/index.html
  4. 0
    1
      examples/splat-load/index.html

+ 14
- 8
examples/examples-utils/simple-code-preview.mjs Datei anzeigen

const css = exampleStyle ? exampleStyle.textContent : '' const css = exampleStyle ? exampleStyle.textContent : ''
const importMap = document.querySelector('script[type="importmap"]') const importMap = document.querySelector('script[type="importmap"]')
const imports = importMap ? JSON.parse(importMap.textContent||'{}').imports||{} : {} const imports = importMap ? JSON.parse(importMap.textContent||'{}').imports||{} : {}
Object.keys(imports).forEach((k)=>(k === 'threepipe' || k.startsWith('@threepipe/')) ? (imports[k] = 'https://esm.sh/'+k) : '') // required for codepen to work. this is done because plugins refer to threepipe as esm
Object.keys(imports).forEach((k)=>(k === 'threepipe' || k.startsWith('@threepipe/')) ? (imports[k] = 'https://unpkg.com/'+k+'/dist/index.mjs') : '') // required for codepen to work. this is done because plugins refer to threepipe as esm
Object.entries(imports).forEach(([k,v])=>imports[k] = v.replace(/^\.\/\.\.\/\.\.\//, rootPath)) // ./../../ -> rootPath Object.entries(imports).forEach(([k,v])=>imports[k] = v.replace(/^\.\/\.\.\/\.\.\//, rootPath)) // ./../../ -> rootPath


function replaceImports(code) {
for (const [name, link] of Object.entries(imports)) code = code.replaceAll(` from '${name}'`, ` from '${link}'`)
return code
.replaceAll(` from '../../`, ` from '${rootPath}`)
.replaceAll(` from '../`, ` from '${rootPath+examplePath}`)
}
// function replaceImports(code) {
// for (const [name, link] of Object.entries(imports)) code = code.replaceAll(` from '${name}'`, ` from '${link}'`)
// return code
// .replaceAll(` from '../../`, ` from '${rootPath}`)
// .replaceAll(` from '../`, ` from '${rootPath+examplePath}`)
// }
setupCodePreview( setupCodePreview(
document.querySelector('.code-preview-container') || document.getElementById('canvas-container') || document.body, document.querySelector('.code-preview-container') || document.getElementById('canvas-container') || document.body,
scripts, scripts,
scripts.map(s=>s.textContent ? 'js' : s.split('.').pop()), // title scripts.map(s=>s.textContent ? 'js' : s.split('.').pop()), // title
scripts.map(s=>(typeof s === 'string' && s.endsWith('.js')) ? s : (codePath+examplePath+window.location.pathname.split('/examples/').pop().replace('index.html', '')+(s.textContent ? 'index.html' : s))), // todo: github link scripts.map(s=>(typeof s === 'string' && s.endsWith('.js')) ? s : (codePath+examplePath+window.location.pathname.split('/examples/').pop().replace('index.html', '')+(s.textContent ? 'index.html' : s))), // todo: github link
(c) => '// Threepipe example: ' + window.location.href + '\n' + replaceImports(c),
(c) => '// Threepipe example: ' + window.location.href + '\n' + (c),
{ {
title: 'ThreePipe: ' + document.title, title: 'ThreePipe: ' + document.title,
css, css,
}, },
`
<!-- 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>
<script type="importmap">${JSON.stringify({imports}, null, 2)}</script>
`
); );

+ 6
- 1
examples/html-js-sample/index.html Datei anzeigen

</head> </head>
<body> <body>
<canvas id="three-canvas" style="width: 800px; height: 600px;"></canvas> <canvas id="three-canvas" style="width: 800px; height: 600px;"></canvas>
<!--<script src="https://unpkg.com/threepipe"></script>-->
<script src="./../../dist/index.js"></script>
<script id="example-script" type="module" data-scripts="./index.html"> <script id="example-script" type="module" data-scripts="./index.html">
const {ThreeViewer, LoadingScreenPlugin} = threepipe
// or
// import {ThreeViewer, LoadingScreenPlugin} from 'threepipe' // if using import maps
// import {ThreeViewer, LoadingScreenPlugin} from './../../dist/index.mjs'
// import {ThreeViewer, LoadingScreenPlugin} from 'https://threepipe.org/dist/index.mjs' // import {ThreeViewer, LoadingScreenPlugin} from 'https://threepipe.org/dist/index.mjs'
import {ThreeViewer, LoadingScreenPlugin} from './../../dist/index.mjs'


const viewer = new ThreeViewer({canvas: document.getElementById('three-canvas')}) const viewer = new ThreeViewer({canvas: document.getElementById('three-canvas')})



+ 25
- 12
examples/index.html Datei anzeigen

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
} }


:root {
--primary-color: #58a6ff;
//--primary-color: #ccdef5;
//--primary-color: #ec630a;
--secondary-color: #ec630a;
//--background-color: #1a1a1c;
--background-color: #1B1B1F;
//--text-color: #bbb;
--text-color: #DFDFD6;
--text-color-accent: #eee;
--text-color-hover: #fff;
}

.root-container { .root-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
right: 0.5rem; right: 0.5rem;
font-size: 1.75rem; font-size: 1.75rem;
padding: 0.5rem; padding: 0.5rem;
color: #bbb;
color: var(--text-color);
} }


.hamburger:hover { .hamburger:hover {
color: #fff;
color: var(--text-color-hover);
} }


.sidebar { .sidebar {
max-width: min(320px, 30%); max-width: min(320px, 30%);
height: 100%; height: 100%;
background: #1a1a1c;
color: #bbb;
background: var(--background-color);
color: var(--text-color);
padding: 1rem 1rem; padding: 1rem 1rem;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
} }


.sidebar h1 a { .sidebar h1 a {
color: #58a6ff;
color: var(--secondary-color);
text-decoration: none; text-decoration: none;
} }


.sidebar h1 a:hover { .sidebar h1 a:hover {
color: #eee;
color: var(--text-color-accent);
} }


.sidebar h2 { .sidebar h2 {
} }


.sidebar ul li a { .sidebar ul li a {
color: #58a6ff;
color: var(--primary-color);
text-underline-offset: 0.25rem; text-underline-offset: 0.25rem;
text-decoration: none; text-decoration: none;
transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out;
} }


.sidebar ul li a:hover { .sidebar ul li a:hover {
color: #eee;
color: var(--text-color-accent);
} }


.sidebar ul li a.selected { .sidebar ul li a.selected {
color: #fff;
color: var(--text-color-hover);
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }
left: 0; left: 0;
height: 100%; height: 100%;
width: 3.3rem; width: 3.3rem;
color: #58a6ff;
color: var(--primary-color);
font-size: 1.25rem; font-size: 1.25rem;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 0.5rem; padding: 0.5rem;
color: #bbb;
color: var(--text-color);
background: #1e1e20; background: #1e1e20;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
} }
.search-bar input:focus { .search-bar input:focus {
background: #2a2a2c; background: #2a2a2c;
color: #fff;
color: var(--text-color-hover);
outline: none; outline: none;
} }
.search-bar input::placeholder { .search-bar input::placeholder {

+ 0
- 1
examples/splat-load/index.html Datei anzeigen

"@threepipe/plugin-gaussian-splatting": "./../../plugins/gaussian-splatting/dist/index.mjs" "@threepipe/plugin-gaussian-splatting": "./../../plugins/gaussian-splatting/dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {

Verfassen Vorschau
Laden…
Abbrechen
Speichern