Skip to content

Commit 30f1125

Browse files
trusktrtrusktr
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy