| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="UTF-8"> | |||||
| <title>Tweakpane Ui Plugin</title> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |||||
| <!-- 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"> | |||||
| { | |||||
| "imports": { | |||||
| "threepipe": "./../../dist/index.mjs", | |||||
| "@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs" | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style id="example-style"> | |||||
| html, body, #canvas-container, #mcanvas { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| margin: 0; | |||||
| overflow: hidden; | |||||
| } | |||||
| </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> |
| import {_testFinish, IObject3D, ThreeViewer, TonemapPlugin} from 'threepipe' | |||||
| import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' | |||||
| async function init() { | |||||
| const viewer = new ThreeViewer({ | |||||
| canvas: document.getElementById('mcanvas') as HTMLCanvasElement, | |||||
| msaa: true, | |||||
| }) | |||||
| const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true)) | |||||
| ui.appendChild(viewer.uiConfig) | |||||
| ui.setupPluginUi(TonemapPlugin) | |||||
| await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr') | |||||
| const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', { | |||||
| autoCenter: true, | |||||
| autoScale: true, | |||||
| }) | |||||
| const mesh = result?.getObjectByName('node_damagedHelmet_-6514') | |||||
| ui.appendChild(mesh?.uiConfig) | |||||
| } | |||||
| init().then(_testFinish) |
| { | { | ||||
| "name": "@threepipe/plugin-tweakpane", | "name": "@threepipe/plugin-tweakpane", | ||||
| "version": "0.1.4", | |||||
| "version": "0.1.5", | |||||
| "lockfileVersion": 2, | "lockfileVersion": 2, | ||||
| "requires": true, | "requires": true, | ||||
| "packages": { | "packages": { | ||||
| "": { | "": { | ||||
| "name": "@threepipe/plugin-tweakpane", | "name": "@threepipe/plugin-tweakpane", | ||||
| "version": "0.1.4", | |||||
| "version": "0.1.5", | |||||
| "license": "Apache-2.0", | "license": "Apache-2.0", | ||||
| "dependencies": { | "dependencies": { | ||||
| "threepipe": "file:./../../src/" | "threepipe": "file:./../../src/" | ||||
| }, | }, | ||||
| "devDependencies": { | "devDependencies": { | ||||
| "tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz", | "tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz", | ||||
| "uiconfig-tweakpane": "^0.0.7" | |||||
| "uiconfig-tweakpane": "^0.0.8" | |||||
| } | } | ||||
| }, | }, | ||||
| "../../src": {}, | "../../src": {}, | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/uiconfig-tweakpane": { | "node_modules/uiconfig-tweakpane": { | ||||
| "version": "0.0.7", | |||||
| "resolved": "https://registry.npmjs.org/uiconfig-tweakpane/-/uiconfig-tweakpane-0.0.7.tgz", | |||||
| "integrity": "sha512-ookHYIlS7VvFQnsGRUNipi2xJNaT7oxA7Qg2GxV3UlWK4eEOnbxWrc1hUrQ55J3B7EJgfx1LpRybKbyOnzs9Uw==", | |||||
| "version": "0.0.8", | |||||
| "resolved": "https://registry.npmjs.org/uiconfig-tweakpane/-/uiconfig-tweakpane-0.0.8.tgz", | |||||
| "integrity": "sha512-BZE/+6pW7qlywu4nhMjvzJ47IUORWn8rJsPpmcGqJgAz8G6MZjMXEW3Ey8EL41cVsDf5QSb0E/eTK8OWwuRfbA==", | |||||
| "dev": true, | "dev": true, | ||||
| "dependencies": { | "dependencies": { | ||||
| "@types/three": "^0.152.1", | "@types/three": "^0.152.1", | ||||
| "uiconfig.js": "^0.0.7" | |||||
| "uiconfig.js": "^0.0.8" | |||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/uiconfig.js": { | "node_modules/uiconfig.js": { | ||||
| "version": "0.0.7", | |||||
| "resolved": "https://registry.npmjs.org/uiconfig.js/-/uiconfig.js-0.0.7.tgz", | |||||
| "integrity": "sha512-PNZkeNd52ETa5UQRu5XLXqJZhAUoUSzCiBfYVbl+7GdRIt65XTmPgNIjqeZXL59g6zhaGrkWTLa0AVyeZzVJZQ==", | |||||
| "version": "0.0.8", | |||||
| "resolved": "https://registry.npmjs.org/uiconfig.js/-/uiconfig.js-0.0.8.tgz", | |||||
| "integrity": "sha512-0H1OO4CNHP5O0LBy82YWWFCzDK+Yf/GtXnR3i968FkMkf0+3/JsW7MC8ea2CcPtsi8ni4TA1FrMOC+KrYmMnCQ==", | |||||
| "dev": true | "dev": true | ||||
| } | } | ||||
| }, | }, | ||||
| } | } | ||||
| }, | }, | ||||
| "uiconfig-tweakpane": { | "uiconfig-tweakpane": { | ||||
| "version": "0.0.7", | |||||
| "resolved": "https://registry.npmjs.org/uiconfig-tweakpane/-/uiconfig-tweakpane-0.0.7.tgz", | |||||
| "integrity": "sha512-ookHYIlS7VvFQnsGRUNipi2xJNaT7oxA7Qg2GxV3UlWK4eEOnbxWrc1hUrQ55J3B7EJgfx1LpRybKbyOnzs9Uw==", | |||||
| "version": "0.0.8", | |||||
| "resolved": "https://registry.npmjs.org/uiconfig-tweakpane/-/uiconfig-tweakpane-0.0.8.tgz", | |||||
| "integrity": "sha512-BZE/+6pW7qlywu4nhMjvzJ47IUORWn8rJsPpmcGqJgAz8G6MZjMXEW3Ey8EL41cVsDf5QSb0E/eTK8OWwuRfbA==", | |||||
| "dev": true, | "dev": true, | ||||
| "requires": { | "requires": { | ||||
| "@types/three": "^0.152.1", | "@types/three": "^0.152.1", | ||||
| "uiconfig.js": "^0.0.7" | |||||
| "uiconfig.js": "^0.0.8" | |||||
| } | } | ||||
| }, | }, | ||||
| "uiconfig.js": { | "uiconfig.js": { | ||||
| "version": "0.0.7", | |||||
| "resolved": "https://registry.npmjs.org/uiconfig.js/-/uiconfig.js-0.0.7.tgz", | |||||
| "integrity": "sha512-PNZkeNd52ETa5UQRu5XLXqJZhAUoUSzCiBfYVbl+7GdRIt65XTmPgNIjqeZXL59g6zhaGrkWTLa0AVyeZzVJZQ==", | |||||
| "version": "0.0.8", | |||||
| "resolved": "https://registry.npmjs.org/uiconfig.js/-/uiconfig.js-0.0.8.tgz", | |||||
| "integrity": "sha512-0H1OO4CNHP5O0LBy82YWWFCzDK+Yf/GtXnR3i968FkMkf0+3/JsW7MC8ea2CcPtsi8ni4TA1FrMOC+KrYmMnCQ==", | |||||
| "dev": true | "dev": true | ||||
| } | } | ||||
| } | } |
| { | { | ||||
| "name": "@threepipe/plugin-tweakpane", | "name": "@threepipe/plugin-tweakpane", | ||||
| "description": "Tweakpane UI Plugin for ThreePipe", | "description": "Tweakpane UI Plugin for ThreePipe", | ||||
| "version": "0.1.4", | |||||
| "version": "0.1.5", | |||||
| "devDependencies": { | "devDependencies": { | ||||
| "tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz", | "tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz", | ||||
| "uiconfig-tweakpane": "^0.0.7" | |||||
| "uiconfig-tweakpane": "^0.0.8" | |||||
| }, | }, | ||||
| "dependencies": { | "dependencies": { | ||||
| "threepipe": "file:./../../src/" | "threepipe": "file:./../../src/" | ||||
| "//": { | "//": { | ||||
| "dependencies": { | "dependencies": { | ||||
| "tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz", | "tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz", | ||||
| "uiconfig-tweakpane": "^0.0.7" | |||||
| "uiconfig-tweakpane": "^0.0.8" | |||||
| }, | }, | ||||
| "local_dependencies": { | "local_dependencies": { | ||||
| "tweakpane-image-plugin": "file:./../tweakpane-image-plugin", | "tweakpane-image-plugin": "file:./../tweakpane-image-plugin", |
| console.error('Only Float and HalfFloat Data texture export is supported', vcv, tex, config) | console.error('Only Float and HalfFloat Data texture export is supported', vcv, tex, config) | ||||
| return | return | ||||
| } | } | ||||
| // todo: use viewer.export directly (check threepipe Readme) | |||||
| const buffer = new EXRExporter2().parse(undefined as any, tex as DataTexture&ITexture) | const buffer = new EXRExporter2().parse(undefined as any, tex as DataTexture&ITexture) | ||||
| const val: Blob|undefined = new Blob([buffer], {type: 'image/x-exr'}) | const val: Blob|undefined = new Blob([buffer], {type: 'image/x-exr'}) | ||||
| if (!val) { | if (!val) { |