lzy
/
threepipe
Прати 1
Волим 0
Креирај огранак 0
Код Дискусије 0 Захтеви за спајање 0 Издања 0 Вики Activity
Преглед изворни кода

Add examples for AWSClientPlugin and TransfrSharePlugin and model-viewer example.

master
Palash Bansal пре 2 година
родитељ
9d6a3456e8
комит
66a0fa5987
No account linked to committer's email address
9 измењених фајлова са 415 додато и 6 уклоњено
Подељен поглед Покажи статистику Diff
  1. 37
    0
      examples/aws-client-plugin/index.html
  2. 59
    0
      examples/aws-client-plugin/script.ts
  3. 7
    2
      examples/index.html
  4. 52
    0
      examples/model-viewer/index.html
  5. 156
    0
      examples/model-viewer/script.ts
  6. 37
    0
      examples/transfr-share-plugin/index.html
  7. 52
    0
      examples/transfr-share-plugin/script.ts
  8. 1
    0
      examples/tweakpane-editor/index.html
  9. 14
    4
      examples/tweakpane-editor/script.ts

+ 37
- 0
examples/aws-client-plugin/index.html Прегледај датотеку

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transfr.one Share 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",
"@threepipe/plugin-network": "./../../plugins/network/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>

+ 59
- 0
examples/aws-client-plugin/script.ts Прегледај датотеку

@@ -0,0 +1,59 @@
import {
_testFinish,
AssetExporterPlugin,
IObject3D,
LoadingScreenPlugin,
SceneUiConfigPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
import {AWSClientPlugin} from '@threepipe/plugin-network'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
plugins: [SceneUiConfigPlugin, LoadingScreenPlugin],
})

viewer.getPlugin(LoadingScreenPlugin)!.minimizeOnSceneObjectLoad = false

const awsPlugin = viewer.addPluginSync(new AWSClientPlugin())
// set parameters and export. This can all be done from the UI also.
awsPlugin.accessKeyId = '00000000000000000000'
awsPlugin.accessKeySecret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
awsPlugin.endpointURL = 'https://s3.amazonaws.com/bucket/'
awsPlugin.pathPrefix = 'some/path/'
// or load a json file with the parameters
// the json file can be creating by entering the data in the UI and clicking the download preset json option.
// await viewer.load('file.json')

// export and upload
// const blob = await viewer.exportScene()
// this will upload to s3 if the plugin parameters are set up correctly
// await viewer.exportBlob(blob, 'file.glb')

const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
setBackground: true,
})

const modelUrl = 'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'
const result = await viewer.load<IObject3D>(modelUrl, {
autoCenter: true,
autoScale: true,
})

ui.setupPluginUi(AssetExporterPlugin, {expanded: true})
ui.setupPluginUi(AWSClientPlugin, {expanded: true})
ui.setupPluginUi(SceneUiConfigPlugin)

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

}

init().finally(_testFinish)

+ 7
- 2
examples/index.html Прегледај датотеку

@@ -307,9 +307,10 @@
</svg>
<input id="filterInput" type="text" placeholder="Search" autocomplete="off" autofocus >
</div>
<h2 class="category">Editors</h2>
<h2 class="category">Editors/Viewers</h2>
<ul>
<li><a class="selected" href="./tweakpane-editor/">Tweakpane Editor </a></li>
<li><a href="./model-viewer/">Model Viewer </a></li>
</ul>
<h2 class="category">Post-Processing</h2>
<ul>
@@ -359,7 +360,7 @@
<ul>
<li><a href="./fbx-load/">FBX Load </a></li>
<li><a href="./obj-mtl-load/">OBJ MTL Load </a></li>
<li><a href="./gltf-load/">GLTF Load </a></li>
<li><a href="./gltf-load/">glTF Load </a></li>
<li><a href="./rhino3dm-load/">Rhino 3DM Load </a></li>
<li><a href="./drc-load/">DRACO(DRC) Load </a></li>
<li><a href="./hdr-load/">HDR Load </a></li>
@@ -373,14 +374,17 @@
<li><a href="./blend-load/">BLEND Load </a></li>
<li><a href="./splat-load/">SPLAT Load<br/>(Gaussian Splatting) </a></li>
<li><a href="./extra-importer-plugins/">Extra(3ds, 3mf, collada, amf, bvh, vox, gcode, mdd, pcd, tilt, wrl, ldraw, vtk, xyz) Load </a></li>
<li><a href="./gltf-meshopt-compression/">glTF MeshOpt Decode (Compression Extension) </a></li>
</ul>
<h2 class="category">Export</h2>
<ul>
<li><a href="./asset-exporter-plugin/">Asset Exporter Plugin<br/>(Scene/GLB Snapshot) </a></li>
<li><a href="./canvas-snapshot-plugin/">Canvas Snapshot Plugin<br/>(Image Snapshot) </a></li>
<li><a href="./image-snapshot-export/">PNG, JPEG, WEBP Export<br/>(Image Snapshot) </a></li>
<li><a href="./render-target-export/">EXR, PNG, JPEG, WEBP Export<br/>(Render Target Export) </a></li>
<li><a href="./glb-export/">GLB Export </a></li>
<li><a href="./pmat-material-export/">PMAT Material Export </a></li>
<li><a href="./transfr-share-plugin/">Transfr.one Share Plugin<br/>(Upload, share link) </a></li>
<li><a href="./svg-geometry-playground/">SVG Geometry Playground </a></li>
</ul>
<h2 class="category">UI Plugins</h2>
@@ -422,6 +426,7 @@
<li><a href="./geometry-generator-plugin/">Geometry Generator Plugin </a></li>
<li><a href="./object3d-widgets-plugin/">Object3D Widgets Plugin <br/>(Lights, Cameras)</a></li>
<li><a href="./geometry-uv-preview/">Geometry UV Preview Plugin </a></li>
<li><a href="./aws-client-plugin/">AWS Client Plugin <br/>(S3/R2 upload) </a></li>
<li><a href="./parallel-asset-import/">Parallel Asset Import </a></li>
<li><a href="./obj-to-glb/">Convert OBJ to GLB </a></li>
<li><a href="./3dm-to-glb/">Convert 3DM to GLB </a></li>

+ 52
- 0
examples/model-viewer/index.html Прегледај датотеку

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Model Viewer Sample</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": {
"three": "./../../dist/index.mjs",
"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-extra-importers": "./../../plugins/extra-importers/dist/index.mjs",
"@threepipe/plugin-blend-importer": "./../../plugins/blend-importer/dist/index.mjs",
"@threepipe/plugin-configurator": "./../../plugins/configurator/dist/index.mjs",
"@threepipe/plugin-network": "./../../plugins/network/dist/index.mjs",
"@threepipe/plugin-gaussian-splatting": "./../../plugins/gaussian-splatting/dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
#prompt-div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #333;
font-size: 2em;
font-family: sans-serif;
pointer-events: none;
}
</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 id="prompt-div">Drop any <span style="font-family: monospace">glb/gltf/zip/fbx/obj/stl/3dm...</span> files here</div>
</div>

</body>

+ 156
- 0
examples/model-viewer/script.ts Прегледај датотеку

@@ -0,0 +1,156 @@
import {
_testFinish,
CameraViewPlugin,
CanvasSnapshotPlugin,
ChromaticAberrationPlugin,
ClearcoatTintPlugin,
ContactShadowGroundPlugin,
CustomBumpMapPlugin,
DepthBufferPlugin,
DeviceOrientationControlsPlugin,
DropzonePlugin,
EditorViewWidgetPlugin,
FilmicGrainPlugin,
FragmentClippingExtensionPlugin,
FrameFadePlugin,
GBufferPlugin,
getUrlQueryParam,
GLTFAnimationPlugin,
GLTFKHRMaterialVariantsPlugin,
GLTFMeshOptDecodePlugin,
HalfFloatType,
HDRiGroundPlugin,
HemisphereLight,
KTX2LoadPlugin,
KTXLoadPlugin,
LoadingScreenPlugin,
MeshOptSimplifyModifierPlugin,
NoiseBumpMaterialPlugin,
NormalBufferPlugin,
Object3DGeneratorPlugin,
Object3DWidgetsPlugin,
ParallaxMappingPlugin,
PickingPlugin,
PLYLoadPlugin,
PointerLockControlsPlugin,
ProgressivePlugin,
RenderTargetPreviewPlugin,
Rhino3dmLoadPlugin,
SSAAPlugin,
SSAOPlugin,
STLLoadPlugin,
ThreeFirstPersonControlsPlugin,
ThreeViewer,
TransformControlsPlugin,
UnsignedByteType,
USDZLoadPlugin,
ViewerUiConfigPlugin,
VignettePlugin,
VirtualCamerasPlugin,
} from 'threepipe'
import {GaussianSplattingPlugin} from '@threepipe/plugin-gaussian-splatting'
import {MaterialConfiguratorPlugin, SwitchNodePlugin} from '@threepipe/plugin-configurator'
import {BlendLoadPlugin} from '@threepipe/plugin-blend-importer'
import {extraImportPlugins} from '@threepipe/plugin-extra-importers'
import {AWSClientPlugin} from '@threepipe/plugin-network'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
renderScale: 'auto',
msaa: true,
rgbm: true,
zPrepass: false, // set it to true if you only have opaque objects in the scene to get better performance.
dropzone: { // this can also be set to true and configured by getting a reference to the DropzonePlugin
// allowedExtensions: ['gltf', 'glb', 'hdr', 'bin', 'png', 'jpeg', 'webp', 'jpg', 'exr', 'fbx', 'obj'], // only allow these file types. If undefined, all files are allowed.
addOptions: {
disposeSceneObjects: true, // auto dispose of old scene objects
autoSetEnvironment: true, // when hdr is dropped
autoSetBackground: true, // when any image is dropped
autoCenter: true, // auto center the object
autoScale: true, // auto scale according to radius
autoScaleRadius: 2,
// license: 'Imported from dropzone', // Any license to set on imported objects
importConfig: true, // import config from file
},
},
})


await viewer.addPlugins([
LoadingScreenPlugin,
new ProgressivePlugin(),
new SSAAPlugin(),
GLTFAnimationPlugin,
PickingPlugin,
new TransformControlsPlugin(false),
EditorViewWidgetPlugin,
CameraViewPlugin,
ViewerUiConfigPlugin,
ClearcoatTintPlugin,
FragmentClippingExtensionPlugin,
NoiseBumpMaterialPlugin,
CustomBumpMapPlugin,
new ParallaxMappingPlugin(false),
GLTFKHRMaterialVariantsPlugin,
VirtualCamerasPlugin,
// new SceneUiConfigPlugin(), // this is already in ViewerUiPlugin
new GBufferPlugin(HalfFloatType, true, true, true),
new DepthBufferPlugin(HalfFloatType, false, false),
new NormalBufferPlugin(HalfFloatType, false),
new RenderTargetPreviewPlugin(false),
new FrameFadePlugin(),
new HDRiGroundPlugin(false, true),
new VignettePlugin(false),
new ChromaticAberrationPlugin(false),
new FilmicGrainPlugin(false),
new SSAOPlugin(UnsignedByteType, 1),
KTX2LoadPlugin,
KTXLoadPlugin,
PLYLoadPlugin,
Rhino3dmLoadPlugin,
STLLoadPlugin,
USDZLoadPlugin,
BlendLoadPlugin,
Object3DWidgetsPlugin,
Object3DGeneratorPlugin,
GaussianSplattingPlugin,
ContactShadowGroundPlugin,
CanvasSnapshotPlugin,
DeviceOrientationControlsPlugin,
PointerLockControlsPlugin,
ThreeFirstPersonControlsPlugin,
// InteractionPromptPlugin, // todo disable when not in Viewer tab, like in webgi
new MeshOptSimplifyModifierPlugin(false, document.head), // will auto-initialize on first use.
new GLTFMeshOptDecodePlugin(true, document.head),
// new BasicSVGRendererPlugin(false, true),
...extraImportPlugins,
MaterialConfiguratorPlugin,
SwitchNodePlugin,
AWSClientPlugin,
])

const hemiLight = viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 5), {addToRoot: true})
hemiLight.name = 'Hemisphere Light'

await viewer.setEnvironmentMap(getUrlQueryParam('env') ?? 'https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')

const model = getUrlQueryParam('m') || getUrlQueryParam('model')
if (model) {
await viewer.load(model)
const promptDiv = document.getElementById('prompt-div')!
promptDiv.style.display = 'none'
}

const dropzone = viewer.getPlugin(DropzonePlugin)!
dropzone.addEventListener('drop', (e: any) => {
if (!e.assets?.length) return // no assets imported
console.log('Dropped Event:', e)
const promptDiv = document.getElementById('prompt-div')!
promptDiv.style.display = 'none'
})

}

init().finally(_testFinish)

+ 37
- 0
examples/transfr-share-plugin/index.html Прегледај датотеку

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transfr.one Share 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",
"@threepipe/plugin-network": "./../../plugins/network/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>

+ 52
- 0
examples/transfr-share-plugin/script.ts Прегледај датотеку

@@ -0,0 +1,52 @@
import {
_testFinish,
AssetExporterPlugin,
getUrlQueryParam,
IObject3D,
LoadingScreenPlugin,
SceneUiConfigPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
import {TransfrSharePlugin} from '@threepipe/plugin-network'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
plugins: [SceneUiConfigPlugin, LoadingScreenPlugin],
})

viewer.getPlugin(LoadingScreenPlugin)!.minimizeOnSceneObjectLoad = false

const sharePlugin = viewer.addPluginSync(new TransfrSharePlugin())
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
setBackground: true,
})

const modelUrlParam = 'm' // this is the default in TransfrSharePlugin
sharePlugin.queryParam = modelUrlParam
sharePlugin.baseUrls.viewer = 'https://threepipe.org/examples/model-viewer/index.html'
sharePlugin.baseUrls.editor = 'https://threepipe.org/examples/tweakpane-editor/index.html'

const modelUrl = getUrlQueryParam(modelUrlParam) ??
'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'
const result = await viewer.load<IObject3D>(modelUrl, {
autoCenter: true,
autoScale: true,
})

ui.setupPluginUi(AssetExporterPlugin, {expanded: true})
ui.setupPluginUi(TransfrSharePlugin, {expanded: true})
ui.setupPluginUi(SceneUiConfigPlugin)

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

}

init().finally(_testFinish)

+ 1
- 0
examples/tweakpane-editor/index.html Прегледај датотеку

@@ -23,6 +23,7 @@
"@threepipe/plugin-blend-importer": "./../../plugins/blend-importer/dist/index.mjs",
"@threepipe/plugin-geometry-generator": "./../../plugins/geometry-generator/dist/index.mjs",
"@threepipe/plugin-configurator": "./../../plugins/configurator/dist/index.mjs",
"@threepipe/plugin-network": "./../../plugins/network/dist/index.mjs",
"@threepipe/plugin-gaussian-splatting": "./../../plugins/gaussian-splatting/dist/index.mjs"
}
}

+ 14
- 4
examples/tweakpane-editor/script.ts Прегледај датотеку

@@ -1,5 +1,6 @@
import {
_testFinish,
AssetExporterPlugin,
CameraViewPlugin,
CanvasSnapshotPlugin,
ChromaticAberrationPlugin,
@@ -18,6 +19,7 @@ import {
getUrlQueryParam,
GLTFAnimationPlugin,
GLTFKHRMaterialVariantsPlugin,
GLTFMeshOptDecodePlugin,
HalfFloatType,
HDRiGroundPlugin,
HemisphereLight,
@@ -58,6 +60,7 @@ import {extraImportPlugins} from '@threepipe/plugin-extra-importers'
import {GeometryGeneratorPlugin} from '@threepipe/plugin-geometry-generator'
import {GaussianSplattingPlugin} from '@threepipe/plugin-gaussian-splatting'
import {MaterialConfiguratorPlugin, SwitchNodePlugin} from '@threepipe/plugin-configurator'
import {AWSClientPlugin, TransfrSharePlugin} from '@threepipe/plugin-network'

async function init() {

@@ -79,6 +82,8 @@ async function init() {
const editor = viewer.addPluginSync(new TweakpaneEditorPlugin())

await viewer.addPlugins([
LoadingScreenPlugin,
AssetExporterPlugin,
new ProgressivePlugin(),
new SSAAPlugin(),
GLTFAnimationPlugin,
@@ -123,11 +128,14 @@ async function init() {
PointerLockControlsPlugin,
ThreeFirstPersonControlsPlugin,
// InteractionPromptPlugin, // todo disable when not in Viewer tab, like in webgi
new MeshOptSimplifyModifierPlugin(false), // will auto-initialize on first use.
new MeshOptSimplifyModifierPlugin(false, document.head), // will auto-initialize on first use.
new GLTFMeshOptDecodePlugin(true, document.head),
// new BasicSVGRendererPlugin(false, true),
...extraImportPlugins,
MaterialConfiguratorPlugin,
SwitchNodePlugin,
AWSClientPlugin,
TransfrSharePlugin,
])

// to show more details in the UI and allow to edit changes in title etc.
@@ -146,17 +154,19 @@ async function init() {
['Interaction']: [HierarchyUiPlugin, TransformControlsPlugin, PickingPlugin, Object3DGeneratorPlugin, GeometryGeneratorPlugin, EditorViewWidgetPlugin, Object3DWidgetsPlugin, MeshOptSimplifyModifierPlugin],
['GBuffer']: [GBufferPlugin, DepthBufferPlugin, NormalBufferPlugin],
['Post-processing']: [TonemapPlugin, ProgressivePlugin, SSAOPlugin, FrameFadePlugin, VignettePlugin, ChromaticAberrationPlugin, FilmicGrainPlugin],
['Export']: [CanvasSnapshotPlugin],
['Export']: [AssetExporterPlugin, CanvasSnapshotPlugin, AWSClientPlugin, TransfrSharePlugin],
['Configurator']: [MaterialConfiguratorPlugin, SwitchNodePlugin, GLTFKHRMaterialVariantsPlugin],
['Animation']: [GLTFAnimationPlugin, CameraViewPlugin],
['Extras']: [HDRiGroundPlugin, Rhino3dmLoadPlugin, ClearcoatTintPlugin, FragmentClippingExtensionPlugin, NoiseBumpMaterialPlugin, CustomBumpMapPlugin, VirtualCamerasPlugin],
['Debug']: [RenderTargetPreviewPlugin],
})

const hemiLight = viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 5))
const hemiLight = viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 5), {addToRoot: true})
hemiLight.name = 'Hemisphere Light'

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
await viewer.setEnvironmentMap(getUrlQueryParam('env') ?? 'https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')

viewer.getPlugin(TransfrSharePlugin)!.queryParam = 'm'

const model = getUrlQueryParam('m') || getUrlQueryParam('model')
if (model) {

Write Preview
Loading…
Откажи
Сачувај