Skip to content

Commit 30f1125

Browse files
authored
Merge pull request #1 from lume/update-lowclass-and-lume-element
Update `lowclass` and `@lume/element` versions.
2 parents 1bf1b89 + 1efbb9f commit 30f1125

File tree

28 files changed

+844
-451
lines changed

28 files changed

+844
-451
lines changed

api/behaviors/PropReceiver.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
Forwards properties of a specified `observedObject` onto properties of
77
`this` object. The properties to be received from `observedObject` are those
8-
listed in the `static receivedProperties` array, or the ones decorated with
8+
listed in the `receivedProperties` array, or the ones decorated with
99
`
1010

1111
## Properties

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ associating it with the `texture-projectors` attribute:
2222
></lume-box>
2323
```
2424

25+
<live-code id="example"></live-code>
26+
<script>
27+
example.content = projectedTextureExample
28+
</script>
29+
2530
## Properties
2631

2732
Inherits properties from [PhysicalMaterialBehavior](PhysicalMaterialBehavior.md).

api/meshes/MixedPlane.md

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,11 @@ available properties.
1818

1919
<live-code src="../../../examples/buttons-with-shadow/example.html"></live-code>
2020

21-
## Properties
2221

23-
Inherits properties from [Mesh](Mesh.md).
2422

23+
Inherits properties from [Mesh](Mesh.md).
2524

26-
### <code>.<b>isMixedPlane</b></code> :id=isMixedPlane
2725

28-
An always-`true` property signaling that
29-
this element is a `MixedPlane`. Useful for duck typing, especially in
30-
plain JavaScript as opposed to TypeScript.
31-
3226

3327

3428

examples/autolayout-declarative.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
position="300 300 120"
2222
size="0 0 0"
2323
cast-shadow="true"
24-
intensity="0.5"
24+
intensity="300"
2525
shadow-radius="2"
2626
distance="800"
2727
shadow-bias="-0.01"

examples/autolayout-imperative.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
position: "300 300 120",
4141
size: "0 0 0",
4242
castShadow: "true",
43-
intensity: "0.5",
43+
intensity: "300",
4444
shadowRadius: 2,
4545
distance: 800,
4646
shadowBias: -0.01,

examples/disco-helmet/example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<lume-perspective-camera id="cam" position="0 0 1000"></lume-perspective-camera>
3737

3838
<!-- See src/examples/FlickeringOrbs.ts -->
39-
<flickering-orbs id="lights" rotation="0 30 0"></flickering-orbs>
39+
<flickering-orbs id="lights" rotation="0 30 0" intensity="1000"></flickering-orbs>
4040

4141
<lume-gltf-model
4242
id="model"

examples/hello-vr.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
mount-point="0.5 0.5 0.5"
2020
position="-200 0 0"
2121
color="white"
22+
intensity="1000"
2223
></lume-point-light>
2324
</lume-scene>
2425

examples/hello-world/example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
size="0 0"
4747
position="0 0 1800"
4848
color="white"
49-
intensity="2"
49+
intensity="3"
5050
distance="10000"
5151
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."
5252
shadow-camera-near="1500"

examples/nasa-astrobee-robot/README.md

Lines changed: 57 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030

3131
<script type="module">
3232
import {defineElements, booleanAttribute, Element, element, attribute, html} from 'lume'
33+
import {MeshPhysicalMaterial} from 'three'
34+
import {toCreasedNormals} from 'three/examples/jsm/utils/BufferGeometryUtils.js'
3335

3436
const bodyModelUrl = '/examples/nasa-astrobee-robot/astrobee/body.dae'
3537
const pmcModelUrl = '/examples/nasa-astrobee-robot/astrobee/pmc.dae'
@@ -44,29 +46,31 @@
4446

4547
// Long live HTML elements!
4648

47-
element('astrobee-app')((() => {
49+
element('astrobee-app')(
4850
class App extends Element {
49-
constructor() {
50-
super()
51-
52-
this.rotationDirection = 1 // clockwise
53-
this.rotationAmount = 0.2 // degrees
51+
static observedAttributeHandlers = {
52+
rotationDirection: attribute.number(),
53+
rotationAmount: attribute.number(),
54+
rotationEnabled: attribute.boolean(),
55+
view: attribute.string(),
56+
}
5457

55-
this.rotationEnabled = true
56-
this.view = 'free'
58+
rotationDirection = 1 // clockwise
59+
rotationAmount = 0.2 // degrees
60+
rotationEnabled = true
61+
view = 'free'
5762

58-
this.astrobee
59-
this.sceneContainer
60-
this.loading
61-
this.models = []
62-
}
63+
astrobee
64+
sceneContainer
65+
loading
66+
models = []
6367

6468
template = () => html`
6569
<>
6670
<loading-icon ref=${el => this.loading = el}></loading-icon>
6771
6872
<div class="sceneContainer hidden" ref=${el => this.sceneContainer = el}>
69-
<lume-scene webgl enable-css="false" environment=${() => lunaStation}>
73+
<lume-scene webgl enable-css="true" environment=${() => lunaStation}>
7074
<lume-element3d align-point="0.5 0.5 0.5">
7175
<lume-camera-rig
7276
ref=${el => this.cameraRig = el}
@@ -82,22 +86,22 @@
8286
</lume-element3d>
8387
</lume-element3d>
8488
85-
<lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 90 0" />
86-
<lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 -90 0" />
87-
<lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 0 90" />
88-
<lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 0 -90" />
89-
<lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="90 80 0" />
90-
<lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="90 -80 0" />
91-
<lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="-90 80 0" />
92-
<lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="-90 -80 0" />
89+
<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>
90+
<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>
91+
<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>
92+
<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>
93+
<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>
94+
<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>
95+
<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>
96+
<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>
9397
9498
<lume-element3d ref=${el => this.astrobee = el} align-point="0.5 0.5 0.5" rotation=${() => this.astrobeeRotation}>
9599
<lume-collada-model ref=${el => this.models.push(el)} src=${() => bodyModelUrl} />
96100
<lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcModelUrl} />
97101
<lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcSkinModelUrl} />
98102
<lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcBumperModelUrl} />
99103
100-
<comment style="display:none">The other side.</comment>
104+
<!-- The other side. -->
101105
<lume-element3d scale="1 1 -1">
102106
<lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcModelUrl} />
103107
<lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcSkinModelUrl} />
@@ -111,7 +115,7 @@
111115
color="white"
112116
align-point="0.5 0.5 0.5"
113117
mount-point="0.5 0.5 0.5"
114-
size="100 100 100"
118+
size="200 200 200"
115119
sidedness="double"
116120
cast-shadow="false"
117121
receive-shadow="false"
@@ -228,7 +232,7 @@
228232

229233
const rigCam = this.cameraRig.shadowRoot.querySelector('lume-perspective-camera')
230234
rigCam.near = this.freeCam.near = 0.1
231-
rigCam.far = this.freeCam.far = 110
235+
rigCam.far = this.freeCam.far = 150
232236

233237
const promises = []
234238

@@ -237,20 +241,38 @@
237241

238242
await Promise.all(promises)
239243

244+
for (const model of this.models) {
245+
// Here we do some manipulation of the underlying Three.js objects directly.
246+
model.three.traverse(node => {
247+
if (node.isLight) node.visible = false
248+
249+
function newMat(oldMat) {
250+
return new MeshPhysicalMaterial({
251+
metalness: 0.5,
252+
roughness: 0.5,
253+
...(oldMat.color ? {color: oldMat.color} : {}),
254+
...(oldMat.map ? {map: oldMat.map.clone()} : {}),
255+
})
256+
}
257+
258+
if (node.isMesh) {
259+
if (Array.isArray(node.material))
260+
for (const [i, mat] of node.material.entries()) node.material[i] = newMat(mat)
261+
else
262+
node.material = newMat(node.material)
263+
264+
// smooth out the normals so the rendering is not flat-faced unless angle between faces is greater than 25 deg
265+
node.geometry = toCreasedNormals(node.geometry, (25 / 180) * Math.PI)
266+
}
267+
})
268+
269+
}
270+
240271
this.sceneContainer.classList.remove('hidden')
241272
this.loading.remove()
242273
}
243274
}
244-
245-
App.observedAttributes = {
246-
rotationDirection: attribute.number(1),
247-
rotationAmount: attribute.number(1),
248-
rotationEnabled: attribute.boolean(true),
249-
view: attribute.string('free'),
250-
}
251-
252-
return App
253-
})())
275+
)
254276
</script>
255277
</template>
256278
</live-code>

examples/rounded-rectangle.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,15 @@
2121
</style>
2222

2323
<lume-scene id="scene" webgl>
24-
<lume-ambient-light intensity="0.3"></lume-ambient-light>
24+
<lume-ambient-light intensity="1"></lume-ambient-light>
2525
<lume-point-light
2626
id="light"
2727
color="white"
2828
position="300 300 300"
2929
size="0 0 0"
3030
cast-shadow="true"
31-
intensity="0.8"
31+
intensity="800"
3232
shadow-radius="2"
33-
distance="800"
3433
shadow-bias="-0.001"
3534
>
3635
</lume-point-light>

0 commit comments

Comments
 (0)