소스 검색

Update uiconfig-tweakpane, add tweakpane-ui-plugin example

master
Palash Bansal 2 년 전
부모
커밋
fbd83713f5
No account linked to committer's email address

+ 36
- 0
examples/tweakpane-ui-plugin/index.html 파일 보기

<!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>

+ 25
- 0
examples/tweakpane-ui-plugin/script.ts 파일 보기

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)

+ 17
- 17
plugins/tweakpane/package-lock.json 파일 보기

{ {
"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
} }
} }

+ 3
- 3
plugins/tweakpane/package.json 파일 보기

{ {
"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",

+ 1
- 0
plugins/tweakpane/src/tpImageInputGenerator.ts 파일 보기

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) {

Loading…
취소
저장