lzy
/
threepipe
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Add global loading indicator in examples

master
Palash Bansal 1 year ago
parent
49047156d7
commit
d3b0fd2d5c
No account linked to committer's email address
100 changed files with 373 additions and 66 deletions
Unified View Show Diff Stats
  1. 1
    0
      examples/3d-tiles-renderer/index.html
  2. 1
    0
      examples/3dm-to-glb/index.html
  3. 10
    1
      examples/3dm-to-glb/script.ts
  4. 38
    0
      examples/advanced-ground-plugin/index.html
  5. 55
    0
      examples/advanced-ground-plugin/script.ts
  6. 1
    0
      examples/ambient-light/index.html
  7. 2
    1
      examples/ambient-light/script.ts
  8. 1
    0
      examples/anisotropy-plugin/index.html
  9. 10
    1
      examples/anisotropy-plugin/script.ts
  10. 1
    0
      examples/asset-exporter-plugin/index.html
  11. 2
    1
      examples/asset-exporter-plugin/script.ts
  12. 1
    0
      examples/aws-client-plugin/index.html
  13. 2
    1
      examples/aws-client-plugin/script.ts
  14. 3
    1
      examples/b3dm-load/index.html
  15. 1
    0
      examples/basic-svg-renderer-plugin/index.html
  16. 2
    1
      examples/basic-svg-renderer-plugin/script.ts
  17. 3
    1
      examples/blend-load/index.html
  18. 1
    0
      examples/bloom-plugin/index.html
  19. 10
    1
      examples/bloom-plugin/script.ts
  20. 1
    0
      examples/blueprintjs-ui-plugin/index.html
  21. 2
    1
      examples/blueprintjs-ui-plugin/script.ts
  22. 1
    0
      examples/camera-ortho-uiconfig/index.html
  23. 2
    1
      examples/camera-ortho-uiconfig/script.ts
  24. 1
    0
      examples/camera-uiconfig/index.html
  25. 2
    1
      examples/camera-uiconfig/script.ts
  26. 1
    0
      examples/camera-view-plugin/index.html
  27. 2
    1
      examples/camera-view-plugin/script.ts
  28. 1
    0
      examples/canvas-snapshot-plugin/index.html
  29. 2
    1
      examples/canvas-snapshot-plugin/script.ts
  30. 1
    0
      examples/chromatic-aberration-plugin/index.html
  31. 9
    1
      examples/chromatic-aberration-plugin/script.ts
  32. 1
    0
      examples/clearcoat-tint-plugin/index.html
  33. 2
    1
      examples/clearcoat-tint-plugin/script.ts
  34. 3
    1
      examples/cmpt-load/index.html
  35. 1
    0
      examples/contact-shadow-ground-plugin/index.html
  36. 9
    1
      examples/contact-shadow-ground-plugin/script.ts
  37. 1
    0
      examples/custom-bump-map-plugin/index.html
  38. 2
    1
      examples/custom-bump-map-plugin/script.ts
  39. 1
    0
      examples/custom-pipeline/index.html
  40. 2
    1
      examples/custom-pipeline/script.ts
  41. 1
    0
      examples/depth-buffer-plugin/index.html
  42. 2
    1
      examples/depth-buffer-plugin/script.ts
  43. 1
    0
      examples/depthoffield-plugin/index.html
  44. 2
    1
      examples/depthoffield-plugin/script.ts
  45. 1
    0
      examples/device-orientation-controls-plugin/index.html
  46. 9
    1
      examples/device-orientation-controls-plugin/script.ts
  47. 1
    0
      examples/directional-light/index.html
  48. 2
    1
      examples/directional-light/script.ts
  49. 3
    1
      examples/drc-load/index.html
  50. 1
    0
      examples/dropzone-plugin/index.html
  51. 2
    1
      examples/dropzone-plugin/script.ts
  52. 1
    0
      examples/editor-view-widget-plugin/index.html
  53. 10
    1
      examples/editor-view-widget-plugin/script.ts
  54. 29
    0
      examples/examples-utils/global-loading.mjs
  55. 4
    1
      examples/exr-load/index.html
  56. 1
    0
      examples/extra-importer-plugins/index.html
  57. 18
    17
      examples/extra-importer-plugins/script.ts
  58. 1
    0
      examples/fat-lines/index.html
  59. 2
    1
      examples/fat-lines/script.ts
  60. 3
    1
      examples/fbx-load/index.html
  61. 1
    0
      examples/filmic-grain-plugin/index.html
  62. 2
    1
      examples/filmic-grain-plugin/script.ts
  63. 1
    0
      examples/fragment-clipping-extension-plugin/index.html
  64. 2
    1
      examples/fragment-clipping-extension-plugin/script.ts
  65. 1
    0
      examples/frame-fade-plugin/index.html
  66. 2
    1
      examples/frame-fade-plugin/script.ts
  67. 1
    0
      examples/fullscreen-plugin/index.html
  68. 2
    1
      examples/fullscreen-plugin/script.ts
  69. 1
    0
      examples/gbuffer-plugin/index.html
  70. 2
    1
      examples/gbuffer-plugin/script.ts
  71. 1
    0
      examples/geometry-generator-plugin/index.html
  72. 2
    1
      examples/geometry-generator-plugin/script.ts
  73. 1
    0
      examples/geometry-uv-preview/index.html
  74. 2
    1
      examples/geometry-uv-preview/script.ts
  75. 1
    0
      examples/glb-draco-export/index.html
  76. 10
    1
      examples/glb-draco-export/script.ts
  77. 1
    0
      examples/glb-export/index.html
  78. 2
    1
      examples/glb-export/script.ts
  79. 1
    0
      examples/gltf-animation-page-scroll/index.html
  80. 2
    1
      examples/gltf-animation-page-scroll/script.ts
  81. 1
    0
      examples/gltf-animation-plugin/index.html
  82. 2
    1
      examples/gltf-animation-plugin/script.ts
  83. 1
    0
      examples/gltf-camera-animation/index.html
  84. 2
    1
      examples/gltf-camera-animation/script.ts
  85. 1
    0
      examples/gltf-khr-material-variants-plugin/index.html
  86. 2
    1
      examples/gltf-khr-material-variants-plugin/script.ts
  87. 1
    0
      examples/gltf-load/index.html
  88. 2
    1
      examples/gltf-load/script.ts
  89. 1
    0
      examples/gltf-mesh-lines/index.html
  90. 2
    1
      examples/gltf-mesh-lines/script.ts
  91. 1
    0
      examples/gltf-meshopt-compression/index.html
  92. 2
    1
      examples/gltf-meshopt-compression/script.ts
  93. 1
    0
      examples/gltf-transmission-test-msaa-zprepass/index.html
  94. 9
    1
      examples/gltf-transmission-test-msaa-zprepass/script.ts
  95. 1
    0
      examples/gltf-transmission-test-msaa/index.html
  96. 9
    1
      examples/gltf-transmission-test-msaa/script.ts
  97. 1
    0
      examples/gltf-transmission-test/index.html
  98. 9
    1
      examples/gltf-transmission-test/script.ts
  99. 1
    0
      examples/half-float-hdr-test/index.html
  100. 0
    0
      examples/half-float-hdr-test/script.ts

+ 1
- 0
examples/3d-tiles-renderer/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 1
- 0
examples/3dm-to-glb/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 10
- 1
examples/3dm-to-glb/script.ts View File

import {_testFinish, downloadBlob, IObject3D, LoadingScreenPlugin, Rhino3dmLoadPlugin, ThreeViewer} from 'threepipe'
import {
_testFinish,
_testStart,
downloadBlob,
IObject3D,
LoadingScreenPlugin,
Rhino3dmLoadPlugin,
ThreeViewer,
} from 'threepipe'


const viewer = new ThreeViewer({ const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement, canvas: document.getElementById('mcanvas') as HTMLCanvasElement,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 38
- 0
examples/advanced-ground-plugin/index.html View File

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced Ground 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/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@0.5.0/dist/index.mjs",
"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/global-loading.mjs"></script>
<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>

+ 55
- 0
examples/advanced-ground-plugin/script.ts View File

import {
_testFinish, _testStart,
GBufferPlugin,
IObject3D,
LoadingScreenPlugin,
PCFSoftShadowMap,
RenderTargetPreviewPlugin,
SSAAPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
// @ts-expect-error todo fix import
import {AdvancedGroundPlugin, SSReflectionPlugin, TemporalAAPlugin} from '@threepipe/webgi-plugins'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
rgbm: true,
dropzone: {
addOptions: {
disposeSceneObjects: true,
},
},
plugins: [LoadingScreenPlugin, GBufferPlugin, SSAAPlugin, TemporalAAPlugin],
// rgbm: false,
})
viewer.renderManager.stableNoise = true

const ground = viewer.addPluginSync(AdvancedGroundPlugin)
ground.planarReflections = true

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

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

ui.setupPluginUi(AdvancedGroundPlugin)

viewer.renderManager.renderer.shadowMap.type = PCFSoftShadowMap

const rt = viewer.addPluginSync(RenderTargetPreviewPlugin)
rt.addTarget(()=>ground.shadowBaker?.light.shadow.map, 'shadow', false, false, true, (s)=>s + ' = vec4(' + s + '.r/2.);')
rt.addTarget(()=>ground.shadowBaker?.target, 'baked shadow', false, false, true)

}

_testStart()
init().then(_testFinish)

+ 1
- 0
examples/ambient-light/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/ambient-light/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
AmbientLight2, AmbientLight2,
Box3B, Box3B,
IObject3D, IObject3D,
ui.appendChild(light.uiConfig, {expanded: true}) ui.appendChild(light.uiConfig, {expanded: true})
} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/anisotropy-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 10
- 1
examples/anisotropy-plugin/script.ts View File

import {_testFinish, IObject3D, LoadingScreenPlugin, PickingPlugin, SSAAPlugin, ThreeViewer} from 'threepipe'
import {
_testFinish,
_testStart,
IObject3D,
LoadingScreenPlugin,
PickingPlugin,
SSAAPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
// @ts-expect-error todo fix // @ts-expect-error todo fix
import {AnisotropyPlugin, BloomPlugin, OutlinePlugin, SSContactShadowsPlugin, TemporalAAPlugin} from '@threepipe/webgi-plugins' import {AnisotropyPlugin, BloomPlugin, OutlinePlugin, SSContactShadowsPlugin, TemporalAAPlugin} from '@threepipe/webgi-plugins'


} }


_testStart()
init().then(_testFinish) init().then(_testFinish)

+ 1
- 0
examples/asset-exporter-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/asset-exporter-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
AssetExporterPlugin, AssetExporterPlugin,
IObject3D, IObject3D,
LoadingScreenPlugin, LoadingScreenPlugin,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/aws-client-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/aws-client-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
AssetExporterPlugin, AssetExporterPlugin,
IObject3D, IObject3D,
LoadingScreenPlugin, LoadingScreenPlugin,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 3
- 1
examples/b3dm-load/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, LoadingScreenPlugin, ThreeViewer, Vector3} from 'threepipe'
import {_testFinish, _testStart, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {B3DMLoadPlugin} from '@threepipe/plugin-3d-tiles-renderer' import {B3DMLoadPlugin} from '@threepipe/plugin-3d-tiles-renderer'


const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')}) const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})
result2.setDirty() result2.setDirty()
} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)
</script> </script>
</head> </head>

+ 1
- 0
examples/basic-svg-renderer-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/basic-svg-renderer-plugin/script.ts View File

import {_testFinish, DirectionalLight2, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, DirectionalLight2, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
import {BasicSVGRendererPlugin} from '@threepipe/plugin-svg-renderer' import {BasicSVGRendererPlugin} from '@threepipe/plugin-svg-renderer'


ui.appendChild(l.uiConfig) ui.appendChild(l.uiConfig)
} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 3
- 1
examples/blend-load/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {BlendLoadPlugin} from '@threepipe/plugin-blend-importer' import {BlendLoadPlugin} from '@threepipe/plugin-blend-importer'


const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')}) const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})
console.log(result) console.log(result)
} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)
</script> </script>
</head> </head>

+ 1
- 0
examples/bloom-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 10
- 1
examples/bloom-plugin/script.ts View File

import {_testFinish, IObject3D, LoadingScreenPlugin, PhysicalMaterial, SSAAPlugin, ThreeViewer} from 'threepipe'
import {
_testFinish,
_testStart,
IObject3D,
LoadingScreenPlugin,
PhysicalMaterial,
SSAAPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
// @ts-expect-error todo fix // @ts-expect-error todo fix
import {BloomPlugin, TemporalAAPlugin} from '@threepipe/webgi-plugins' import {BloomPlugin, TemporalAAPlugin} from '@threepipe/webgi-plugins'


} }


_testStart()
init().then(_testFinish) init().then(_testFinish)

+ 1
- 0
examples/blueprintjs-ui-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/blueprintjs-ui-plugin/script.ts View File

import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer, TonemapPlugin} from 'threepipe'
import {_testFinish, _testStart, IObject3D, LoadingScreenPlugin, ThreeViewer, TonemapPlugin} from 'threepipe'
import {BlueprintJsUiPlugin} from '@threepipe/plugin-blueprintjs' import {BlueprintJsUiPlugin} from '@threepipe/plugin-blueprintjs'


async function init() { async function init() {


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/camera-ortho-uiconfig/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/camera-ortho-uiconfig/script.ts View File

import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'


async function init() { async function init() {


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/camera-uiconfig/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/camera-uiconfig/script.ts View File

import {_testFinish, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'


async function init() { async function init() {


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/camera-view-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/camera-view-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
CameraView, CameraView,
CameraViewPlugin, CameraViewPlugin,
EasingFunctions, EasingFunctions,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/canvas-snapshot-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/canvas-snapshot-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
CanvasSnapshotPlugin, CanvasSnapshotPlugin,
isWebpExportSupported, isWebpExportSupported,
LoadingScreenPlugin, LoadingScreenPlugin,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/chromatic-aberration-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 9
- 1
examples/chromatic-aberration-plugin/script.ts View File

import {_testFinish, ChromaticAberrationPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {
_testFinish,
_testStart,
ChromaticAberrationPlugin,
IObject3D,
LoadingScreenPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'


async function init() { async function init() {


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/clearcoat-tint-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/clearcoat-tint-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
ClearcoatTintPlugin, ClearcoatTintPlugin,
IObject3D, IObject3D,
LoadingScreenPlugin, LoadingScreenPlugin,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 3
- 1
examples/cmpt-load/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, LoadingScreenPlugin, ThreeViewer, Vector3, Box3B} from 'threepipe'
import {_testFinish, _testStart, LoadingScreenPlugin, ThreeViewer, Vector3, Box3B} from 'threepipe'
import {CMPTLoadPlugin} from '@threepipe/plugin-3d-tiles-renderer' import {CMPTLoadPlugin} from '@threepipe/plugin-3d-tiles-renderer'


const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')}) const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})
console.log(new Box3B(result2).getCenter(new Vector3())) // todo why is this is NaN? console.log(new Box3B(result2).getCenter(new Vector3())) // todo why is this is NaN?
} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)
</script> </script>
</head> </head>

+ 1
- 0
examples/contact-shadow-ground-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 9
- 1
examples/contact-shadow-ground-plugin/script.ts View File

import {_testFinish, ContactShadowGroundPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {
_testFinish,
_testStart,
ContactShadowGroundPlugin,
IObject3D,
LoadingScreenPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'


async function init() { async function init() {


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/custom-bump-map-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/custom-bump-map-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
CustomBumpMapPlugin, CustomBumpMapPlugin,
ITexture, ITexture,
LoadingScreenPlugin, LoadingScreenPlugin,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/custom-pipeline/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/custom-pipeline/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
DepthBufferPlugin, DepthBufferPlugin,
downloadBlob, downloadBlob,
HalfFloatType, HalfFloatType,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/depth-buffer-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/depth-buffer-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
DepthBufferPlugin, DepthBufferPlugin,
downloadBlob, downloadBlob,
HalfFloatType, HalfFloatType,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/depthoffield-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/depthoffield-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
IObject3D, IObject3D,
LoadingScreenPlugin, LoadingScreenPlugin,
PhysicalMaterial, PhysicalMaterial,
viewer.scene.mainCamera.setDirty() viewer.scene.mainCamera.setDirty()
} }


_testStart()
init().then(_testFinish) init().then(_testFinish)

+ 1
- 0
examples/device-orientation-controls-plugin/index.html View File

backdrop-filter: blur(16px); backdrop-filter: blur(16px);
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 9
- 1
examples/device-orientation-controls-plugin/script.ts View File

import {_testFinish, DeviceOrientationControlsPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {
_testFinish,
_testStart,
DeviceOrientationControlsPlugin,
IObject3D,
LoadingScreenPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'


async function init() { async function init() {


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/directional-light/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/directional-light/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
Box3B, Box3B,
DirectionalLight2, DirectionalLight2,
IObject3D, IObject3D,
ui.appendChild(light.uiConfig, {expanded: true}) ui.appendChild(light.uiConfig, {expanded: true})
} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 3
- 1
examples/drc-load/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, ThreeViewer} from 'threepipe'


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


console.log(result) console.log(result)
} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)
</script> </script>
</head> </head>

+ 1
- 0
examples/dropzone-plugin/index.html View File

pointer-events: none; pointer-events: none;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/dropzone-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
DropzonePlugin, DropzonePlugin,
LoadingScreenPlugin, LoadingScreenPlugin,
PickingPlugin, PickingPlugin,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/editor-view-widget-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 10
- 1
examples/editor-view-widget-plugin/script.ts View File

import {_testFinish, EditorViewWidgetPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer, timeout} from 'threepipe'
import {
_testFinish,
_testStart,
EditorViewWidgetPlugin,
IObject3D,
LoadingScreenPlugin,
ThreeViewer,
timeout,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'


async function init() { async function init() {
plugin.setOrientation('+z') plugin.setOrientation('+z')
} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 29
- 0
examples/examples-utils/global-loading.mjs View File

function run () {
if (document.body.classList.contains('_testStarted')) return
const div = document.createElement('div');
const colorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
Object.assign(div.style, {
position: 'fixed', top: 0, left: 0, bottom: 0, right: 0, width: 'auto', height: 'max-content',
display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column',
background: 'transparent', pointerEvents: 'none',
zIndex: '49', // loading screen is 50
transition: 'opacity 0.5s ease',
color: colorScheme !== 'dark' ? '#eee' : '#222',
fontSize: '1.25rem',
margin: 'auto',
});
div.innerHTML = '<div style="width:32px;height:32px;border:4px solid #ccc;border-top:4px solid #333;border-radius:50%;animation:spin 1s linear infinite;margin:auto"></div><div style="text-align:center;margin-top:8px;font-family:sans-serif">Loading...</div><style>@keyframes spin{100%{transform:rotate(360deg)}}</style>';
document.body.appendChild(div);
let removed = false

function remove () {
if (removed) return
removed = true
div.style.opacity = '0';
setTimeout(() => div.remove(), 600);
}

window.addEventListener('threepipe-test-started', remove)
setTimeout(remove, 8000); // remove after 5 seconds if not removed
}
run()

+ 4
- 1
examples/exr-load/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, ThreeViewer} from 'threepipe'



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




} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)
</script> </script>
</head> </head>

+ 1
- 0
examples/extra-importer-plugins/index.html View File

pointer-events: none; pointer-events: none;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 18
- 17
examples/extra-importer-plugins/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
GLTFAnimationPlugin, GLTFAnimationPlugin,
HemisphereLight, HemisphereLight,
ImportAddOptions, ImportAddOptions,


viewer.scene.setBackgroundColor('#555555') viewer.scene.setBackgroundColor('#555555')
viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 2)) viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 2))
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
await viewer.setEnvironmentMap('https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/textures/equirectangular/venice_sunset_1k.hdr')


const urls = [ const urls = [
'https://threejs.org/examples/models/3ds/portalgun/portalgun.3ds',
'https://threejs.org/examples/models/3mf/cube_gears.3mf',
'https://threejs.org/examples/models/collada/elf/elf.dae',
'https://threejs.org/examples/models/amf/rook.amf',
'https://threejs.org/examples/models/gcode/benchy.gcode',
'https://threejs.org/examples/models/bvh/pirouette.bvh',
'https://threejs.org/examples/models/vox/monu10.vox',
'https://threejs.org/examples/models/mdd/cube.mdd',
'https://threejs.org/examples/models/pcd/binary/Zaghetto.pcd',
'https://threejs.org/examples/models/tilt/BRUSH_DOME.tilt',
'https://threejs.org/examples/models/ldraw/officialLibrary/models/car.ldr_Packed.mpd',
'https://threejs.org/examples/models/vtk/bunny.vtk',
'https://threejs.org/examples/models/vtk/cube_binary.vtp',
'https://threejs.org/examples/models/xyz/helix_201.xyz',
'https://threejs.org/examples/models/vrml/meshWithTexture.wrl',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/3ds/portalgun/portalgun.3ds', // todo - to load textures there should be a way to set basepath to portalgun/textures
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/3mf/cube_gears.3mf',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/collada/elf/elf.dae',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/amf/rook.amf',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/gcode/benchy.gcode',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/bvh/pirouette.bvh',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/vox/monu10.vox',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/mdd/cube.mdd',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/pcd/binary/Zaghetto.pcd',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/tilt/BRUSH_DOME.tilt',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/ldraw/officialLibrary/models/car.ldr_Packed.mpd',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/vtk/bunny.vtk',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/vtk/cube_binary.vtp',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/xyz/helix_201.xyz',
'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/vrml/meshWithTexture.wrl',
] ]


const options: ImportAddOptions = { const options: ImportAddOptions = {


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)



+ 1
- 0
examples/fat-lines/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/fat-lines/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
Color, Color,
GLTFLoader2, GLTFLoader2,
IObject3D, IObject3D,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 3
- 1
examples/fbx-load/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, HemisphereLight, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, HemisphereLight, ThreeViewer} from 'threepipe'


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




} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)
</script> </script>
</head> </head>

+ 1
- 0
examples/filmic-grain-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/filmic-grain-plugin/script.ts View File

import {_testFinish, FilmicGrainPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, FilmicGrainPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'


async function init() { async function init() {


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/fragment-clipping-extension-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/fragment-clipping-extension-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
FragmentClippingExtensionPlugin, FragmentClippingExtensionPlugin,
IObject3D, IObject3D,
LoadingScreenPlugin, LoadingScreenPlugin,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/frame-fade-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/frame-fade-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
BoxGeometry, BoxGeometry,
FrameFadePlugin, FrameFadePlugin,
LoadingScreenPlugin, LoadingScreenPlugin,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/fullscreen-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/fullscreen-plugin/script.ts View File

import {_testFinish, FullScreenPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, FullScreenPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js' import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'




} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/gbuffer-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/gbuffer-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
downloadBlob, downloadBlob,
FloatType, FloatType,
GBufferPlugin, GBufferPlugin,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/geometry-generator-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/geometry-generator-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
CameraViewPlugin, CameraViewPlugin,
LoadingScreenPlugin, LoadingScreenPlugin,
Object3DGeneratorPlugin, Object3DGeneratorPlugin,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)



+ 1
- 0
examples/geometry-uv-preview/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/geometry-uv-preview/script.ts View File

import {_testFinish, GeometryUVPreviewPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, GeometryUVPreviewPlugin, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'


const viewer = new ThreeViewer({ const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement, canvas: document.getElementById('mcanvas') as HTMLCanvasElement,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/glb-draco-export/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 10
- 1
examples/glb-draco-export/script.ts View File

import {_testFinish, AssetExporterPlugin, downloadBlob, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {
_testFinish,
_testStart,
AssetExporterPlugin,
downloadBlob,
IObject3D,
LoadingScreenPlugin,
ThreeViewer,
} from 'threepipe'
import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js' import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'
import {GLTFDracoExportPlugin} from '@threepipe/plugin-gltf-transform' import {GLTFDracoExportPlugin} from '@threepipe/plugin-gltf-transform'




} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/glb-export/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/glb-export/script.ts View File

import {_testFinish, downloadBlob, IMaterial, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, downloadBlob, IMaterial, IObject3D, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js' import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js'


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


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/gltf-animation-page-scroll/index.html View File

font-weight: 600; font-weight: 600;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/gltf-animation-page-scroll/script.ts View File

import {_testFinish, GLTFAnimationPlugin, ICamera, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, GLTFAnimationPlugin, ICamera, LoadingScreenPlugin, ThreeViewer} from 'threepipe'


async function init() { async function init() {




} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/gltf-animation-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/gltf-animation-plugin/script.ts View File

import {_testFinish, GLTFAnimationPlugin, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, GLTFAnimationPlugin, LoadingScreenPlugin, ThreeViewer} from 'threepipe'


async function init() { async function init() {




} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/gltf-camera-animation/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/gltf-camera-animation/script.ts View File

import {_testFinish, GLTFAnimationPlugin, ICamera, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, GLTFAnimationPlugin, ICamera, LoadingScreenPlugin, ThreeViewer} from 'threepipe'


async function init() { async function init() {




} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/gltf-khr-material-variants-plugin/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/gltf-khr-material-variants-plugin/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
GLTFKHRMaterialVariantsPlugin, GLTFKHRMaterialVariantsPlugin,
IObject3D, IObject3D,
LoadingScreenPlugin, LoadingScreenPlugin,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/gltf-load/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/gltf-load/script.ts View File

import {_testFinish, LoadingScreenPlugin, ThreeViewer} from 'threepipe'
import {_testFinish, _testStart, LoadingScreenPlugin, ThreeViewer} from 'threepipe'


async function init() { async function init() {




} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/gltf-mesh-lines/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/gltf-mesh-lines/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
BufferGeometry, BufferGeometry,
BufferGeometry2, BufferGeometry2,
Color, Color,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/gltf-meshopt-compression/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 2
- 1
examples/gltf-meshopt-compression/script.ts View File

import { import {
_testFinish,
_testFinish, _testStart,
GLTFMeshOptDecodePlugin, GLTFMeshOptDecodePlugin,
IObject3D, IObject3D,
KTX2LoadPlugin, KTX2LoadPlugin,


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/gltf-transmission-test-msaa-zprepass/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 9
- 1
examples/gltf-transmission-test-msaa-zprepass/script.ts View File

import {_testFinish, IObject3D, LoadingScreenPlugin, RenderTargetPreviewPlugin, ThreeViewer} from 'threepipe'
import {
_testFinish,
_testStart,
IObject3D,
LoadingScreenPlugin,
RenderTargetPreviewPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'


const viewer = new ThreeViewer({ const viewer = new ThreeViewer({


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/gltf-transmission-test-msaa/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 9
- 1
examples/gltf-transmission-test-msaa/script.ts View File

import {_testFinish, IObject3D, LoadingScreenPlugin, RenderTargetPreviewPlugin, ThreeViewer} from 'threepipe'
import {
_testFinish,
_testStart,
IObject3D,
LoadingScreenPlugin,
RenderTargetPreviewPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'


const viewer = new ThreeViewer({ const viewer = new ThreeViewer({


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/gltf-transmission-test/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 9
- 1
examples/gltf-transmission-test/script.ts View File

import {_testFinish, IObject3D, LoadingScreenPlugin, RenderTargetPreviewPlugin, ThreeViewer} from 'threepipe'
import {
_testFinish,
_testStart,
IObject3D,
LoadingScreenPlugin,
RenderTargetPreviewPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'


const viewer = new ThreeViewer({ const viewer = new ThreeViewer({


} }


_testStart()
init().finally(_testFinish) init().finally(_testFinish)

+ 1
- 0
examples/half-float-hdr-test/index.html View File

overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../examples-utils/global-loading.mjs"></script>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script> <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> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>

+ 0
- 0
examples/half-float-hdr-test/script.ts View File


Some files were not shown because too many files changed in this diff

Write Preview
Loading…
Cancel
Save