display a random face

1 files changed, 32 insertions, 13 deletions

diff --git a/client/splash/face/markers.js b/client/splash/face/markers.js
index 1636349c..22b9966c 100644
--- a/client/splash/face/markers.js
+++ b/client/splash/face/markers.js
@@ -4,9 +4,12 @@ import { MeshLine, MeshLineMaterial } from 'three.meshline'
 import oktween from '../../util/vendor/oktween'
 import { scene } from '../renderer'
 
-import { getLineGeometry, updateFace, lerpPoints } from './util'
+import { getLineGeometry, updateFace, lerpPoints, getBboxForPoints, getBboxScaleAndCentroid } from './util'
 
-import { POINT_SCALE, LINE_THICKNESS, FACE_POINT_COUNT, MARKER_COLORS } from '../constants'
+import {
+  POINT_SCALE, LINE_THICKNESS, FACE_POINT_COUNT, MARKER_COLORS, MARKER_POINT_COLOR,
+  FACE_SCALE, FACE_MARKERS_SCALE, FACE_OFFSET_X, FACE_OFFSET_Y, FACE_OFFSET_Z,
+} from '../constants'
 
 const faceBuffer = Array.from({ length: FACE_POINT_COUNT }, () => new THREE.Vector3())
 
@@ -23,25 +26,37 @@ export function build(points) {
   const matrix = new THREE.Matrix4()
   const quaternion = new THREE.Quaternion()
 
-  cubes = points.map((p) => {
+  const bbox = getBboxForPoints(points)
+  let { scale, midX, midY, midZ } = getBboxScaleAndCentroid(bbox)
+
+  scale /= 2
+  scale *= FACE_SCALE * FACE_MARKERS_SCALE
+
+  const boxColor = new THREE.Color()
+  boxColor.setHex(MARKER_POINT_COLOR)
+  const scaledPoints = points.map((p) => new THREE.Vector3(
+    (p[0] - midX) * scale + FACE_OFFSET_X,
+    (p[1] - midY) * scale * -1 + FACE_OFFSET_Y,
+    (p[2] - midZ) * scale + FACE_OFFSET_Z
+  ))
+
+  cubes = scaledPoints.map((position) => {
     let geometry = new THREE.BoxBufferGeometry()
-    let position = new THREE.Vector3(p[0], p[1], p[2])
     let rotation = new THREE.Euler()
-    let scale = new THREE.Vector3()
-    let color = new THREE.Color()
-    scale.x = POINT_SCALE
-    scale.y = POINT_SCALE
-    scale.z = POINT_SCALE
+    let boxScale = new THREE.Vector3()
+    boxScale.x = POINT_SCALE
+    boxScale.y = POINT_SCALE
+    boxScale.z = POINT_SCALE
     quaternion.setFromEuler(rotation, false)
-    matrix.compose(position, quaternion, scale)
+    matrix.compose(position, quaternion, boxScale)
     geometry.applyMatrix(matrix)
-    let material = new THREE.MeshBasicMaterial({ color: color.setHex(0xffffff) })
+    let material = new THREE.MeshBasicMaterial({ color: boxColor })
     let cube = new THREE.Mesh(geometry, material)
     group.add(cube)
     return cube
   })
 
-  meshes = getLineGeometry(points).map((geometry, i) => {
+  meshes = getLineGeometry(scaledPoints).map((geometry, i) => {
     const color = new THREE.Color()
     const material = new MeshLineMaterial({
       color: color.setHex(MARKER_COLORS[i % MARKER_COLORS.length]),
@@ -50,13 +65,17 @@ export function build(points) {
     line.setGeometry(geometry, () => LINE_THICKNESS)
     const mesh = new THREE.Mesh(line.geometry, material)
     mesh.geometry.dynamic = true
+    mesh.scale.x = 2
+    mesh.scale.y = 2
+    mesh.scale.z = 2
     group.add(mesh)
     return [line, mesh]
   })
 
+  group.frustumCulled = false
   scene.add(group)
 
-  updateFace(points, cubes, meshes)
+  updateFace(scaledPoints, cubes, meshes)
 }
 
 export function swap(face) {