From 1f740857997b8b531d893e01e374016f61fb3ce7 Mon Sep 17 00:00:00 2001 From: Tezeroth Date: Mon, 13 Jan 2025 09:16:56 +0000 Subject: [PATCH] keep playing with optimizations --- index.html | 110 ++++++++++++++++++++++---------------------- main.js | 77 ------------------------------- make-transparent.js | 19 ++++++++ 3 files changed, 75 insertions(+), 131 deletions(-) create mode 100644 make-transparent.js diff --git a/index.html b/index.html index 9dcd873..ebd00c2 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@ - AFrame HTML Mesh component (aframe-html) for rendering HTML elements as textures in 3D - Local scripts: ar-shadow-helper, ar-cursor, simple-navmesh-constraint, model-utils, and main.js for additional logic --> - + @@ -32,16 +32,17 @@ --> + - + - + -Simplified Boilerplate +Boilerplate Sandbox - + + + @@ -335,7 +347,7 @@ > - + @@ -373,26 +385,9 @@ - - + + @@ -450,8 +445,7 @@ data-pick-up="parent" class="magnet-left magnet-right" position="0 0.2 -0" - rotation="90 180 0" - show-magnet-range="0.2,0.1"> + rotation="90 180 0"> @@ -479,8 +473,8 @@ data-pick-up="parent" class="magnet-left magnet-right" position="0.075 0 0" - rotation="90 180 0" - magnet-range-debug="range:0.1,0.05git"> + w> + + > @@ -498,14 +492,15 @@ + + @@ -547,23 +543,25 @@ + + @@ -596,23 +594,25 @@ + + @@ -645,9 +645,11 @@ src="#table-gltf" position="-2 0 0.8" rotation="0 51 0" - scale="1.5 1.5 1.5" - physx-body-from-model="type: static;" + + physx-body="type: static;" > + + - + { - el.removeEventListener('grabbed', this.ladderGrab); - el.removeEventListener('released', this.ladderRelease); - }); - } -}); // Once the DOM content is fully loaded, run this setup function. diff --git a/make-transparent.js b/make-transparent.js new file mode 100644 index 0000000..efa64a0 --- /dev/null +++ b/make-transparent.js @@ -0,0 +1,19 @@ + +//*SCRIPT TO ALLOW GLTF MODELS TO BECOME TRANSPARENT, well in this case INVISISBLE so they can act as colliders **// + +AFRAME.registerComponent('make-transparent', { + init: function () { + this.el.addEventListener('model-loaded', (e) => { + const object3D = e.detail.model; + + // Traverse the GLTF model and make all materials transparent + object3D.traverse((node) => { + if (node.isMesh && node.material) { + node.material.transparent = true; // Enable transparency + node.material.opacity = 0; // Set desired opacity + node.material.depthWrite = false; // Prevent depth issues + } + }); + }); + } +});