Fix some examples

examples/extra-importer-plugins/index.html

@@ -13,7 +13,7 @@
         "imports": {
           "three": "./../../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"
         }
     }
 

examples/index.html

@@ -239,13 +239,18 @@
             const links = document.querySelectorAll('li>a');
             let selected = document.querySelector('a.selected');
 
-            function selectTarget(target) {
+            function selectTarget(target, scroll = false) {
                 selected.classList.remove('selected');
                 target.classList.add('selected');
                 selected = target;
                 iframe.src = target.href;
                 sidebar.dataset.selectedExample = target.innerText;
                 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 => {
@@ -259,9 +264,9 @@
             const hash = window.location.hash.slice(1);
             if(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 searchTerm = urlParams.get('q');
@@ -355,7 +360,7 @@
             <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="./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="./interaction-prompt-plugin/">Interaction Prompt Plugin </a></li>
             <li><a href="./device-orientation-controls-plugin/">Device Orientation Controls Plugin (Gyroscope) </a></li>
@@ -430,7 +435,7 @@
             <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="./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>
         <h2 class="category">Utils</h2>
         <ul>

examples/model-viewer/index.html

@@ -13,7 +13,7 @@
         "imports": {
           "three": "./../../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-configurator": "./../../plugins/configurator/dist/index.mjs",
           "@threepipe/plugin-network": "./../../plugins/network/dist/index.mjs",

examples/pointer-lock-controls-plugin/index.html

@@ -38,7 +38,7 @@
 <div id="canvas-container">
     <canvas id="mcanvas"></canvas>
     <div id="pointerLockOverlay">
-        Tap the screen to enable pointer lock controls
+        Tap/Click the screen to enable pointer lock controls
     </div>
 </div>
 

examples/popmotion-plugin/script.ts

@@ -36,7 +36,8 @@ async function init() {
                 to: cube.position.clone().add(new Vector3(0, isMovedUp ? -1 : 1, 0)),
                 duration: 500, // ms
                 onComplete: () => isMovedUp = !isMovedUp,
-            }) // setDirty is automatically called on the cube since it's the target
+                onUpdate: () => cube.setDirty(),
+            })
             btn.disabled = false
         },
         ['Rotate +90deg']: async(btn) => {

examples/react-js-sample/index.html

@@ -19,8 +19,8 @@
 <script id="example-script" type="module" data-scripts="./index.html">
     // import {ThreeViewer, LoadingScreenPlugin} from 'https://threepipe.org/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 }) {
         const canvasRef = React.useRef(null);

examples/react-jsx-sample/index.html

@@ -21,8 +21,8 @@
 <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 './../../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 }) {
         const canvasRef = React.useRef(null);

examples/react-tsx-sample/index.html

@@ -11,8 +11,8 @@
         {
             "imports": {
               "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"
             }
         }
 

examples/svelte-sample/index.html

@@ -28,7 +28,7 @@
     <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
     <script src="./../../dist/index.js"></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>
 <body>

examples/three-first-person-controls-plugin/index.html

@@ -38,7 +38,7 @@
 <div id="canvas-container">
     <canvas id="mcanvas"></canvas>
     <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>
 

examples/tweakpane-editor/index.html

@@ -19,7 +19,7 @@
           "threepipe": "./../../dist/index.mjs",
           "@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/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-geometry-generator": "./../../plugins/geometry-generator/dist/index.mjs",
           "@threepipe/plugin-configurator": "./../../plugins/configurator/dist/index.mjs",

examples/tweakpane-editor/script.ts

@@ -148,6 +148,7 @@ async function init() {
     viewer.getPlugin(MaterialConfiguratorPlugin)!.enableEditContextMenus = true
     viewer.getPlugin(SwitchNodePlugin)!.enableEditContextMenus = true
 
+    // todo do same in blueprint editor
     // disable fading on update
     viewer.getPlugin(LoadingScreenPlugin)!.isEditor = true
     // disable fading on update

src/assetmanager/import/GLTFLoader2.ts

@@ -161,8 +161,6 @@ export class GLTFLoader2 extends GLTFLoader implements ILoader<GLTF, Object3D|un
             }}
         }
     }
-
-
 }
 
 export interface GLTFPreparser{

src/core/camera/PerspectiveCamera2.ts

@@ -215,7 +215,7 @@ export class PerspectiveCamera2 extends PerspectiveCamera implements ICamera {
      */
     refreshAspect(setDirty = true): void {
         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 {
                 let aspect = this._canvas.clientWidth / this._canvas.clientHeight
                 if (!isFinite(aspect)) aspect = 1

src/plugins/extras/MeshOptSimplifyModifierPlugin.ts

@@ -92,7 +92,7 @@ window.dispatchEvent(new CustomEvent('${ev}'))
         )
         console.log('srcCount', srcIndexArray.length / 3, 'destCount', dstIndexArray.length / 3)
         if (error) {
-            console.error('Simplify error', error)
+            console.warn('Simplify error', error)
             // return geometry // todo
         }
         // (geometry.index!.array as Uint32Array).set(dstIndexArray)