summaryrefslogtreecommitdiff
path: root/client/splash/face/editor.js
diff options
context:
space:
mode:
Diffstat (limited to 'client/splash/face/editor.js')
-rw-r--r--client/splash/face/editor.js120
1 files changed, 120 insertions, 0 deletions
diff --git a/client/splash/face/editor.js b/client/splash/face/editor.js
new file mode 100644
index 00000000..8263877b
--- /dev/null
+++ b/client/splash/face/editor.js
@@ -0,0 +1,120 @@
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+
+import { names, faces } from './faces'
+import * as markers from './markers'
+import * as mesh from './mesh'
+
+import './editor.css'
+
+import * as offsets from ' ./all_faces_offsets'
+
+const origin = { x: -0.037, y: 0.066, z: -0.038, scale: 0.00008 }
+
+class Editor extends Component {
+ state = {
+ name: "",
+ position: { ...origin },
+ mesh: null,
+ }
+
+ constructor() {
+ super()
+ setTimeout(() => { this.update('brad_smith_1_0') }, 100 )
+ }
+
+ update(name) {
+ console.log(name)
+ this.setState({ name })
+ const face = faces[name]
+ markers.swap(face)
+ mesh.load(name).then(geometry => {
+ let meshes = mesh.createFaceMeshes(geometry)
+ setTimeout(() => {
+ meshes.solid.material.opacity = 1
+ mesh.removeMesh('blank')
+ mesh.removeMesh('wireframe')
+ const savedPosition = offsets[name]
+ this.setState({
+ mesh: meshes.solid,
+ geometry: {
+ x: meshes.solid.position.x,
+ y: meshes.solid.position.y,
+ z: meshes.solid.position.z,
+ scale: meshes.solid.scale.x
+ },
+ position: { ...(savedPosition || origin) }
+ }, () => this.updatePosition())
+ }, 10)
+ })
+ }
+
+ updatePosition() {
+ const { geometry, position, mesh } = this.state
+ console.log(geometry, position)
+ // window['m'] = mesh
+ mesh.material.opacity = 1
+ mesh.position.setX(geometry.x + position.x)
+ mesh.position.setY(geometry.y + position.y)
+ mesh.position.setZ(geometry.z + position.z)
+ mesh.scale.setX(geometry.scale + position.scale)
+ mesh.scale.setY(geometry.scale + position.scale)
+ mesh.scale.setZ(geometry.scale + position.scale)
+ }
+ save() {
+ console.log(JSON.stringify({
+ [this.state.name]: this.state.position
+ }))
+ }
+
+ render() {
+ return (
+ <div className='meshEditor'>
+ <select value={this.state.name} onChange={e => this.update(e.target.value)}>
+ <option value="">Pick a name</option>
+ {names.sort().map(name => <option key={name} value={name}>{name}</option>)}
+ </select>
+ <label>
+ <span>x</span>
+ <input
+ type="number"
+ value={this.state.position.x}
+ min={-2} max={2} step={0.001}
+ onChange={e => this.setState({ position: { ...this.state.position, x: parseFloat(e.target.value) }}, () => this.updatePosition())}
+ />
+ </label>
+ <label>
+ <span>y</span>
+ <input
+ type="number"
+ value={this.state.position.y}
+ min={-2} max={2} step={0.001}
+ onChange={e => this.setState({ position: { ...this.state.position, y: parseFloat(e.target.value) }}, () => this.updatePosition())}
+ />
+ </label>
+ <label>
+ <span>z</span>
+ <input
+ type="number"
+ value={this.state.position.z}
+ min={-2} max={2} step={0.001}
+ onChange={e => this.setState({ position: { ...this.state.position, z: parseFloat(e.target.value) }}, () => this.updatePosition())}
+ />
+ </label>
+ <label>
+ <span>scale</span>
+ <input
+ type="number"
+ value={this.state.position.scale}
+ min={0} max={1.1} step={0.00001}
+ onChange={e => this.setState({ position: { ...this.state.position, scale: parseFloat(e.target.value) }}, () => this.updatePosition())}
+ />
+ </label>
+ <button onClick={() => this.save()}>Save</button>
+ </div>
+ )
+ }
+}
+
+ReactDOM.render(<Editor />, document.querySelector('.links'))
+document.querySelector('.teaser').remove() \ No newline at end of file