Merge pull request #1 from lume/update-lowclass-and-lume-element

Update `lowclass` and `@lume/element` versions.

Author: trusktr

api/behaviors/PropReceiver.md

@@ -5,7 +5,7 @@
 
 Forwards properties of a specified `observedObject` onto properties of
 `this` object. The properties to be received from `observedObject` are those
-listed in the `static receivedProperties` array, or the ones decorated with
+listed in the `receivedProperties` array, or the ones decorated with
 `
 
 ## Properties

api/behaviors/mesh-behaviors/materials/ProjectedMaterialBehavior.md

@@ -22,6 +22,11 @@ associating it with the `texture-projectors` attribute:
 ></lume-box>
 ```
 
+<live-code id="example"></live-code>
+<script>
+  example.content = projectedTextureExample
+</script>
+
 ## Properties
 
 Inherits properties from [PhysicalMaterialBehavior](PhysicalMaterialBehavior.md).

api/meshes/MixedPlane.md

@@ -18,17 +18,11 @@ available properties.
 
 <live-code src="../../../examples/buttons-with-shadow/example.html"></live-code>
 
-## Properties
 
-Inherits properties from [Mesh](Mesh.md).
 
+Inherits properties from [Mesh](Mesh.md).
 
-### <code>.<b>isMixedPlane</b></code> :id=isMixedPlane
 
-An always-`true` property signaling that
-this element is a `MixedPlane`. Useful for duck typing, especially in
-plain JavaScript as opposed to TypeScript.
-        
 
 
 

examples/autolayout-declarative.md

@@ -21,7 +21,7 @@
           position="300 300 120"
           size="0 0 0"
           cast-shadow="true"
-          intensity="0.5"
+          intensity="300"
           shadow-radius="2"
           distance="800"
           shadow-bias="-0.01"

examples/autolayout-imperative.md

@@ -40,7 +40,7 @@
           position: "300 300 120",
           size: "0 0 0",
           castShadow: "true",
-          intensity: "0.5",
+          intensity: "300",
           shadowRadius: 2,
           distance: 800,
           shadowBias: -0.01,

examples/disco-helmet/example.html

@@ -36,7 +36,7 @@
 	<lume-perspective-camera id="cam" position="0 0 1000"></lume-perspective-camera>
 
 	<!-- See src/examples/FlickeringOrbs.ts -->
-	<flickering-orbs id="lights" rotation="0 30 0"></flickering-orbs>
+	<flickering-orbs id="lights" rotation="0 30 0" intensity="1000"></flickering-orbs>
 
 	<lume-gltf-model
 		id="model"

examples/hello-vr.md

@@ -19,6 +19,7 @@
         mount-point="0.5 0.5 0.5"
         position="-200 0 0"
         color="white"
+        intensity="1000"
     ></lume-point-light>
   </lume-scene>
 

examples/hello-world/example.html

@@ -46,7 +46,7 @@
 					size="0 0"
 					position="0 0 1800"
 					color="white"
-					intensity="2"
+					intensity="3"
 					distance="10000"
 					xxx="Here we adjust the shadow camera size so it fits around the earth and moon, making the shadow as crisp as possible without increasing the shadow texture size."
 					shadow-camera-near="1500"

examples/nasa-astrobee-robot/README.md

@@ -30,6 +30,8 @@
 
 <script type="module">
   import {defineElements, booleanAttribute, Element, element, attribute, html} from 'lume'
+  import {MeshPhysicalMaterial} from 'three'
+	import {toCreasedNormals} from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 
   const bodyModelUrl = '/examples/nasa-astrobee-robot/astrobee/body.dae'
   const pmcModelUrl = '/examples/nasa-astrobee-robot/astrobee/pmc.dae'
@@ -44,29 +46,31 @@
 
   // Long live HTML elements!
 
-  element('astrobee-app')((() => {
+  element('astrobee-app')(
     class App extends Element {
-      constructor() {
-        super()
-
-        this.rotationDirection = 1 // clockwise
-        this.rotationAmount = 0.2 // degrees
+      static observedAttributeHandlers = {
+        rotationDirection: attribute.number(),
+        rotationAmount: attribute.number(),
+        rotationEnabled: attribute.boolean(),
+        view: attribute.string(),
+      }
 
-        this.rotationEnabled = true
-        this.view = 'free'
+      rotationDirection = 1 // clockwise
+      rotationAmount = 0.2 // degrees
+      rotationEnabled = true
+      view = 'free'
 
-        this.astrobee
-        this.sceneContainer
-        this.loading
-        this.models = []
-      }
+      astrobee
+      sceneContainer
+      loading
+      models = []
 
       template = () => html`
         <>
           <loading-icon ref=${el => this.loading = el}></loading-icon>
 
           <div class="sceneContainer hidden" ref=${el => this.sceneContainer = el}>
-            <lume-scene webgl enable-css="false" environment=${() => lunaStation}>
+            <lume-scene webgl enable-css="true" environment=${() => lunaStation}>
               <lume-element3d align-point="0.5 0.5 0.5">
                 <lume-camera-rig
                   ref=${el => this.cameraRig = el}
@@ -82,22 +86,22 @@
                 </lume-element3d>
               </lume-element3d>
 
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 90 0" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 -90 0" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 0 90" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 0 -90" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="90 80 0" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="90 -80 0" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="-90 80 0" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="-90 -80 0" />
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 90 0" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 -90 0" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 0 90" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 0 -90" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="90 80 0" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="90 -80 0" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="-90 80 0" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="-90 -80 0" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
 
               <lume-element3d ref=${el => this.astrobee = el} align-point="0.5 0.5 0.5" rotation=${() => this.astrobeeRotation}>
                 <lume-collada-model ref=${el => this.models.push(el)} src=${() => bodyModelUrl} />
                 <lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcModelUrl} />
                 <lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcSkinModelUrl} />
                 <lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcBumperModelUrl} />
 
-                <comment style="display:none">The other side.</comment>
+                <!-- The other side. -->
                 <lume-element3d scale="1 1 -1">
                   <lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcModelUrl} />
                   <lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcSkinModelUrl} />
@@ -111,7 +115,7 @@
                 color="white"
                 align-point="0.5 0.5 0.5"
                 mount-point="0.5 0.5 0.5"
-                size="100 100 100"
+                size="200 200 200"
                 sidedness="double"
                 cast-shadow="false"
                 receive-shadow="false"
@@ -228,7 +232,7 @@
 
         const rigCam = this.cameraRig.shadowRoot.querySelector('lume-perspective-camera')
         rigCam.near = this.freeCam.near = 0.1
-        rigCam.far = this.freeCam.far = 110
+        rigCam.far = this.freeCam.far = 150
 
         const promises = []
 
@@ -237,20 +241,38 @@
 
         await Promise.all(promises)
 
+        for (const model of this.models) {
+          // Here we do some manipulation of the underlying Three.js objects directly.
+          model.three.traverse(node => {
+            if (node.isLight) node.visible = false
+
+            function newMat(oldMat) {
+              return new MeshPhysicalMaterial({
+                metalness: 0.5,
+                roughness: 0.5,
+                ...(oldMat.color ? {color: oldMat.color} : {}),
+                ...(oldMat.map ? {map: oldMat.map.clone()} : {}),
+              })
+            }
+
+            if (node.isMesh) {
+              if (Array.isArray(node.material))
+                for (const [i, mat] of node.material.entries()) node.material[i] = newMat(mat)
+              else
+                node.material = newMat(node.material)
+
+              // smooth out the normals so the rendering is not flat-faced unless angle between faces is greater than 25 deg
+              node.geometry = toCreasedNormals(node.geometry, (25 / 180) * Math.PI)
+            }
+        })
+
+        }
+
         this.sceneContainer.classList.remove('hidden')
         this.loading.remove()
       }
     }
-
-    App.observedAttributes = {
-      rotationDirection: attribute.number(1),
-      rotationAmount: attribute.number(1),
-      rotationEnabled: attribute.boolean(true),
-      view: attribute.string('free'),
-    }
-
-    return App
-  })())
+  )
 </script>
 </template>
 </live-code>

examples/rounded-rectangle.md

@@ -21,16 +21,15 @@
   </style>
 
   <lume-scene id="scene" webgl>
-      <lume-ambient-light intensity="0.3"></lume-ambient-light>
+      <lume-ambient-light intensity="1"></lume-ambient-light>
       <lume-point-light
           id="light"
           color="white"
           position="300 300 300"
           size="0 0 0"
           cast-shadow="true"
-          intensity="0.8"
+          intensity="800"
           shadow-radius="2"
-          distance="800"
           shadow-bias="-0.001"
           >
       </lume-point-light>