adjust lava lamp example sizing for mobile

examples/lava-lamp/example.html

@@ -1,11 +1,11 @@
 <!--
 This example is adapted from https://threejs.org/examples/webgl_marchingcubes.html,
-with all parts (lights, camera) replaced with Lume elements except for the
-MarchingCubes class imported from Three.js.
+with all parts replaced with Lume elements except for the
+MarchingCubes mesh class imported from Three.js.
 
 TODO:
-- bloom filter to make the bright parts look like they are glowing
-- refraction for the outside glass (use MeshTransmissionMaterial)
+- bloom filter to make the bright parts look like they are glowing, and darken the background
+- refraction for the outside glass to distort the balls floating inside the liquid (use MeshTransmissionMaterial)
 - figure out how to change the dimensions of the metaball volume, right now it
   is 1x1x1 and we scale it vertically, but it would be nice to instead increase
   the Y size instead of scaling, f.e. 1x3x1 so that the balls are spherical and
@@ -60,6 +60,7 @@
 
 		<lume-element3d align-point="0.5 0.5">
 			<lume-camera-rig
+				id="cameraRig"
 				distance="1500"
 				min-distance="1500"
 				max-distance="1500"
@@ -73,7 +74,7 @@
 			<lume-sphere
 				receive-shadow="false"
 				size="6000 6000 6000"
-				scale="0.26 10 0.26"
+				scale="0.34 10 0.34"
 				mount-point="0.5 0.5 0.5"
 				color="orange"
 				roughness="0.4"
@@ -114,13 +115,15 @@
 	let currentMaterial = 'liquid2'
 	let resolution = 60
 
+	cameraRig.distance = cameraRig.minDistance = cameraRig.maxDistance = window.innerWidth <= 720 ? 2000 : 1500
+
 	const effectController = {
 		material: currentMaterial,
 
 		speed: 0.2,
-		numBlobs: 10,
+		numBlobs: 5,
 		resolution,
-		isolation: 20,
+		isolation: 15,
 
 		floor: false,
 		wallx: false,
@@ -150,12 +153,12 @@
 
 	// LUME ///////////////
 	const lumeScene = document.getElementById('lumeScene')
-	lumeScene.three.children.push(effect)
+	lumeScene.three.add(effect)
 
 	// STATS
 
-	const stats = new Stats()
-	container.appendChild(stats.dom)
+	// const stats = new Stats()
+	// container.appendChild(stats.dom)
 
 	// GUI
 
@@ -336,7 +339,7 @@
 
 	function animate() {
 		update()
-		stats.update()
+		// stats.update()
 		lumeScene.needsUpdate() // Notify that Lume scene should redraw
 	}
 

examples/skateboard-configurator/README.md

@@ -1,23 +1,27 @@
 # Skateboard Configurator
 
+Toggle full screen on mobile to see the example better.
+
 <live-code src="./example.html"></live-code>
 
 <script>
-  // A small hack to scale the size of the demo to make it easier to view inside the live-code preview.
-  const livecode = document.querySelector('live-code')
+  if (window.innerWidth > 720) {
+    // A small hack to scale the size of the demo to make it easier to view inside the live-code preview.
+    const livecode = document.querySelector('live-code')
 
-  const iframe = livecode.shadowRoot.querySelector('iframe')
-  iframe.style.width = "200%"
-  iframe.style.height = "200%"
+    const iframe = livecode.shadowRoot.querySelector('iframe')
+    iframe.style.width = "200%"
+    iframe.style.height = "200%"
 
-  const preview = livecode.shadowRoot.querySelector('.live-code-preview')
-  preview.style.overflow = 'hidden'
+    const preview = livecode.shadowRoot.querySelector('.live-code-preview')
+    preview.style.overflow = 'hidden'
 
-  requestAnimationFrame(function loop() {
-    if (iframe.contentWindow.document?.body) {
-      iframe.contentWindow.document.body.style.transformOrigin = 'top left'
-      iframe.contentWindow.document.body.style.scale = 0.5
-    }
-    requestAnimationFrame(loop)
-  })
+    requestAnimationFrame(function loop() {
+      if (iframe.contentWindow.document?.body) {
+        iframe.contentWindow.document.body.style.transformOrigin = 'top left'
+        iframe.contentWindow.document.body.style.scale = 0.5
+      }
+      requestAnimationFrame(loop)
+    })
+  }
 </script>