-
Notifications
You must be signed in to change notification settings - Fork 22
/
App.js
115 lines (107 loc) · 4.14 KB
/
App.js
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
/* eslint no-magic-numbers: 0 */
import React, {Component} from 'react';
import {
View,
Reader,
GeometryRepresentation,
PolyData,
PointData,
DataArray,
Algorithm,
} from '../lib';
class App extends Component {
constructor(props) {
super(props);
this.state = { startTheta: 30 };
this.vtkViewRef = React.createRef();
this.setProps = this.setProps.bind(this);
this.onResetCamera = this.onResetCamera.bind(this);
this.onAngle = this.onAngle.bind(this);
}
setProps(newProps) {
this.setState(newProps);
}
onAngle(e) {
this.setState({ startTheta: Number(e.currentTarget.value) });
}
onResetCamera() {
const view = this.vtkViewRef.current;
view.resetCamera();
view.renderView();
}
render() {
return (
<div>
<button onClick={this.onResetCamera} style={{ position: 'absolute', zIndex: 10 }}>reset camera</button>
<input type="range" min="0" max="90" onChange={this.onAngle} style={{ position: 'absolute', zIndex: 10, left: '150px' }}/>
<View ref={this.vtkViewRef} background={[0.1, 0.1, 0.1]} >
<GeometryRepresentation
mapper={{
colorByArrayName: 'Temperature',
scalarMode: 3,
interpolateScalarsBeforeMapping: true,
}}
colorDataRange={[0, 3]}
>
<PolyData
points={[0,0,0,1,0,0,1,1,0,0,1,0]}
polys={[4,0,1,2,3]}
>
<PointData>
<DataArray
name="Temperature"
values={[0,3,2,1]}
/>
</PointData>
</PolyData>
</GeometryRepresentation>
<GeometryRepresentation
color={[1, 0, 0]}
property={{
edgeVisibility: true,
}}
>
<Algorithm
vtkClass="vtkConeSource"
state={{
resolution: Math.round(this.state.startTheta / 2) + 3,
radius: 0.2,
}}
/>
</GeometryRepresentation>
<GeometryRepresentation
mapper={{
colorByArrayName: 'layer',
scalarMode: 4,
interpolateScalarsBeforeMapping: false,
}}
colorMapPreset="jet"
colorDataRange={[0.2, 0.9]}
>
<Algorithm
vtkClass="vtkConcentricCylinderSource"
state={{
height: 0.25,
radius: [0.2, 0.3, 0.4, 0.6, 0.7, 0.8, 0.9, 1],
cellFields: [0, 0.2, 0.4, 0.6, 0.7, 0.8, 0.9, 1],
mask: [1, 0, 1, 0, 1, 0, 1, 1],
resolution: 60,
skipInnerFaces: true,
startTheta: this.state.startTheta,
endTheta: 370,
center: [0,0,0.5],
}}
/>
</GeometryRepresentation>
<GeometryRepresentation>
<Reader
vtkClass="vtkOBJReader"
url="https://kitware.github.io/vtk-js-datasets/data/obj-mtl/star-wars-vader-tie-fighter.obj"
/>
</GeometryRepresentation>
</View>
</div>
);
}
}
export default App;