lzy
/
threepipe
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

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

master
Palash Bansal 2 anos atrás
pai
9d6a3456e8
commit
66a0fa5987
Nenhuma conta vinculada ao e-mail do autor do commit
9 arquivos alterados com 415 adições e 6 exclusões
Visão unificada Mostrar estatísticas do 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 Ver arquivo

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

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 Ver arquivo

</svg> </svg>
<input id="filterInput" type="text" placeholder="Search" autocomplete="off" autofocus > <input id="filterInput" type="text" placeholder="Search" autocomplete="off" autofocus >
</div> </div>
<h2 class="category">Editors</h2>
<h2 class="category">Editors/Viewers</h2>
<ul> <ul>
<li><a class="selected" href="./tweakpane-editor/">Tweakpane Editor </a></li> <li><a class="selected" href="./tweakpane-editor/">Tweakpane Editor </a></li>
<li><a href="./model-viewer/">Model Viewer </a></li>
</ul> </ul>
<h2 class="category">Post-Processing</h2> <h2 class="category">Post-Processing</h2>
<ul> <ul>
<ul> <ul>
<li><a href="./fbx-load/">FBX Load </a></li> <li><a href="./fbx-load/">FBX Load </a></li>
<li><a href="./obj-mtl-load/">OBJ MTL 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="./rhino3dm-load/">Rhino 3DM Load </a></li>
<li><a href="./drc-load/">DRACO(DRC) Load </a></li> <li><a href="./drc-load/">DRACO(DRC) Load </a></li>
<li><a href="./hdr-load/">HDR Load </a></li> <li><a href="./hdr-load/">HDR Load </a></li>
<li><a href="./blend-load/">BLEND Load </a></li> <li><a href="./blend-load/">BLEND Load </a></li>
<li><a href="./splat-load/">SPLAT Load<br/>(Gaussian Splatting) </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="./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> </ul>
<h2 class="category">Export</h2> <h2 class="category">Export</h2>
<ul> <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="./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="./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="./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="./glb-export/">GLB Export </a></li>
<li><a href="./pmat-material-export/">PMAT Material 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> <li><a href="./svg-geometry-playground/">SVG Geometry Playground </a></li>
</ul> </ul>
<h2 class="category">UI Plugins</h2> <h2 class="category">UI Plugins</h2>
<li><a href="./geometry-generator-plugin/">Geometry Generator Plugin </a></li> <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="./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="./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="./parallel-asset-import/">Parallel Asset Import </a></li>
<li><a href="./obj-to-glb/">Convert OBJ to GLB </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> <li><a href="./3dm-to-glb/">Convert 3DM to GLB </a></li>

+ 52
- 0
examples/model-viewer/index.html Ver arquivo

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

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 Ver arquivo

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

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 Ver arquivo

"@threepipe/plugin-blend-importer": "./../../plugins/blend-importer/dist/index.mjs", "@threepipe/plugin-blend-importer": "./../../plugins/blend-importer/dist/index.mjs",
"@threepipe/plugin-geometry-generator": "./../../plugins/geometry-generator/dist/index.mjs", "@threepipe/plugin-geometry-generator": "./../../plugins/geometry-generator/dist/index.mjs",
"@threepipe/plugin-configurator": "./../../plugins/configurator/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" "@threepipe/plugin-gaussian-splatting": "./../../plugins/gaussian-splatting/dist/index.mjs"
} }
} }

+ 14
- 4
examples/tweakpane-editor/script.ts Ver arquivo

import { import {
_testFinish, _testFinish,
AssetExporterPlugin,
CameraViewPlugin, CameraViewPlugin,
CanvasSnapshotPlugin, CanvasSnapshotPlugin,
ChromaticAberrationPlugin, ChromaticAberrationPlugin,
getUrlQueryParam, getUrlQueryParam,
GLTFAnimationPlugin, GLTFAnimationPlugin,
GLTFKHRMaterialVariantsPlugin, GLTFKHRMaterialVariantsPlugin,
GLTFMeshOptDecodePlugin,
HalfFloatType, HalfFloatType,
HDRiGroundPlugin, HDRiGroundPlugin,
HemisphereLight, HemisphereLight,
import {GeometryGeneratorPlugin} from '@threepipe/plugin-geometry-generator' import {GeometryGeneratorPlugin} from '@threepipe/plugin-geometry-generator'
import {GaussianSplattingPlugin} from '@threepipe/plugin-gaussian-splatting' import {GaussianSplattingPlugin} from '@threepipe/plugin-gaussian-splatting'
import {MaterialConfiguratorPlugin, SwitchNodePlugin} from '@threepipe/plugin-configurator' import {MaterialConfiguratorPlugin, SwitchNodePlugin} from '@threepipe/plugin-configurator'
import {AWSClientPlugin, TransfrSharePlugin} from '@threepipe/plugin-network'


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


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


await viewer.addPlugins([ await viewer.addPlugins([
LoadingScreenPlugin,
AssetExporterPlugin,
new ProgressivePlugin(), new ProgressivePlugin(),
new SSAAPlugin(), new SSAAPlugin(),
GLTFAnimationPlugin, GLTFAnimationPlugin,
PointerLockControlsPlugin, PointerLockControlsPlugin,
ThreeFirstPersonControlsPlugin, ThreeFirstPersonControlsPlugin,
// InteractionPromptPlugin, // todo disable when not in Viewer tab, like in webgi // 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), // new BasicSVGRendererPlugin(false, true),
...extraImportPlugins, ...extraImportPlugins,
MaterialConfiguratorPlugin, MaterialConfiguratorPlugin,
SwitchNodePlugin, SwitchNodePlugin,
AWSClientPlugin,
TransfrSharePlugin,
]) ])


// to show more details in the UI and allow to edit changes in title etc. // to show more details in the UI and allow to edit changes in title etc.
['Interaction']: [HierarchyUiPlugin, TransformControlsPlugin, PickingPlugin, Object3DGeneratorPlugin, GeometryGeneratorPlugin, EditorViewWidgetPlugin, Object3DWidgetsPlugin, MeshOptSimplifyModifierPlugin], ['Interaction']: [HierarchyUiPlugin, TransformControlsPlugin, PickingPlugin, Object3DGeneratorPlugin, GeometryGeneratorPlugin, EditorViewWidgetPlugin, Object3DWidgetsPlugin, MeshOptSimplifyModifierPlugin],
['GBuffer']: [GBufferPlugin, DepthBufferPlugin, NormalBufferPlugin], ['GBuffer']: [GBufferPlugin, DepthBufferPlugin, NormalBufferPlugin],
['Post-processing']: [TonemapPlugin, ProgressivePlugin, SSAOPlugin, FrameFadePlugin, VignettePlugin, ChromaticAberrationPlugin, FilmicGrainPlugin], ['Post-processing']: [TonemapPlugin, ProgressivePlugin, SSAOPlugin, FrameFadePlugin, VignettePlugin, ChromaticAberrationPlugin, FilmicGrainPlugin],
['Export']: [CanvasSnapshotPlugin],
['Export']: [AssetExporterPlugin, CanvasSnapshotPlugin, AWSClientPlugin, TransfrSharePlugin],
['Configurator']: [MaterialConfiguratorPlugin, SwitchNodePlugin, GLTFKHRMaterialVariantsPlugin], ['Configurator']: [MaterialConfiguratorPlugin, SwitchNodePlugin, GLTFKHRMaterialVariantsPlugin],
['Animation']: [GLTFAnimationPlugin, CameraViewPlugin], ['Animation']: [GLTFAnimationPlugin, CameraViewPlugin],
['Extras']: [HDRiGroundPlugin, Rhino3dmLoadPlugin, ClearcoatTintPlugin, FragmentClippingExtensionPlugin, NoiseBumpMaterialPlugin, CustomBumpMapPlugin, VirtualCamerasPlugin], ['Extras']: [HDRiGroundPlugin, Rhino3dmLoadPlugin, ClearcoatTintPlugin, FragmentClippingExtensionPlugin, NoiseBumpMaterialPlugin, CustomBumpMapPlugin, VirtualCamerasPlugin],
['Debug']: [RenderTargetPreviewPlugin], ['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' 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') const model = getUrlQueryParam('m') || getUrlQueryParam('model')
if (model) { if (model) {

Escrever Pré-visualização
Carregando…
Cancelar
Salvar