lzy
/
threepipe
關註 1
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

Fix in code previewer

master
Palash Bansal 1 年之前
父節點
2585c0fb57
當前提交
1410e84784
No account linked to committer's email address
共有 4 個文件被更改，包括 45 次插入 和 22 次删除
分割檢視 顯示文件統計
  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 查看文件

@@ -11,23 +11,29 @@ const exampleStyle = document.querySelector('#example-style')
const css = exampleStyle ? exampleStyle.textContent : ''
const importMap = document.querySelector('script[type="importmap"]')
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

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(
document.querySelector('.code-preview-container') || document.getElementById('canvas-container') || document.body,
scripts,
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
(c) => '// Threepipe example: ' + window.location.href + '\n' + replaceImports(c),
(c) => '// Threepipe example: ' + window.location.href + '\n' + (c),
{
title: 'ThreePipe: ' + document.title,
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 查看文件

@@ -16,9 +16,14 @@
</head>
<body>
<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">
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 './../../dist/index.mjs'

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


+ 25
- 12
examples/index.html 查看文件

@@ -14,6 +14,19 @@
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 {
display: flex;
flex-direction: row;
@@ -29,18 +42,18 @@
right: 0.5rem;
font-size: 1.75rem;
padding: 0.5rem;
color: #bbb;
color: var(--text-color);
}

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

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

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

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

.sidebar h2 {
@@ -86,18 +99,18 @@
}

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

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

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

+ 0
- 1
examples/splat-load/index.html 查看文件

@@ -15,7 +15,6 @@
"@threepipe/plugin-gaussian-splatting": "./../../plugins/gaussian-splatting/dist/index.mjs"
}
}

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

Write Preview
Loading…
取消
儲存