Skip to content

Commit 828eea2

Browse files
kdvalinkdvalin
authored
Merge pull request #486 from beewyka819/models
Add ability to load gltf/glb models into scenes
2 parents cc1bb21 + da130e0 commit 828eea2

17 files changed

Lines changed: 753 additions & 7 deletions

File tree

‎.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,6 @@
1414
# api keys
1515
/src/keys
1616

17-
# doc scripts
18-
GenerateDocsWindows.bat
19-
2017
# misc
2118
.DS_Store
2219
.env*

‎docs/.gitkeep‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎img/c.mtl‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Blender MTL File: 'None'
2+
# Material Count: 1
3+
4+
newmtl None
5+
Ns 500
6+
Ka 0.8 0.8 0.8
7+
Kd 0.8 0.8 0.8
8+
Ks 0.8 0.8 0.8
9+
d 1
10+
illum 2

‎img/c.obj‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Blender v2.90.1 OBJ File: ''
2+
# www.blender.org
3+
mtllib c.mtl
4+
o Cube_Cube.001
5+
v -1.000000 -1.000000 1.000000
6+
v -0.446396 1.000000 1.000000
7+
v -1.000000 -1.000000 -1.000000
8+
v -1.000000 1.000000 -1.000000
9+
v 1.000000 -1.000000 1.000000
10+
v 0.377481 1.000000 0.032235
11+
v 1.000000 -1.000000 -1.000000
12+
v 1.000000 2.114706 -1.681411
13+
vt 0.375000 0.000000
14+
vt 0.625000 0.000000
15+
vt 0.625000 0.250000
16+
vt 0.375000 0.250000
17+
vt 0.625000 0.500000
18+
vt 0.375000 0.500000
19+
vt 0.625000 0.750000
20+
vt 0.375000 0.750000
21+
vt 0.625000 1.000000
22+
vt 0.375000 1.000000
23+
vt 0.125000 0.500000
24+
vt 0.125000 0.750000
25+
vt 0.875000 0.500000
26+
vt 0.875000 0.750000
27+
vn -0.9814 0.1358 0.1358
28+
vn -0.1309 -0.1309 -0.9827
29+
vn 0.9583 0.1865 0.2166
30+
vn 0.3156 0.2283 0.9210
31+
vn 0.0000 -1.0000 0.0000
32+
vn -0.2081 0.9379 0.2777
33+
usemtl None
34+
s off
35+
f 1/1/1 2/2/1 4/3/1 3/4/1
36+
f 3/4/2 4/3/2 8/5/2 7/6/2
37+
f 7/6/3 8/5/3 6/7/3 5/8/3
38+
f 5/8/4 6/7/4 2/9/4 1/10/4
39+
f 3/11/5 7/6/5 5/8/5 1/12/5
40+
f 8/5/6 4/13/6 2/14/6 6/7/6

‎src/components/editor/customCompleter.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import myrReference from "../../myr/reference.js";
22
import myrTextures from "../structural/Textures.js";
3+
import myrModels from "../structural/Models.js";
34

45
export const customCompleter = {
56
getCompletions: function (editor, session, pos, prefix, callback) {
@@ -40,6 +41,11 @@ export const customCompleter = {
4041
"group()"
4142
];
4243

44+
let model = myrModels();
45+
let Model = [...model.ModelPack.keys(),
46+
"group()"
47+
];
48+
4349
let reference = myrReference();
4450
let keyWords = [...reference.geometry.map(obj => obj.name + "()"),
4551
...reference.transformations.map(obj => obj.name + "()"),
@@ -241,6 +247,15 @@ export const customCompleter = {
241247
score: 3
242248
};
243249
}));
250+
251+
callback(null, Model.map(function (word) {
252+
return {
253+
caption: word,
254+
value: word,
255+
meta: "model",
256+
score: 3
257+
};
258+
}));
244259
}
245260
};
246261

‎src/components/layouts/ModelReference.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from "react";
2+
import Header from "../structural/header/Header";
3+
import Footer from "../structural/Footer";
4+
import ModelReferencePage from "../reference/ModelReferencePage";
5+
6+
import * as layoutTypes from "../../constants/LayoutTypes.js";
7+
8+
export const ModelReference = ({ editor, editorActions, user, authActions, scene, sceneActions, projectActions, courseActions, projects, courses, match, collectionActions, collections }) => (
9+
<div className="App">
10+
<Header
11+
logging={authActions}
12+
sceneActions={sceneActions}
13+
actions={editorActions}
14+
user={user}
15+
scene={scene}
16+
text={editor.text}
17+
message={editor.message}
18+
projectId={match.params.id}
19+
match={match}
20+
projectActions={projectActions}
21+
courseActions={courseActions}
22+
projects={projects}
23+
courses={courses}
24+
collectionActions={collectionActions}
25+
collections={collections}
26+
layoutType={layoutTypes.MODEL_REFERENCE}
27+
/>
28+
<div className="row no-gutters">
29+
<ModelReferencePage />
30+
</div>
31+
<Footer />
32+
</div>
33+
);
34+
35+
export default ModelReference;

‎src/components/reference/ModelReference.js‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
import React from "react";
2+
import myrReference from "../../myr/modelReference";
3+
4+
import * as layoutTypes from "../../constants/LayoutTypes";
5+
6+
import {
7+
Tabs,
8+
Tab,
9+
IconButton,
10+
Drawer,
11+
Icon,
12+
Table,
13+
TableBody,
14+
TableHead,
15+
TableRow,
16+
TableCell,
17+
Tooltip,
18+
Hidden
19+
} from "@material-ui/core";
20+
21+
const exitBtnStyle = {
22+
//paddingbottom: 100,
23+
position: "fixed",
24+
top: 0,
25+
right: 10,
26+
};
27+
const newTabStyle = {
28+
position: "fixed",
29+
top: 0,
30+
right: 50,
31+
};
32+
export default class ModelReference extends React.Component {
33+
constructor(props) {
34+
super(props);
35+
this.state = {
36+
value: "a"
37+
};
38+
this.tableData = myrReference();
39+
}
40+
41+
handleChange = (event, value) => {
42+
this.setState({ value });
43+
};
44+
45+
TableEx = (category) => {
46+
return (
47+
<Table>
48+
<TableHead>
49+
<TableRow>
50+
<TableCell>Name</TableCell>
51+
<TableCell>Description</TableCell>
52+
<TableCell className='refExample'>Example</TableCell>
53+
</TableRow>
54+
</TableHead>
55+
<TableBody>
56+
{this.tableData[category].map((row, index) => (
57+
<TableRow key={index}>
58+
<TableCell>{row.name}</TableCell>
59+
<TableCell>{row.description}</TableCell>
60+
<TableCell>{this.exampleHelper(row.example)}</TableCell>
61+
</TableRow>
62+
))}
63+
</TableBody>
64+
</Table>
65+
);
66+
};
67+
68+
render() {
69+
const style = {
70+
margin: 2,
71+
padding: 0,
72+
color: "#fff",
73+
};
74+
const isDisabled = this.props.layoutType === layoutTypes.REFERENCE;
75+
return (
76+
<div>
77+
{!isDisabled ?
78+
<React.Fragment>
79+
<Tooltip title="Reference" placement="bottom-start">
80+
<IconButton
81+
id="ref-btn"
82+
className="header-btn d-none d-md-block"
83+
aria-haspopup="true"
84+
onClick={this.props.handleReferenceToggle}
85+
style={style}>
86+
<Icon style={{ color: "#fff" }} className="material-icons">help</Icon>
87+
</IconButton>
88+
</Tooltip>
89+
<Drawer
90+
style={{ position: "relative", zIndex: 100 }}
91+
anchor="right"
92+
id="reference-drawer"
93+
variant="persistent"
94+
className={!this.props.referenceOpen ? "d-none" : ""}
95+
open={this.props.referenceOpen}>
96+
97+
<div>
98+
<h3 className="border-bottom" style={{ padding: 10, fontWeight: 400 }}>MYR API - Reference</h3>
99+
<IconButton
100+
color="default"
101+
style={exitBtnStyle}
102+
onClick={() => {
103+
this.props.handleReferenceToggle();
104+
this.setState({ value: "a" });
105+
}}>
106+
<Icon className="material-icons">close</Icon>
107+
</IconButton>
108+
<IconButton
109+
color="default"
110+
style={newTabStyle}
111+
onClick={this.handleOpen}>
112+
<Icon className="material-icons">open_in_new</Icon>
113+
</IconButton>
114+
</div>
115+
116+
<div>
117+
<Tabs
118+
id="modelReference-tabs"
119+
fullWidth={true}
120+
value={this.state.value}
121+
onChange={this.handleChange}
122+
variant="scrollable">
123+
<Tab
124+
icon={<Icon className="material-icons geometry">category</Icon>}
125+
label={
126+
<Hidden xsDown>
127+
<div>GEOMETRY</div>
128+
</Hidden>
129+
}
130+
value='a' />
131+
<Tab
132+
icon={<Icon className="material-icons color-change">bubble_chart</Icon>}
133+
label={
134+
<Hidden xsDown>
135+
<div>TRANSFORMATIONS</div>
136+
</Hidden>
137+
}
138+
value='b' />
139+
<Tab
140+
icon={<Icon className="material-icons animation-ref">zoom_out_map</Icon>} //swap_horiz control_camera category
141+
label={
142+
<Hidden xsDown>
143+
<div>ANIMATIONS</div>
144+
</Hidden>
145+
}
146+
value='c' />
147+
<Tab
148+
icon={<Icon className="material-icons geometry">widgets</Icon>}
149+
label={
150+
<Hidden xsDown>
151+
<div>GROUPS</div>
152+
</Hidden>
153+
}
154+
value='d' />
155+
</Tabs>
156+
</div>
157+
158+
{<div style={{ margin: 7, overflow: "hidden" }}>
159+
<p style={{ fontSize: "80%" }}> Key: <span className="array">array </span>
160+
<span className="bool">bool </span>
161+
<span className="number">number </span>
162+
<span className="string">string </span>
163+
<span className="group">group </span>
164+
<span className="data">data</span></p>
165+
</div>}
166+
{this.state.value === "a" &&
167+
<div style={{ marginTop: 0, overflow: "scroll" }}>
168+
{this.TableEx("geometry")}
169+
</div>}
170+
{this.state.value === "b" &&
171+
<div style={{ marginTop: 0, overflow: "scroll" }}>
172+
{this.TableEx("transformations")}
173+
</div>}
174+
{this.state.value === "c" &&
175+
<div style={{ marginTop: 0, overflow: "scroll" }}>
176+
{this.TableEx("animations")}
177+
</div>}
178+
{this.state.value === "d" &&
179+
<div style={{ marginTop: 0, overflow: "scroll" }}>
180+
{this.TableEx("groups")}
181+
</div>}
182+
</Drawer>
183+
</React.Fragment> : null}
184+
</div>
185+
);
186+
}
187+
}

0 commit comments

Comments
 (0)