1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
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()
|
