lzy
/
threepipe
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

Add basic tweakpane-editor and example

master
Palash Bansal il y a 2 ans
Parent
28d12e9385
révision
e609ed4ec9
Aucun compte lié à l'adresse e-mail de l'auteur
20 fichiers modifiés avec 1120 ajouts et 65 suppressions
Vue unifiée Afficher les stats Diff
  1. 1
    1
      .eslintrc.cjs
  2. 4
    0
      examples/index.html
  3. 2
    1
      examples/tsconfig.build.json
  4. 1
    0
      examples/tsconfig.json
  5. 37
    0
      examples/tweakpane-editor/index.html
  6. 73
    0
      examples/tweakpane-editor/script.ts
  7. 127
    48
      package-lock.json
  8. 17
    14
      package.json
  9. 56
    0
      plugins/ui/tweakpane-editor/package-lock.json
  10. 15
    0
      plugins/ui/tweakpane-editor/package.json
  11. 92
    0
      plugins/ui/tweakpane-editor/rollup.config.mjs
  12. 301
    0
      plugins/ui/tweakpane-editor/src/TweakpaneEditorPlugin.css
  13. 107
    0
      plugins/ui/tweakpane-editor/src/TweakpaneEditorPlugin.ts
  14. 36
    0
      plugins/ui/tweakpane-editor/src/global.d.ts
  15. 34
    0
      plugins/ui/tweakpane-editor/src/icons.ts
  16. 1
    0
      plugins/ui/tweakpane-editor/src/index.ts
  17. 21
    0
      plugins/ui/tweakpane-editor/src/logo.ts
  18. 150
    0
      plugins/ui/tweakpane-editor/src/util-buttons.ts
  19. 44
    0
      plugins/ui/tweakpane-editor/tsconfig.json
  20. 1
    1
      tsconfig.json

+ 1
- 1
.eslintrc.cjs Voir le fichier

'parserOptions': { 'parserOptions': {
'ecmaVersion': 2021, // Allows for the parsing of modern ECMAScript features 'ecmaVersion': 2021, // Allows for the parsing of modern ECMAScript features
'sourceType': 'module', // Allows for the use of imports 'sourceType': 'module', // Allows for the use of imports
'project': ['./tsconfig.json', './examples/tsconfig.json'],
'project': ['./tsconfig.json', './examples/tsconfig.json', './plugins/ui/tweakpane-editor/tsconfig.json'],
'tsconfigRootDir': './', 'tsconfigRootDir': './',
}, },
'extends': [ 'extends': [

+ 4
- 0
examples/index.html Voir le fichier

<li><a href="./scene-uiconfig/">Scene UI </a></li> <li><a href="./scene-uiconfig/">Scene UI </a></li>
<li><a href="./viewer-uiconfig/">Viewer UI </a></li> <li><a href="./viewer-uiconfig/">Viewer UI </a></li>
</ul> </ul>
<h2 class="category">Editors</h2>
<ul>
<li><a href="./tweakpane-editor/">Tweakpane Editor </a></li>
</ul>
<h2 class="category">Utils</h2> <h2 class="category">Utils</h2>
<ul> <ul>
<li><a href="./render-target-preview/">Render Target Preview Plugin </a></li> <li><a href="./render-target-preview/">Render Target Preview Plugin </a></li>

+ 2
- 1
examples/tsconfig.build.json Voir le fichier

"extends": "./tsconfig.json", "extends": "./tsconfig.json",
"compilerOptions": { "compilerOptions": {
"paths": { "paths": {
"threepipe": ["../dist/"]
"threepipe": ["../dist/"],
"@threepipe/plugins/*": ["../plugins/*/dist"]
}, },
}, },
} }

+ 1
- 0
examples/tsconfig.json Voir le fichier

"emitDecoratorMetadata": true, "emitDecoratorMetadata": true,
"sourceMap": false, "sourceMap": false,
"paths": { "paths": {
"@threepipe/plugins/*": ["../plugins/*/src"],
"threepipe": ["../src/"] "threepipe": ["../src/"]
}, },
"target": "ES2020", "target": "ES2020",

+ 37
- 0
examples/tweakpane-editor/index.html Voir le fichier

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tweakpane Editor</title>
<!-- 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>

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/repalash/gilroy-free-webfont@master/Gilroy-Extrabold.css" rel="stylesheet">

<script type="importmap">
{
"imports": {
"threepipe": "./../../dist/index.mjs",
"@threepipe/plugins/ui/tweakpane-editor": "./../../plugins/ui/tweakpane-editor/dist/index.mjs",
"uiconfig-tweakpane": "https://unpkg.com/uiconfig-tweakpane@latest/dist/index.mjs"
}
}

</script>
<style id="example-style">
html {
display: block;
}
</style>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 73
- 0
examples/tweakpane-editor/script.ts Voir le fichier

import {
_testFinish,
AViewerPluginSync,
DepthBufferPlugin,
DropzonePlugin,
FullScreenPlugin,
HalfFloatType,
IObject3D,
NormalBufferPlugin,
RenderTargetPreviewPlugin,
ThreeViewer,
TweakpaneUiPlugin,
UnsignedByteType,
} from 'threepipe'
import {TweakpaneEditorPlugin} from '@threepipe/plugins/ui/tweakpane-editor'

class ViewerUiConfig extends AViewerPluginSync<''> {
static readonly PluginType = 'ViewerUiConfig'
enabled = true
toJSON: any = undefined
constructor(viewer: ThreeViewer) {
super()
this._viewer = viewer
this.uiConfig = viewer.uiConfig
}
}
async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: false,
dropzone: {
addOptions: {
clearSceneObjects: false,
},
},
})

viewer.addPluginSync(new TweakpaneUiPlugin(true))
const editor = viewer.addPluginSync(new TweakpaneEditorPlugin())

await viewer.addPlugins([
new ViewerUiConfig(viewer),
new DepthBufferPlugin(UnsignedByteType, false, false),
new NormalBufferPlugin(HalfFloatType, false),
new RenderTargetPreviewPlugin(false),
])

const rt = viewer.getOrAddPluginSync(RenderTargetPreviewPlugin)
rt.addTarget(viewer.getPlugin(DepthBufferPlugin)?.target, 'depth', false, false, false)
rt.addTarget(viewer.getPlugin(NormalBufferPlugin)?.target, 'normal', false, true, false)

editor.loadPlugins({
['Viewer']: [ViewerUiConfig, DropzonePlugin, FullScreenPlugin],
['GBuffer']: [DepthBufferPlugin, NormalBufferPlugin],
['Debug']: [RenderTargetPreviewPlugin],
})

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
setBackground: true,
})
await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
autoCenter: true,
autoScale: true,
})

// const model = result?.getObjectByName('node_damagedHelmet_-6514')
// const config = model?.uiConfig
// if (config) ui.appendChild(config)

}

init().then(_testFinish)

+ 127
- 48
package-lock.json Voir le fichier

{ {
"name": "threepipe", "name": "threepipe",
"version": "0.0.7",
"version": "0.0.8-dev.1",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "threepipe", "name": "threepipe",
"version": "0.0.7",
"version": "0.0.8-dev.1",
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1011/package.tgz", "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1011/package.tgz",
"@types/webxr": "^0.5.1", "@types/webxr": "^0.5.1",
"@types/wicg-file-system-access": "^2020.9.5", "@types/wicg-file-system-access": "^2020.9.5",
"ts-browser-helpers": "^0.6.0"
"ts-browser-helpers": "^0.7.0",
"uiconfig-tweakpane": "^0.0.4"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-commonjs": "^25.0.0", "@rollup/plugin-commonjs": "^25.0.0",
"@rollup/plugin-node-resolve": "^15.0.2", "@rollup/plugin-node-resolve": "^15.0.2",
"@rollup/plugin-terser": "^0.4.3", "@rollup/plugin-terser": "^0.4.3",
"@rollup/plugin-typescript": "^11.1.1", "@rollup/plugin-typescript": "^11.1.1",
"@tweakpane/core": "^1.1.8",
"@tweakpane/core": "1.1.8",
"@types/stats.js": "^0.17.0", "@types/stats.js": "^0.17.0",
"@typescript-eslint/eslint-plugin": "^5.59.7", "@typescript-eslint/eslint-plugin": "^5.59.7",
"@typescript-eslint/parser": "^5.59.5", "@typescript-eslint/parser": "^5.59.5",
"rollup": "^3.23.0", "rollup": "^3.23.0",
"rollup-plugin-license": "^3.0.1", "rollup-plugin-license": "^3.0.1",
"rollup-plugin-postcss": "^4.0.2", "rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-replace": "^2.2.0",
"stats.js": "^0.17.0", "stats.js": "^0.17.0",
"three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2010/package.tgz",
"three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2012/package.tgz",
"tslib": "^2.5.0", "tslib": "^2.5.0",
"tweakpane": "^3.1.9", "tweakpane": "^3.1.9",
"tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.403/package.tgz",
"tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz",
"typedoc": "^0.24.7", "typedoc": "^0.24.7",
"typescript": "^5.0.4", "typescript": "^5.0.4",
"typescript-plugin-css-modules": "^5.0.1", "typescript-plugin-css-modules": "^5.0.1",
"uiconfig-tweakpane": "^0.0.3",
"uiconfig.js": "^0.0.4"
"uiconfig.js": "^0.0.5"
},
"optionalDependencies": {
"win-node-env": "^0.6.1"
}
},
"../ts-browser-helpers": {
"version": "0.7.0",
"license": "MIT",
"dependencies": {
"@types/wicg-file-system-access": "^2020.9.5"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^23.0.2",
"@rollup/plugin-json": "^5.0.1",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-terser": "^0.1.0",
"@rollup/plugin-typescript": "^9.0.2",
"clean-package": "^2.2.0",
"local-web-server": "^5.2.1",
"rimraf": "^5.0.1",
"rollup": "^3.4.0",
"rollup-plugin-license": "^3.0.1",
"tslib": "^2.4.1",
"typedoc": "^0.24.7",
"typedoc-plugin-markdown": "^3.15.3",
"typescript": "^4.9.3"
}, },
"optionalDependencies": { "optionalDependencies": {
"win-node-env": "^0.6.1" "win-node-env": "^0.6.1"
"postcss": "8.x" "postcss": "8.x"
} }
}, },
"node_modules/rollup-plugin-replace": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz",
"integrity": "sha512-/5bxtUPkDHyBJAKketb4NfaeZjL5yLZdeUihSfbF2PQMz+rSTEb8ARKoOl3UBT4m7/X+QOXJo3sLTcq+yMMYTA==",
"deprecated": "This module has moved and is now available at @rollup/plugin-replace. Please update your dependencies. This version is no longer maintained.",
"dev": true,
"dependencies": {
"magic-string": "^0.25.2",
"rollup-pluginutils": "^2.6.0"
}
},
"node_modules/rollup-plugin-replace/node_modules/magic-string": {
"version": "0.25.9",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
"integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
"dev": true,
"dependencies": {
"sourcemap-codec": "^1.4.8"
}
},
"node_modules/rollup-pluginutils": { "node_modules/rollup-pluginutils": {
"version": "2.8.2", "version": "2.8.2",
"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
} }
}, },
"node_modules/three": { "node_modules/three": {
"version": "0.152.2010",
"resolved": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2010/package.tgz",
"integrity": "sha512-STTCnJzxPLXkXCe41qSXx5G/bXWvkg22NjvBLCTwv8SpaP9m4HsTqNCbdwxu5cFjiPAtkYsBKnMqP4ows80urw==",
"version": "0.152.2011",
"resolved": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2012/package.tgz",
"integrity": "sha512-f2WKlSeuz9uvpfHNngEJMrQtKbyuE2iHjvpBaF1Wl8LcoMT3WUs7nmJzbEeheEr+J8BYnyRLNMDzR2xU0l1+Yw==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
} }
}, },
"node_modules/ts-browser-helpers": { "node_modules/ts-browser-helpers": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/ts-browser-helpers/-/ts-browser-helpers-0.6.0.tgz",
"integrity": "sha512-Z/jxbjMC4a+Twz0QORIZf/yop7xQM1b4rNylYED3R2+eSypOs3zpDBRCw3uR4RT6TgPlhbK5COQss08FClVwqw==",
"dependencies": {
"@types/wicg-file-system-access": "^2020.9.5"
}
"resolved": "../ts-browser-helpers",
"link": true
}, },
"node_modules/tsconfig-paths": { "node_modules/tsconfig-paths": {
"version": "3.14.2", "version": "3.14.2",
} }
}, },
"node_modules/tweakpane-image-plugin": { "node_modules/tweakpane-image-plugin": {
"version": "1.1.403",
"resolved": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.403/package.tgz",
"integrity": "sha512-CR1f5HFXqs/wqibb6W+Wxfg6xDJsYLoTgHMPKHmLsjr3CyFMROYHH4kDnBEhRroudiMA6PYG7SLq5/9N8HS0sQ==",
"version": "1.1.404",
"resolved": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz",
"integrity": "sha512-CDTSmawGZvvTtGYCy6YKKyR1Rxo96/bVuqJvl2JYMn6n625SI8KTlscdb8VQi09pwz/96RNu9BDzTF3nRTZj1g==",
"dev": true, "dev": true,
"license": "MIT"
"license": "MIT",
"dependencies": {
"@tweakpane/core": "1.1.8"
}
}, },
"node_modules/type-check": { "node_modules/type-check": {
"version": "0.4.0", "version": "0.4.0",
} }
}, },
"node_modules/uiconfig-tweakpane": { "node_modules/uiconfig-tweakpane": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/uiconfig-tweakpane/-/uiconfig-tweakpane-0.0.3.tgz",
"integrity": "sha512-QDWiXMh5+pwr4jLOv7GV5nI/9RJdNAQGEwD503ShIxW9oB7eFdq9bRDvq46ncXHelWxiq2j3gqxvCnLhwfMx5A==",
"dev": true,
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/uiconfig-tweakpane/-/uiconfig-tweakpane-0.0.4.tgz",
"integrity": "sha512-Mo+dVplH4Hlnn5LAjzLH2Ly89/hFWtTtmdq/aIK826IrbSm1qb9MgFAUzSfZhs59kutf/Yo3Y6BKNQ2kagAA1A==",
"dependencies": { "dependencies": {
"@types/three": "^0.152.1", "@types/three": "^0.152.1",
"uiconfig.js": "^0.0.4"
"uiconfig.js": "^0.0.5"
} }
}, },
"node_modules/uiconfig.js": { "node_modules/uiconfig.js": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/uiconfig.js/-/uiconfig.js-0.0.4.tgz",
"integrity": "sha512-uFrcLIey/vx2+bYJwf3VBinHMRaSlTKaYOxYLFFqvu1jLj57OBJiuUosNfXKMxliSNMx4ptuNOhePFRSswumiQ==",
"dev": true
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/uiconfig.js/-/uiconfig.js-0.0.5.tgz",
"integrity": "sha512-GC+WGWROJzIgwC/w22WOlGRa8UqQMU1/iD8W6WslrhTuvhh8O9tsANMaHyihgomfgybzm9ZY/c7bfvADcbuvyA=="
}, },
"node_modules/unbox-primitive": { "node_modules/unbox-primitive": {
"version": "1.0.2", "version": "1.0.2",
"style-inject": "^0.3.0" "style-inject": "^0.3.0"
} }
}, },
"rollup-plugin-replace": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz",
"integrity": "sha512-/5bxtUPkDHyBJAKketb4NfaeZjL5yLZdeUihSfbF2PQMz+rSTEb8ARKoOl3UBT4m7/X+QOXJo3sLTcq+yMMYTA==",
"dev": true,
"requires": {
"magic-string": "^0.25.2",
"rollup-pluginutils": "^2.6.0"
},
"dependencies": {
"magic-string": {
"version": "0.25.9",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
"integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
"dev": true,
"requires": {
"sourcemap-codec": "^1.4.8"
}
}
}
},
"rollup-pluginutils": { "rollup-pluginutils": {
"version": "2.8.2", "version": "2.8.2",
"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
} }
}, },
"three": { "three": {
"version": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2010/package.tgz",
"integrity": "sha512-STTCnJzxPLXkXCe41qSXx5G/bXWvkg22NjvBLCTwv8SpaP9m4HsTqNCbdwxu5cFjiPAtkYsBKnMqP4ows80urw==",
"version": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2012/package.tgz",
"integrity": "sha512-f2WKlSeuz9uvpfHNngEJMrQtKbyuE2iHjvpBaF1Wl8LcoMT3WUs7nmJzbEeheEr+J8BYnyRLNMDzR2xU0l1+Yw==",
"dev": true "dev": true
}, },
"through": { "through": {
"dev": true "dev": true
}, },
"ts-browser-helpers": { "ts-browser-helpers": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/ts-browser-helpers/-/ts-browser-helpers-0.6.0.tgz",
"integrity": "sha512-Z/jxbjMC4a+Twz0QORIZf/yop7xQM1b4rNylYED3R2+eSypOs3zpDBRCw3uR4RT6TgPlhbK5COQss08FClVwqw==",
"version": "file:../ts-browser-helpers",
"requires": { "requires": {
"@types/wicg-file-system-access": "^2020.9.5"
"@rollup/plugin-commonjs": "^23.0.2",
"@rollup/plugin-json": "^5.0.1",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-terser": "^0.1.0",
"@rollup/plugin-typescript": "^9.0.2",
"@types/wicg-file-system-access": "^2020.9.5",
"clean-package": "^2.2.0",
"local-web-server": "^5.2.1",
"rimraf": "^5.0.1",
"rollup": "^3.4.0",
"rollup-plugin-license": "^3.0.1",
"tslib": "^2.4.1",
"typedoc": "^0.24.7",
"typedoc-plugin-markdown": "^3.15.3",
"typescript": "^4.9.3",
"win-node-env": "^0.6.1"
} }
}, },
"tsconfig-paths": { "tsconfig-paths": {
"dev": true "dev": true
}, },
"tweakpane-image-plugin": { "tweakpane-image-plugin": {
"version": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.403/package.tgz",
"integrity": "sha512-CR1f5HFXqs/wqibb6W+Wxfg6xDJsYLoTgHMPKHmLsjr3CyFMROYHH4kDnBEhRroudiMA6PYG7SLq5/9N8HS0sQ==",
"dev": true
"version": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz",
"integrity": "sha512-CDTSmawGZvvTtGYCy6YKKyR1Rxo96/bVuqJvl2JYMn6n625SI8KTlscdb8VQi09pwz/96RNu9BDzTF3nRTZj1g==",
"dev": true,
"requires": {
"@tweakpane/core": "1.1.8"
}
}, },
"type-check": { "type-check": {
"version": "0.4.0", "version": "0.4.0",
"dev": true "dev": true
}, },
"uiconfig-tweakpane": { "uiconfig-tweakpane": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/uiconfig-tweakpane/-/uiconfig-tweakpane-0.0.3.tgz",
"integrity": "sha512-QDWiXMh5+pwr4jLOv7GV5nI/9RJdNAQGEwD503ShIxW9oB7eFdq9bRDvq46ncXHelWxiq2j3gqxvCnLhwfMx5A==",
"dev": true,
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/uiconfig-tweakpane/-/uiconfig-tweakpane-0.0.4.tgz",
"integrity": "sha512-Mo+dVplH4Hlnn5LAjzLH2Ly89/hFWtTtmdq/aIK826IrbSm1qb9MgFAUzSfZhs59kutf/Yo3Y6BKNQ2kagAA1A==",
"requires": { "requires": {
"@types/three": "^0.152.1", "@types/three": "^0.152.1",
"uiconfig.js": "^0.0.4"
"uiconfig.js": "^0.0.5"
} }
}, },
"uiconfig.js": { "uiconfig.js": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/uiconfig.js/-/uiconfig.js-0.0.4.tgz",
"integrity": "sha512-uFrcLIey/vx2+bYJwf3VBinHMRaSlTKaYOxYLFFqvu1jLj57OBJiuUosNfXKMxliSNMx4ptuNOhePFRSswumiQ==",
"dev": true
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/uiconfig.js/-/uiconfig.js-0.0.5.tgz",
"integrity": "sha512-GC+WGWROJzIgwC/w22WOlGRa8UqQMU1/iD8W6WslrhTuvhh8O9tsANMaHyihgomfgybzm9ZY/c7bfvADcbuvyA=="
}, },
"unbox-primitive": { "unbox-primitive": {
"version": "1.0.2", "version": "1.0.2",

+ 17
- 14
package.json Voir le fichier

{ {
"name": "threepipe", "name": "threepipe",
"version": "0.0.8-dev",
"version": "0.0.8-dev.1",
"description": "A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.", "description": "A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.",
"main": "src/index.ts", "main": "src/index.ts",
"module": "dist/index.mjs", "module": "dist/index.mjs",
"rollup-plugin-license": "^3.0.1", "rollup-plugin-license": "^3.0.1",
"rollup-plugin-postcss": "^4.0.2", "rollup-plugin-postcss": "^4.0.2",
"stats.js": "^0.17.0", "stats.js": "^0.17.0",
"three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2010/package.tgz",
"three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2012/package.tgz",
"tslib": "^2.5.0", "tslib": "^2.5.0",
"tweakpane": "^3.1.9", "tweakpane": "^3.1.9",
"@tweakpane/core": "^1.1.8",
"@tweakpane/core": "1.1.8",
"typedoc": "^0.24.7", "typedoc": "^0.24.7",
"typescript": "^5.0.4", "typescript": "^5.0.4",
"typescript-plugin-css-modules": "^5.0.1", "typescript-plugin-css-modules": "^5.0.1",
"uiconfig-tweakpane": "^0.0.3",
"uiconfig.js": "^0.0.4",
"tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.403/package.tgz"
"uiconfig.js": "^0.0.5",
"rollup-plugin-replace": "^2.2.0",
"tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz"
}, },
"dependencies": { "dependencies": {
"@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1011/package.tgz", "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1011/package.tgz",
"@types/webxr": "^0.5.1", "@types/webxr": "^0.5.1",
"@types/wicg-file-system-access": "^2020.9.5", "@types/wicg-file-system-access": "^2020.9.5",
"ts-browser-helpers": "^0.6.0"
"ts-browser-helpers": "^0.7.0",
"uiconfig-tweakpane": "^0.0.4"
}, },
"//": { "//": {
"dependencies": { "dependencies": {
"uiconfig.js": "^0.0.4", "uiconfig.js": "^0.0.4",
"ts-browser-helpers": "^0.5.0",
"uiconfig-tweakpane": "^0.0.3",
"three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2010/package.tgz",
"three-f": "https://github.com/repalash/three.js-modded/archive/refs/tags/v0.152.2010.tar.gz",
"ts-browser-helpers": "^0.7.0",
"uiconfig-tweakpane": "^0.0.4",
"three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2012/package.tgz",
"three-f": "https://github.com/repalash/three.js-modded/archive/refs/tags/v0.152.2012.tar.gz",
"@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1011/package.tgz", "@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1011/package.tgz",
"@types/three-f": "https://github.com/repalash/three-ts-types/archive/refs/tags/v0.152.1011.tar.gz", "@types/three-f": "https://github.com/repalash/three-ts-types/archive/refs/tags/v0.152.1011.tar.gz",
"@types/three-pkg": "https://gitpkg.now.sh/repalash/three-ts-types/types/three?modded_three", "@types/three-pkg": "https://gitpkg.now.sh/repalash/three-ts-types/types/three?modded_three",
"tweakpane-image-plugin": "git+ssh://github.com/repalash/tweakpane-image-plugin.git#52d5542047fd07d2e7225b5b67c9f7620366f2c7"
"tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz"
}, },
"local_dependencies": { "local_dependencies": {
"uiconfig-tweakpane": "^file:./../uiconfig-tweakpane", "uiconfig-tweakpane": "^file:./../uiconfig-tweakpane",
"uiconfig.js": "^file:./../uiconfig", "uiconfig.js": "^file:./../uiconfig",
"ts-browser-helpers": "file:./../ts-browser-helpers", "ts-browser-helpers": "file:./../ts-browser-helpers",
"three": "file:./../three.js", "three": "file:./../three.js",
"@types/three": "file:./../three-ts-types/types/three"
"@types/three": "file:./../three-ts-types/types/three",
"tweakpane-image-plugin": "file:./../tweakpane-image-plugin"
} }
}, },
"optionalDependencies": { "optionalDependencies": {
"reurls": { "reurls": {
"README.md": "index.html" "README.md": "index.html"
} }
}
},
"sideEffects": false
} }

+ 56
- 0
plugins/ui/tweakpane-editor/package-lock.json Voir le fichier

{
"name": "tweakpane-editor",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "tweakpane-editor",
"version": "1.0.0",
"dependencies": {
"threepipe": "./../../../dist/",
"tippy.js": "^6.3.7"
}
},
"../../../dist": {},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/threepipe": {
"resolved": "../../../dist",
"link": true
},
"node_modules/tippy.js": {
"version": "6.3.7",
"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
"integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
"dependencies": {
"@popperjs/core": "^2.9.0"
}
}
},
"dependencies": {
"@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
},
"threepipe": {
"version": "file:../../../dist"
},
"tippy.js": {
"version": "6.3.7",
"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
"integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
"requires": {
"@popperjs/core": "^2.9.0"
}
}
}
}

+ 15
- 0
plugins/ui/tweakpane-editor/package.json Voir le fichier

{
"name": "tweakpane-editor",
"version": "1.0.0",
"dependencies": {
"tippy.js": "^6.3.7",
"threepipe": "./../../../dist/"
},
"type": "module",
"scripts": {
"build": "rimraf dist && NODE_ENV=production rollup -c",
"dev": "rollup -c -w"
},
"author": "repalash <palash@shaders.app>",
"license": "Apache-2.0"
}

+ 92
- 0
plugins/ui/tweakpane-editor/rollup.config.mjs Voir le fichier

// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import license from 'rollup-plugin-license'
import packageJson from './package.json' assert {type: 'json'};
import path from 'path'
import {fileURLToPath} from 'url';
import terser from "@rollup/plugin-terser";
import postcss from 'rollup-plugin-postcss'
import replace from 'rollup-plugin-replace'

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const {name, version, author} = packageJson
// const {main, module, browser} = packageJson["clean-package"].replace
const isProduction = process.env.NODE_ENV === 'production'

const settings = {
globals: {},
sourcemap: true
}

export default {
input: './src/index.ts',
output: [
// {
// file: main,
// name: main,
// ...settings,
// format: 'cjs',
// plugins: [
// isProduction && terser()
// ]
// },
{
file: './dist/index.mjs',
...settings,
name: name,
format: 'es'
},
{
file: './dist/index.js',
...settings,
name: name,
format: 'umd',
plugins: [
isProduction && terser()
]
}
],
external: ["threepipe"],
plugins: [
replace({
// If you would like DEV messages, specify 'development'
// Otherwise use 'production'
'process.env.NODE_ENV': JSON.stringify('production') // for tippy.js
}),
postcss({
modules: false,
autoModules: true, // todo; issues with typescript import css, because inject is false
inject: false,
minimize: isProduction,
// Or with custom options for `postcss-modules`
}),
json(),
resolve({}),
typescript({
tsconfig: './tsconfig.json',
}),
commonjs({
include: 'node_modules/**',
extensions: ['.js'],
ignoreGlobal: false,
sourceMap: false
}),
license({
banner: `
@license
${name} v${version}
Copyright 2022<%= moment().format('YYYY') > 2022 ? '-' + moment().format('YYYY') : null %> ${author}
${packageJson.license} License
`,
thirdParty: {
output: path.join(__dirname, 'dist', 'dependencies.txt'),
includePrivate: true, // Default is false.
},
})
]
}

+ 301
- 0
plugins/ui/tweakpane-editor/src/TweakpaneEditorPlugin.css Voir le fichier

.button-bar{
background: var(--tp-base-background-color);
/*background: #2c2c2e99;*/
/*backdrop-filter: blur(8px);*/
border: 1px solid #8F949C;
width: fit-content;
width: -moz-fit-content;
height: auto;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
z-index: 200;
padding: 0.25rem 0.5rem 0.5rem;
border-radius: 0.5rem;
pointer-events: auto;
box-shadow: 0 2px 4px var(--tp-base-shadow-color);
gap: 8px;
font-size: 0.85rem;
line-height: 130%;
font-family: Inter, "Roboto Mono", "Source Code Pro", Menlo, Courier, monospace;
opacity: 1;
transition: all 0.25s;
}

.button-bar-button {
/*background-color: var(--tp-container-background-color-active);*/
background-color: transparent;
cursor: pointer;
/*border-radius: 0.25rem;*/
width: auto;
height: auto;
font-weight: 400;
/*overflow: hidden;*/
padding: 0.35rem 0.5rem;
position: relative;
user-select: none;
color: #cccccc;
transition: color 0.25s;
}

.button-bar-button:hover {
/*background-color: var(--tp-container-background-color-hover);*/
color: #eeeeee;
}

.button-bar-selected {
color: white;
/*background-color: #2c2c2eaa;*/
/*outline: 1px solid #ccccccaa;*/
}

.button-bar-selected-box {
color: white;
}

/*Divider*/
.button-bar > .button-bar-button:not(:last-child)::after {
content: '';
position: absolute;
right: -5px;
top: 20%;
width: 2px;
height: 60%;
border-radius: 1px;
/*background-color: #555555;*/
background-color: #413762;
}

.button-bar-selected {
/*background-color: #2c2c2eaa;*/
/*outline: 1px solid #ccccccaa;*/
}
.button-bar-button:before {
left: 50%;
width: 0;
content: '';
position: absolute;
}
.button-bar-selected:before {
left: 25%;
width: 50%;

bottom: 0;
height: 2px;
border-radius: 1px;
background-color: #cccccc;
transition: width 0.25s, left 0.25s;
/*background-color: #2c2c2eaa;*/
/*outline: 1px solid #ccccccaa;*/
}
.button-bar-selected-box {
background-color: #eeeeee55;
border-radius: 0.25rem;
transition: all 0.25s;
}

.round-button{
width: 1rem;
height: 1rem;
padding: 0.6rem;
background-color: var(--tp-base-background-color);
border-radius: 1.2rem;
color: #cccccc;
cursor: pointer;
box-shadow: 0 2px 4px var(--tp-base-shadow-color);
transition: all 0.25s;
}
.round-button:hover{
color: white;
}

.util-buttons-container{
bottom: 1.25rem;
right: 1.25rem;
position: absolute;
gap: 8px;
padding: 0.25rem;
}
.util-button{
position: relative;
width: auto;
height: 1.2rem;
}

.mode-buttons-container{
border-top: 0;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
min-width: 6rem;
border-radius: 0 0 0.5rem 0.5rem;
gap: 8px;
}

.mode-button {
font-weight: 400;
}
.mode-button:hover {
/*background-color: var(--tp-container-background-color-hover);*/
}

#webgi-logo{
background-image: url("https://static.webgi.xyz/logo.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
bottom: 1.25rem;
left: 1rem;
z-index: 100;
width: 8rem;
height: 2.5rem;
position: absolute;
cursor: pointer;
/*background-color: white;*/
/*border-radius: 1.25rem;*/
}
#webgi-logo:hover{
filter: grayscale(100%);
}

#fsToggle{
position: absolute;
right: 1.25rem;
top: 1.25rem;
}
/*#modesToggle{*/
/* top: 0;*/
/* left: 0;*/
/* width: auto;*/
/* height: auto;*/
/* padding: 0.5rem;*/
/* position: absolute;*/
/* border-radius: 0.375rem;*/
/* color: white;*/
/* z-index: 250;*/
/* font-weight: 400;*/
/* background: var(--tp-base-background-color);*/
/* font-size: 0.75rem;*/
/* cursor: pointer;*/
/* user-select: none;*/
/*}*/
/*#modesToggle:hover{*/
/* font-weight: 800;*/
/*}*/
/*.hidden{*/
/* visibility: hidden;*/
/* opacity: 0;*/
/*}*/

#assetManagerPopup {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: white;
padding: 1.5rem;
font-size: 0.85rem;
overflow-y: scroll;
background-color: var(--tp-base-background-color);
}


::-webkit-scrollbar
{
width: 8px; /* for vertical scrollbars */
height: 8px; /* for horizontal scrollbars */
}
::-webkit-scrollbar-track
{
background: #28223Ccc !important;
border-radius: 6px;
}
::-webkit-scrollbar-thumb
{
background: #ffffff66;
border-radius: 6px;
}
::-webkit-scrollbar-corner {background: rgba(0,0,0,0.5);}


.tippy-box[data-theme~='editor']{
margin: 0.25rem !important;
background-color: var(--tp-base-background-color) !important;
font-size: 0.8rem !important;
color: #dddddd !important;
}


#tweakpaneUiContainer {
margin-top: 7.5rem;
}
@media only screen and (min-width: 480px) {
#tweakpaneUiContainer {
margin-top: 5.5rem;
}
}
#mcanvas {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
/*touch-action: none;*/
z-index: -1;
/*pointer-events: none; // dont */
display: block;
}

#canvas-container {
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
}
@media only screen and (min-width: 920px) {
#canvas-container {
width: calc(100% - 3.5rem - max(var(--tweakpane-ui-container-width, 300px), 3rem)) !important;
height: calc(100% - 5rem);
margin: 3.5rem 1.5rem 1.5rem 1.5rem !important;
border-radius: 0.5rem;

box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
#mcanvas{
border-radius: 0.5rem;
}
#tweakpaneUiContainer {
margin-top: 3.5rem;
}
}
body {
background-color: #D1D4E7;
}

html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
font-family: 'Inter', sans-serif !important;
}

.font-inter {
font-family: 'Inter', sans-serif !important;
}

.font-gilroy {
font-family: 'Gilroy', sans-serif !important;
}


+ 107
- 0
plugins/ui/tweakpane-editor/src/TweakpaneEditorPlugin.ts Voir le fichier

import {
AViewerPlugin,
AViewerPluginSync,
Class,
createDiv,
createStyles,
FullScreenPlugin,
safeSetProperty,
ThreeViewer,
TweakpaneUiPlugin,
} from 'threepipe'
import {setupFullscreenButton, setupUtilButtonsBar} from './util-buttons'
import {setupWebGiLogo} from './logo'
import styles from './TweakpaneEditorPlugin.css'
import tippy from 'tippy.js'
import tippyStyles from 'tippy.js/dist/tippy.css'

export class TweakpaneEditorPlugin extends AViewerPluginSync<string> {
public static readonly PluginType: string = 'TweakpaneEditorPlugin'
enabled = true

dependencies = [TweakpaneUiPlugin, FullScreenPlugin]

constructor() {
super()
}
onAdded(viewer: ThreeViewer) {
super.onAdded(viewer)
createStyles(styles)
createStyles(tippyStyles)

tippy.setDefaultProps({
theme: 'editor',
duration: 300,
arrow: true,
appendTo: () => viewer.container, // for fullscreen
})

setupWebGiLogo(viewer)
setupFullscreenButton(viewer)
}

private _selectedMode = 0
modeKeys: string[] = []
modePlugins: Class<AViewerPlugin>[][] = []
modeDivs: (HTMLDivElement | undefined)[] = []
// picking?: PickingPlugin
uiPlugin?: TweakpaneUiPlugin

loadPlugins(plugins: Record<string, Class<AViewerPlugin<any>>[]> = {}) {
if (!this._viewer) throw new Error('Plugin not added to viewer.')
setupUtilButtonsBar(this._viewer, Object.values(plugins).flat())

// this.picking = viewer.getPlugin(PickingPlugin)
this.uiPlugin = this._viewer.getPlugin(TweakpaneUiPlugin)!

// Modes UI
const buttonsContainer = createDiv({
classList: ['mode-buttons-container', 'button-bar'],
addToBody: true,
})

this.modeKeys = Object.keys(plugins)
this.modePlugins = this.modeKeys.map(key => plugins[key])
this.modeDivs = this.modeKeys.map((key, i) => {
const d = createDiv({
innerHTML: key, classList: ['mode-button', 'button-bar-button'],
})
d.onclick = () => this.setSelectedMode(i)
buttonsContainer.appendChild(d)
return d
})

// picking?.addEventListener('selectedObjectChanged', () => {
// if (picking?.getSelectedObject() && !['Picking', 'Modifiers', 'Configurators'].includes(this.modeKeys[_selectedMode])) {
// setSelectedMode(modePlugins.findIndex(o=>o.includes(PickingPlugin)))
// }
// })

this.setSelectedMode(0)

}

setSelectedMode(mode: number) {
this._selectedMode = mode

// if (picking) picking.enabled = true

for (let i = 0; i < this.modePlugins.length; i++) {
const plugins = this.modePlugins[i].map(p => this._viewer?.getPlugin(p))
const visible = i === mode
for (const plugin of plugins) {
if (!plugin?.uiConfig) continue
if (!plugin.uiConfig.uiRef) this.uiPlugin?.setupPluginUi(plugin)
safeSetProperty(plugin.uiConfig, 'hidden', !visible, true)
}
}

for (let i = 0; i < this.modeKeys.length; i++) {
this.modeDivs[i]?.classList[this._selectedMode !== i ? 'remove' : 'add']('mode-button-selected', 'button-bar-selected')
}
// this._viewer.setDirty()
this.uiPlugin?.refreshPluginsEnabled()

// todo: expand the ui if collapsed
}
}

+ 36
- 0
plugins/ui/tweakpane-editor/src/global.d.ts Voir le fichier

declare module '*.txt' {
const content: string
export default content
}
declare module '*.glsl' {
const content: string
export default content
}
declare module '*.vert' {
const content: string
export default content
}
declare module '*.frag' {
const content: string
export default content
}
declare module '*.module.scss' {
const content: any
export default content
export const stylesheet: string
}
declare module '*.module.css' {
const content: any
export default content
export const stylesheet: string
}
declare module '*.css' {
const content: string
export default content
}

// export {}

// hack for typedoc
// eslint-disable-next-line @typescript-eslint/naming-convention
// declare type OffscreenCanvas = HTMLCanvasElement

+ 34
- 0
plugins/ui/tweakpane-editor/src/icons.ts Voir le fichier

export const expand = '<svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">\n' +
' <path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />\n' +
'</svg>'
export const focus = '<svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">\n' +
' <path fill="currentColor" d="M17 12C17 7.55 11.62 5.31 8.46 8.46C5.31 11.61 7.55 17 12 17C14.76 17 17 14.76 17 12M12 15C9.33 15 8 11.77 9.88 9.88C11.77 8 15 9.33 15 12C15 13.66 13.66 15 12 15M5 15H3V19C3 20.1 3.9 21 5 21H9V19H5M5 5H9V3H5C3.9 3 3 3.9 3 5V9H5M19 3H15V5H19V9H21V5C21 3.9 20.1 3 19 3M19 19H15V21H19C20.1 21 21 20.1 21 19V15H19" />\n' +
'</svg>'
export const trash = '<svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">\n' +
' <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />\n' +
'</svg>'
export const collapse = '<svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">\n' +
' <path d="M9 19L9 15M9 15L5 15M9 15L4 20M15 15L20 20M15 15V19M15 15H19M15 5V9M15 9L19 9M15 9L20 4M9 5L9 9M9 9L5 9M9 9L4 4" stroke-linecap="round" stroke-linejoin="round"/>\n' +
'</svg>'
export const playIcon = '<svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">\n' +
' <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />\n' +
' <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />\n' +
'</svg>'
export const autoRotateCC = '<svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%;" fill="currentColor" viewBox="0 0 24 24">\n' +
' <path fill="currentColor" d="M10,12L14,16L10,20V16.9C5.44,16.44 2,14.42 2,12C2,9.58 5.44,7.56 10,7.1V9.09C6.55,9.43 4,10.6 4,12C4,13.4 6.55,14.57 10,14.91V12M20,12C20,10.6 17.45,9.43 14,9.09V7.1C18.56,7.56 22,9.58 22,12C22,14.16 19.26,16 15.42,16.7L16.12,16L14.92,14.79C17.89,14.36 20,13.27 20,12M11,2H13V13L11,11V2M11,22V21L13,19V22H11Z" />\n' +
'</svg>'
export const loopCamViews = '<svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%;" fill="currentColor" viewBox="0 0 24 24">\n' +
' <path fill="currentColor" d="M19 8L15 12H18C18 15.31 15.31 18 12 18C11 18 10.03 17.75 9.2 17.3L7.74 18.76C8.97 19.54 10.43 20 12 20C16.42 20 20 16.42 20 12H23M6 12C6 8.69 8.69 6 12 6C13 6 13.97 6.25 14.8 6.7L16.26 5.24C15.03 4.46 13.57 4 12 4C7.58 4 4 7.58 4 12H1L5 16L9 12M14 12C14 13.11 13.11 14 12 14S10 13.11 10 12 10.9 10 12 10 14 10.9 14 12Z" />\n' +
'</svg>'
export const resetSettings = '<svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%;" fill="currentColor" viewBox="0 0 24 24">\n' +
' <path fill="currentColor" d="M19 8L15 12H18C18 15.31 15.31 18 12 18C11 18 10.03 17.75 9.2 17.3L7.74 18.76C8.97 19.54 10.43 20 12 20C16.42 20 20 16.42 20 12H23M6 12C6 8.69 8.69 6 12 6C13 6 13.97 6.25 14.8 6.7L16.26 5.24C15.03 4.46 13.57 4 12 4C7.58 4 4 7.58 4 12H1L5 16L9 12M14 12C14 13.11 13.11 14 12 14S10 13.11 10 12 10.9 10 12 10 14 10.9 14 12Z" />\n' +
'</svg>'

export const snapshot = '<svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">\n' +
' <path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />\n' +
' <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />\n' +
'</svg>'

export const download = '<svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">\n' +
' <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />\n' +
'</svg>'

+ 1
- 0
plugins/ui/tweakpane-editor/src/index.ts Voir le fichier

export {TweakpaneEditorPlugin} from './TweakpaneEditorPlugin'

+ 21
- 0
plugins/ui/tweakpane-editor/src/logo.ts Voir le fichier

import {createDiv, getUrlQueryParam, ThreeViewer} from 'threepipe'
import tippy from 'tippy.js'

export function setupWebGiLogo(viewer: ThreeViewer) {
const webgiLogo = createDiv({
innerHTML: '',
id: 'webgi-logo',
addToBody: false,
})
if (getUrlQueryParam('logo-img')) {
webgiLogo.style.backgroundImage = `url(${getUrlQueryParam('logo-img')})`
}
webgiLogo.onclick = () => {
window.open(getUrlQueryParam('logo-link') || 'https://webgi.xyz', '_blank')
}
viewer.container.appendChild(webgiLogo)
tippy(webgiLogo, {
placement: 'right',
content: 'Powered by WebGi SDK',
})
}

+ 150
- 0
plugins/ui/tweakpane-editor/src/util-buttons.ts Voir le fichier

import {AViewerPlugin, Class, createDiv, FullScreenPlugin, ThreeViewer} from 'threepipe'
import {autoRotateCC, collapse, expand, resetSettings, trash} from './icons'
import tippy, {createSingleton} from 'tippy.js'

export function createUtilButtons(viewer: ThreeViewer, allPlugins: Class<AViewerPlugin>[]) {
return [
{
id: 'reset-settings',
icon: resetSettings,
tooltip: 'Reset All Settings',
onclick: async() => {
if (!await viewer.dialog.confirm('Reset settings: Are you sure you want to reset all plugin settings?')) return
const ps = allPlugins.map(p => viewer.getPlugin(p)!)
for (const p of ps) {
await (p as any)?.resetDefaults?.() // set in TweakpaneUiPlugin
}
},
},
{
id: 'clear-scene',
icon: trash,
tooltip: 'Clear Scene',
onclick: async() => {
if (!await viewer.dialog.confirm('Clear scene: Are you sure you want to clear the scene?')) return
viewer.scene.disposeSceneModels()
},
},
// {
// id: 'fit-scene',
// icon: focus,
// tooltip: 'Fit Object/Scene',
// onclick: async() => {
// await viewer.fitToView(viewer.getPlugin(PickingPlugin)?.getSelectedObject())
// },
// },
// {
// id: 'loop-cam-views',
// icon: loopCamViews,
// tooltip: 'Loop Camera Views',
// toggle: true,
// onclick: async() => {
// if (!viewer.getPlugin(CameraViewPlugin)) return
// viewer.getPlugin(CameraViewPlugin)!.viewLooping = !viewer.getPlugin(CameraViewPlugin)!.viewLooping
// },
// },
// {
// id: 'play-gltf',
// icon: playIcon,
// tooltip: 'GLTF Animations',
// toggle: true,
// onclick: async() => {
// viewer.getPlugin(GLTFAnimationPlugin)?.playPauseAnimation()
// },
// },
{
id: 'auto-rotate-cc',
icon: autoRotateCC,
tooltip: 'Auto rotate',
toggle: true,
onclick: async() => {
const controls = viewer.scene.mainCamera.controls
if (controls?.autoRotate === undefined) return
controls.autoRotate = !controls.autoRotate
},
},
// {
// id: 'snapshot',
// icon: snapshot,
// tooltip: 'Capture Snapshot',
// onclick: async() => {
// const s = viewer.getPlugin(CanvasSnipperPlugin)
// if (!s) {
// viewer.console.error('CanvasSnipperPlugin not added')
// return
// }
// await s.downloadSnapshot()
// },
// },
// {
// id: 'glb-export',
// icon: download,
// tooltip: 'Export GLB',
// onclick: async() => {
// const exporter = viewer.getPlugin(AssetExporterPlugin)
// if (!exporter) {
// viewer.console.error('AssetExporterPlugin not added')
// return
// }
// await exporter?.downloadSceneGlb()
// },
// },
]
}


export function setupFullscreenButton(viewer: ThreeViewer) {
const fullScreenButton = createDiv({
innerHTML: expand,
id: 'fsToggle',
classList: ['round-button'],
addToBody: false,
})
fullScreenButton.dataset.tippyContent = 'Full-Screen'
viewer.getPlugin(FullScreenPlugin)?.addEventListener('enter', () => {
fullScreenButton.innerHTML = collapse
fullScreenButton.dataset.tippyContent = 'Exit Full-Screen'
})
viewer.getPlugin(FullScreenPlugin)?.addEventListener('exit', () => {
fullScreenButton.innerHTML = expand
fullScreenButton.dataset.tippyContent = 'Full-Screen'
})
fullScreenButton.onclick = () => {
viewer.getPlugin(FullScreenPlugin)?.toggle(viewer.container)
}
viewer.container.appendChild(fullScreenButton)
tippy(fullScreenButton, {
placement: 'left',
})
}

export function setupUtilButtonsBar(viewer: ThreeViewer, allPlugins: Class<AViewerPlugin>[]) {
const utilButtonsContainer = createDiv({
classList: ['button-bar', 'util-buttons-container'],
addToBody: false,
})
viewer.container.appendChild(utilButtonsContainer)

const utilButtons = createUtilButtons(viewer, allPlugins)

for (const utilButton of utilButtons) {
const button = createDiv({
innerHTML: utilButton.icon,
id: utilButton.id,
classList: ['button-bar-button', 'util-button'],
addToBody: false,
})
button.dataset.tippyContent = utilButton.tooltip
button.onclick = () => {
if (utilButton.toggle) {
button.classList.toggle('button-bar-selected-box')
}
utilButton.onclick()
}
utilButtonsContainer.appendChild(button)
}
createSingleton(tippy('.util-button'), {
moveTransition: 'transform 0.2s ease-out',
placement: 'top',
})
}

+ 44
- 0
plugins/ui/tweakpane-editor/tsconfig.json Voir le fichier

{
"compilerOptions": {
"baseUrl": "./src",
"rootDir": "./src",
"allowJs": false,
"checkJs": false,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"isolatedModules": true,
"module": "es2020",
"noImplicitAny": true,
"declaration": true,
"declarationMap": true,
"declarationDir": "dist",
"outDir": "dist",
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": false,
"preserveConstEnums": true,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"sourceMap": true,
"paths": {
"threepipe": ["../../../src/"]
},
"target": "ES2020",
"strictNullChecks": true,
"lib": [
"es2020",
"esnext",
"dom"
]
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts",
"dist"
]
}

+ 1
- 1
tsconfig.json Voir le fichier

"removeComments": false, "removeComments": false,
"preserveConstEnums": true, "preserveConstEnums": true,
"moduleResolution": "node", "moduleResolution": "node",
"emitDecoratorMetadata": true,
"emitDecoratorMetadata": false,
"sourceMap": true, "sourceMap": true,
"target": "ES2020", "target": "ES2020",
"strictNullChecks": true, "strictNullChecks": true,

Écrire Aperçu
Chargement…
Annuler
Enregistrer