feat(troika-examples): flexbox example: globe pokes through bg, add s…

…crollable lists

packages/troika-examples/flexbox/FlexboxExample.jsx

@@ -4,7 +4,7 @@ import { Canvas3D, BoxFacade, Group3DFacade } from 'troika-3d'
 import { Text3DFacade } from 'troika-3d-text'
 import { UIBlock3DFacade as div } from 'troika-3d-ui'
 import { Matrix4, Plane, Vector3, MeshStandardMaterial } from 'three'
-import FlexboxGlobe from '../ui/FlexboxGlobe.js'
+import FlexboxGlobe from './FlexboxGlobe.js'
 
 const tempPlane = new Plane()
 const tempVec3 = new Vector3()
@@ -38,6 +38,27 @@ const globeCellConfig = {
   }
 }
 
+const listCellConfig = {
+  facade: div,
+  overflow: 'scroll',
+  children: (() => {
+    let items = []
+    for (let i = 0; i < 10; i++) {
+      items.push({
+        key: i,
+        facade: div,
+        borderWidth: 0.002,
+        borderColor: 0xffffff,
+        borderRadius: 0.01,
+        margin: 0.01,
+        padding: [0.005, 0.01],
+        text: `List Item ${i + 1}`
+      })
+    }
+    return items
+  })()
+}
+
 const rowConfig = {
   facade: div,
   flexDirection: 'row',
@@ -52,8 +73,8 @@ const rowConfig = {
 const rows = [
   Object.assign({}, rowConfig, {children: [textCellConfig, globeCellConfig, textCellConfig]}),
   Object.assign({}, rowConfig, {children: [globeCellConfig, textCellConfig]}),
-  Object.assign({}, rowConfig, {children: [textCellConfig, textCellConfig, globeCellConfig]}),
-  Object.assign({}, rowConfig, {children: [globeCellConfig, globeCellConfig, textCellConfig]})
+  Object.assign({}, rowConfig, {children: [textCellConfig, listCellConfig, globeCellConfig]}),
+  Object.assign({}, rowConfig, {children: [globeCellConfig, listCellConfig, globeCellConfig, textCellConfig]})
 ]
 
 

packages/troika-examples/flexbox/FlexboxGlobe.js

@@ -0,0 +1,41 @@
+import { Object3DFacade } from 'troika-3d'
+import { extendAsFlexNode } from 'troika-3d-ui'
+import { Mesh, MeshStandardMaterial, SphereBufferGeometry, TextureLoader } from 'three'
+
+/**
+ * A globe that participates in flexbox layout
+ */
+class FlexboxGlobe extends Object3DFacade {
+  constructor(parent) {
+    super(parent, new Mesh(
+      new SphereBufferGeometry(0.5, 64, 64),
+      new MeshStandardMaterial({
+        map: new TextureLoader().load('globe/texture_day.jpg'),
+        roughness: 0.5,
+        metalness: 0.5,
+        // Make the globes "poke through" their background layer:
+        transparent: true,
+        depthTest: false
+      })
+    ))
+  }
+
+  afterUpdate() {
+    this.threeObject.visible = this.offsetWidth != null
+
+    // Make it render right after its background layer but before sibling layers,
+    // so it can "poke through" its background layer with depthTest:false, but not
+    // through other layers.
+    this.z = 0.001
+    this.threeObject.renderOrder = this.flexNodeDepth
+
+    // Center the globe within the layed out box
+    let diameter = Math.min(this.clientWidth, this.clientHeight)
+    this.x = this.offsetLeft + this.offsetWidth / 2
+    this.y = -(this.offsetTop + this.offsetHeight / 2)
+    this.scaleX = this.scaleY = this.scaleZ = diameter
+    super.afterUpdate()
+  }
+}
+
+export default extendAsFlexNode(FlexboxGlobe)