| "imports": { | "imports": { | ||||
| "three": "./../../dist/index.mjs", | "three": "./../../dist/index.mjs", | ||||
| "threepipe": "./../../dist/index.mjs", | "threepipe": "./../../dist/index.mjs", | ||||
| "@threepipe/plugins-extra-importers": "./../../plugins/extra-importers/dist/index.mjs" | |||||
| "@threepipe/plugins-extra-importers": "./../../plugins/extra-importers/dist/index.js" | |||||
| } | } | ||||
| } | } | ||||
| const links = document.querySelectorAll('li>a'); | const links = document.querySelectorAll('li>a'); | ||||
| let selected = document.querySelector('a.selected'); | let selected = document.querySelector('a.selected'); | ||||
| function selectTarget(target) { | |||||
| function selectTarget(target, scroll = false) { | |||||
| selected.classList.remove('selected'); | selected.classList.remove('selected'); | ||||
| target.classList.add('selected'); | target.classList.add('selected'); | ||||
| selected = target; | selected = target; | ||||
| iframe.src = target.href; | iframe.src = target.href; | ||||
| sidebar.dataset.selectedExample = target.innerText; | sidebar.dataset.selectedExample = target.innerText; | ||||
| window.location.hash = "#" + target.getAttribute("href").slice(2); | window.location.hash = "#" + target.getAttribute("href").slice(2); | ||||
| if(scroll){ | |||||
| setTimeout(() => { // this is required because of autofocus | |||||
| target.scrollIntoView({behavior: "smooth", block: "center"}); | |||||
| }, 100); | |||||
| } | |||||
| } | } | ||||
| links.forEach(link => { | links.forEach(link => { | ||||
| const hash = window.location.hash.slice(1); | const hash = window.location.hash.slice(1); | ||||
| if(hash){ | if(hash){ | ||||
| const target = document.querySelector(`a[href="./${hash}"]`); | const target = document.querySelector(`a[href="./${hash}"]`); | ||||
| selectTarget(target || selected); | |||||
| selectTarget(target || selected, true); | |||||
| } | } | ||||
| else selectTarget(selected); | |||||
| else selectTarget(selected, true); | |||||
| let urlParams = new URLSearchParams(window.location.search); | let urlParams = new URLSearchParams(window.location.search); | ||||
| let searchTerm = urlParams.get('q'); | let searchTerm = urlParams.get('q'); | ||||
| <li><a href="./dropzone-plugin/">Dropzone (Drag & Drop) Plugin </a></li> | <li><a href="./dropzone-plugin/">Dropzone (Drag & Drop) Plugin </a></li> | ||||
| <li><a href="./transform-controls-plugin/">Transform Controls Plugin </a></li> | <li><a href="./transform-controls-plugin/">Transform Controls Plugin </a></li> | ||||
| <li><a href="./editor-view-widget-plugin/">Editor View Widget Plugin </a></li> | <li><a href="./editor-view-widget-plugin/">Editor View Widget Plugin </a></li> | ||||
| <li><a href="./loading-screen-plugin/">FullScreen Plugin </a></li> | |||||
| <li><a href="./loading-screen-plugin/">Loading Screen Plugin </a></li> | |||||
| <li><a href="./fullscreen-plugin/">FullScreen Plugin </a></li> | <li><a href="./fullscreen-plugin/">FullScreen Plugin </a></li> | ||||
| <li><a href="./interaction-prompt-plugin/">Interaction Prompt Plugin </a></li> | <li><a href="./interaction-prompt-plugin/">Interaction Prompt Plugin </a></li> | ||||
| <li><a href="./device-orientation-controls-plugin/">Device Orientation Controls Plugin (Gyroscope) </a></li> | <li><a href="./device-orientation-controls-plugin/">Device Orientation Controls Plugin (Gyroscope) </a></li> | ||||
| <li><a href="./fragment-clipping-extension-plugin/">Fragment Clipping Extension Plugin </a></li> | <li><a href="./fragment-clipping-extension-plugin/">Fragment Clipping Extension Plugin </a></li> | ||||
| <li><a href="./noise-bump-material-plugin/">SparkleBump(NoiseBump) Material Plugin </a></li> | <li><a href="./noise-bump-material-plugin/">SparkleBump(NoiseBump) Material Plugin </a></li> | ||||
| <li><a href="./custom-bump-map-plugin/">Custom Bump Map Plugin </a></li> | <li><a href="./custom-bump-map-plugin/">Custom Bump Map Plugin </a></li> | ||||
| <li><a href="./parallax-mapping-plugin/">Parallax Mapping Plugin </a></li> | |||||
| <li><a href="./parallax-mapping-plugin/">Parallax(Relief) Mapping Plugin </a></li> | |||||
| </ul> | </ul> | ||||
| <h2 class="category">Utils</h2> | <h2 class="category">Utils</h2> | ||||
| <ul> | <ul> |
| "imports": { | "imports": { | ||||
| "three": "./../../dist/index.mjs", | "three": "./../../dist/index.mjs", | ||||
| "threepipe": "./../../dist/index.mjs", | "threepipe": "./../../dist/index.mjs", | ||||
| "@threepipe/plugins-extra-importers": "./../../plugins/extra-importers/dist/index.mjs", | |||||
| "@threepipe/plugins-extra-importers": "./../../plugins/extra-importers/dist/index.js", | |||||
| "@threepipe/plugin-blend-importer": "./../../plugins/blend-importer/dist/index.mjs", | "@threepipe/plugin-blend-importer": "./../../plugins/blend-importer/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-network": "./../../plugins/network/dist/index.mjs", |
| <div id="canvas-container"> | <div id="canvas-container"> | ||||
| <canvas id="mcanvas"></canvas> | <canvas id="mcanvas"></canvas> | ||||
| <div id="pointerLockOverlay"> | <div id="pointerLockOverlay"> | ||||
| Tap the screen to enable pointer lock controls | |||||
| Tap/Click the screen to enable pointer lock controls | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| to: cube.position.clone().add(new Vector3(0, isMovedUp ? -1 : 1, 0)), | to: cube.position.clone().add(new Vector3(0, isMovedUp ? -1 : 1, 0)), | ||||
| duration: 500, // ms | duration: 500, // ms | ||||
| onComplete: () => isMovedUp = !isMovedUp, | onComplete: () => isMovedUp = !isMovedUp, | ||||
| }) // setDirty is automatically called on the cube since it's the target | |||||
| onUpdate: () => cube.setDirty(), | |||||
| }) | |||||
| btn.disabled = false | btn.disabled = false | ||||
| }, | }, | ||||
| ['Rotate +90deg']: async(btn) => { | ['Rotate +90deg']: async(btn) => { |
| <script id="example-script" type="module" data-scripts="./index.html"> | <script id="example-script" type="module" data-scripts="./index.html"> | ||||
| // import {ThreeViewer, LoadingScreenPlugin} from 'https://threepipe.org/dist/index.mjs' | // import {ThreeViewer, LoadingScreenPlugin} from 'https://threepipe.org/dist/index.mjs' | ||||
| import {ThreeViewer, LoadingScreenPlugin} from './../../dist/index.mjs' | import {ThreeViewer, LoadingScreenPlugin} from './../../dist/index.mjs' | ||||
| import React from 'https://esm.sh/react' | |||||
| import ReactDOM from 'https://esm.sh/react-dom' | |||||
| import React from 'https://esm.sh/react@18' | |||||
| import ReactDOM from 'https://esm.sh/react-dom@18' | |||||
| function ThreeViewerComponent({ src }) { | function ThreeViewerComponent({ src }) { | ||||
| const canvasRef = React.useRef(null); | const canvasRef = React.useRef(null); |
| <script id="example-script" type="text/babel" data-scripts="./index.html" data-type="module"> | <script id="example-script" type="text/babel" data-scripts="./index.html" data-type="module"> | ||||
| // import {ThreeViewer, LoadingScreenPlugin} from 'https://threepipe.org/dist/index.mjs' | // import {ThreeViewer, LoadingScreenPlugin} from 'https://threepipe.org/dist/index.mjs' | ||||
| import {ThreeViewer, LoadingScreenPlugin} from './../../dist/index.mjs' | import {ThreeViewer, LoadingScreenPlugin} from './../../dist/index.mjs' | ||||
| import React from 'https://esm.sh/react' | |||||
| import ReactDOM from 'https://esm.sh/react-dom' | |||||
| import React from 'https://esm.sh/react@18' | |||||
| import ReactDOM from 'https://esm.sh/react-dom@18' | |||||
| function ThreeViewerComponent({ src, env }) { | function ThreeViewerComponent({ src, env }) { | ||||
| const canvasRef = React.useRef(null); | const canvasRef = React.useRef(null); |
| { | { | ||||
| "imports": { | "imports": { | ||||
| "threepipe": "./../../dist/index.mjs", | "threepipe": "./../../dist/index.mjs", | ||||
| "react": "https://esm.sh/react", | |||||
| "react-dom": "https://esm.sh/react-dom" | |||||
| "react": "https://esm.sh/react@18", | |||||
| "react-dom": "https://esm.sh/react-dom@18" | |||||
| } | } | ||||
| } | } | ||||
| <script type="module" src="../examples-utils/simple-code-preview.mjs"></script> | <script type="module" src="../examples-utils/simple-code-preview.mjs"></script> | ||||
| <script src="./../../dist/index.js"></script> | <script src="./../../dist/index.js"></script> | ||||
| <!-- <script src="https://unpkg.com/threepipe"></script>--> | <!-- <script src="https://unpkg.com/threepipe"></script>--> | ||||
| <script src="https://unpkg.com/svelte-browser-import"></script> | |||||
| <script src="https://unpkg.com/svelte-browser-import@0.0.5"></script> | |||||
| </head> | </head> | ||||
| <body> | <body> |
| <div id="canvas-container"> | <div id="canvas-container"> | ||||
| <canvas id="mcanvas"></canvas> | <canvas id="mcanvas"></canvas> | ||||
| <div id="firstPersonControlsOverlay"> | <div id="firstPersonControlsOverlay"> | ||||
| Tap the screen to enable three first person(look around) controls | |||||
| Tap/Click the screen to enable three first person(look around) controls | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| "threepipe": "./../../dist/index.mjs", | "threepipe": "./../../dist/index.mjs", | ||||
| "@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs", | "@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs", | ||||
| "@threepipe/plugin-tweakpane-editor": "./../../plugins/tweakpane-editor/dist/index.mjs", | "@threepipe/plugin-tweakpane-editor": "./../../plugins/tweakpane-editor/dist/index.mjs", | ||||
| "@threepipe/plugins-extra-importers": "./../../plugins/extra-importers/dist/index.mjs", | |||||
| "@threepipe/plugins-extra-importers": "./../../plugins/extra-importers/dist/index.js", | |||||
| "@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", |
| viewer.getPlugin(MaterialConfiguratorPlugin)!.enableEditContextMenus = true | viewer.getPlugin(MaterialConfiguratorPlugin)!.enableEditContextMenus = true | ||||
| viewer.getPlugin(SwitchNodePlugin)!.enableEditContextMenus = true | viewer.getPlugin(SwitchNodePlugin)!.enableEditContextMenus = true | ||||
| // todo do same in blueprint editor | |||||
| // disable fading on update | // disable fading on update | ||||
| viewer.getPlugin(LoadingScreenPlugin)!.isEditor = true | viewer.getPlugin(LoadingScreenPlugin)!.isEditor = true | ||||
| // disable fading on update | // disable fading on update |
| }} | }} | ||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| export interface GLTFPreparser{ | export interface GLTFPreparser{ |
| */ | */ | ||||
| refreshAspect(setDirty = true): void { | refreshAspect(setDirty = true): void { | ||||
| if (this.autoAspect) { | if (this.autoAspect) { | ||||
| if (!this._canvas) console.error('cannot calculate aspect ratio without canvas/container') | |||||
| if (!this._canvas) console.error('PerspectiveCamera2: cannot calculate aspect ratio without canvas/container') | |||||
| else { | else { | ||||
| let aspect = this._canvas.clientWidth / this._canvas.clientHeight | let aspect = this._canvas.clientWidth / this._canvas.clientHeight | ||||
| if (!isFinite(aspect)) aspect = 1 | if (!isFinite(aspect)) aspect = 1 |
| ) | ) | ||||
| console.log('srcCount', srcIndexArray.length / 3, 'destCount', dstIndexArray.length / 3) | console.log('srcCount', srcIndexArray.length / 3, 'destCount', dstIndexArray.length / 3) | ||||
| if (error) { | if (error) { | ||||
| console.error('Simplify error', error) | |||||
| console.warn('Simplify error', error) | |||||
| // return geometry // todo | // return geometry // todo | ||||
| } | } | ||||
| // (geometry.index!.array as Uint32Array).set(dstIndexArray) | // (geometry.index!.array as Uint32Array).set(dstIndexArray) |