8000 add GUI uniforms, anime + remove THREE.scene from store · shader-park/shader-park-website@a1dfccb · GitHub
[go: up one dir, main page]
Skip to content

Commit a1dfccb

Browse files
torinmbtorinmb
committed
add GUI uniforms, anime + remove THREE.scene from store
1 parent 02b8858 commit a1dfccb

File tree

7 files changed

+219
-8
lines changed

7 files changed

+219
-8
lines changed

‎js/App.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<signUp v-if="displaySignUp"></signUp>
99
<main-container></main-container>
1010
</div>
11+
<uniformGUI></uniformGUI>
1112
</main>
1213
</template>
1314

@@ -16,13 +17,15 @@ import Header from './components/Header.vue';
1617
import MainContainer from './components/MainContainer.vue';
1718
import SignIn from './components/SignIn.vue';
1819
import SignUp from './components/SignUp.vue';
20+
import UniformGUI from './components/UniformGUI.vue';
1921
2022
export default {
2123
components: {
2224
navMain: Header,
2325
mainContainer: MainContainer,
2426
signIn: SignIn,
25-
signUp: SignUp
27+
signUp: SignUp,
28+
uniformGUI: UniformGUI
2629
},
2730
data: function() {
2831
return {

‎js/components/Sculpture.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export default {
6969
} else {
7070
this.sculpture.mesh.name = this._uid; //_uid is a unique ID generated by vue for a component
7171
}
72-
this.$store.state.scene.add(this.sculpture.mesh);
72+
window.scene.add(this.sculpture.mesh);
7373
this.$store.state.objectsToUpdate.push(this.sculpture);
7474
this.$store.state.objectsToRaycast.push(this.sculpture.mesh);
7575
if(this.$store.state.selectedObject) {

‎js/components/UniformGUI.vue

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
<template>
2+
<div></div>
3+
</template>
4+
5+
<script>
6+
import * as dat from 'dat.gui';
7+
import { Object3DIdCount } from 'three';
8+
9+
export default {
10+
data: function() {
11+
return {
12+
guiParams: {},
13+
guiEl: {},
14+
currUniforms: {},
15+
}
16+
},
17+
computed: {
18+
selectedSculpture() {
19+
return this.$store.state.selectedSculpture;
20+
},
21+
selectedSculptureUniforms() {
22+
if(this.$store.state.selectedSculpture) {
23+
return this.$store.state.selectedSculpture.sculpture.uniforms;
24+
} else {
25+
return null;
26+
}
27+
},
28+
sculpturesLoaded() {
29+
return this.$store.state.sculpturesLoaded;
30+
}
31+
},
32+
watch : {
33+
guiParams: {
34+
immediate: true,
35+
deep: true,
36+
handler: function(payload) {
37+
if(payload) {
38+
Object.keys(payload).forEach(uniform => {
39+
let stateUniform = this.$store.state.selectedSculpture.sculpture.uniforms.find(el => el.name == uniform);
40+
if(stateUniform) {
41+
stateUniform.value = payload[uniform];
42+
}
43+
});
44+
if(this.gui) {
45+
for (var i in this.gui.__controllers) {
46+
this.gui.__controllers[i].updateDisplay();
47+
}
48+
}
49+
}
50+
}
51+
},
52+
selectedSculptureUniforms(uniforms) {
53+
if(uniforms){
54+
this.gui.domElement.style.display = 'block';
55+
uniforms.forEach(uniform => {
56+
if(!(uniform.name in this.guiParams)) {
57+
this.addUniformToGUI(uniform);
58+
} else if (!(JSON.stringify(this.currUniforms[uniform.name]) === JSON.stringify(uniform))) {
59+
//value in uniform changed, so update it.
60+
this.removeUniformFromGUI(uniform.name);
61+
this.addUniformToGUI(uniform);
62+
}
63+
});
64+
//uniform has been removed
65+
if(uniforms.length < Object.keys(this.guiEl).length) {
66+
let uniformsToDelete = Object.keys(this.currUniforms).filter(uniformName => !uniforms.find(uniform => uniform.name === uniformName));
67+
if(uniformsToDelete && uniformsToDelete.length) {
68+
this.removeUniformFromGUI(this.currUniforms[uniformsToDelete[0]].name);
69+
}
70+
}
71+
72+
if(uniforms.length === 0 ) {
73+
this.gui.domElement.style.display = 'none';
74+
}
75+
} else {
76+
if(window.anime) {
77+
anime.remove(this.guiParams);
78+
}
79+
//editor is closed, so delete elements form GUI
80+
this.gui.domElement.style.display = 'none';
81+
Object.keys(this.guiEl).forEach(key => {
82+
this.removeUniformFromGUI(key);
83+
});
84+
}
85+
}
86+
},
87+
methods: {
88+
addUniformToGUI(uniform) {
89+
this.$set(this.guiParams, uniform.name, uniform.value);
90+
if(uniform.type === 'float') {
91+
this.currUniforms[uniform.name] = uniform;
92+
this.guiEl[uniform.name] = this.gui.add(this.guiParams, uniform.name, uniform.min, uniform.max)
93+
// .onChange((val) => {
94+
// let stateUniform = this.$store.state.selectedSculpture.sculpture.uniforms.filter(el => el.name == uniform.name);
95+
// if(stateUniform && stateUniform.length) {
96+
// stateUniform[0].value = val;
97+
// }
98+
// });
99+
}
100+
},
101+
removeUniformFromGUI(name) {
102+
if (name in this.guiEl) {
103+
this.gui.remove(this.guiEl[name]);
104+
delete this.guiEl[name];
105+
}
106+
107+
delete this.guiParams[name];
108+
delete this.currUniforms[name];
109+
110+
}
111+
},
112+
mounted() {
113+
this.$nextTick(function () {
114+
this.gui = new dat.GUI();
115+
window.gui = this.gui;
116+
this.gui.domElement.style.display = 'none';
117+
window.guiParams = this.guiParams;
118+
let g = document.querySelector('.dg');
119+
g.style.zIndex = 102;
120+
g.style.marginTop = '8vh';
121+
g.children[0].children[1].style.marginTop = '20px';
122+
123+
})
124+
},
125+
};
126+
</script>
127+
128+
<style lang="less">
129+
@font-family: 'Regolapro', 'Poppins', sans-serif;
130+
.dg.main.taller-than-window .close-button {
131+
border-top: 1px solid #ddd !important;
132+
}
133+
134+
.dg.main .close-button {
135+
background-color: #ccc !important;
136+
}
137+
138+
.dg.main .close-button:hover {
139+
background-color: #ddd !important;
140+
}
141+
142+
.dg {
143+
z-index: 0 !important;
144+
// margin-top: 10vh !important;
145+
font-family: @font-family !important;
146+
color: #555 !important;
147+
text-shadow: none !important;
148+
}
149+
150+
.dg.main::-webkit-scrollbar {
151+
background: #fafafa !important;
152+
}
153+
154+
.dg.main::-webkit-scrollbar-thumb {
155+
background: #bbb !important;
156+
}
157+
158+
.dg li:not(.folder) {
159+
background: #fafafa !important;
160+
border-bottom: 1px solid #ddd !important;
161+
}
162+
163+
.dg li.save-row .button {
164+
text-shadow: none !important;
165+
}
166+
167+
.dg li.title {
168+
background: #e8e8e8 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat !important;
169+
}
170+
171+
.dg .cr.function:hover,.dg .cr.boolean:hover {
172+
background: #fff !important;
173+
}
174+
175+
.dg .c input[type=text] {
176+
background: #e9e9e9 !important;
177+
}
178+
179+
.dg .c input[type=text]:hover {
180+
background: #eee !important;
181+
}
182+
183+
.dg .c input[type=text]:focus {
184+
background: #eee !important;
185+
color: #555 !important;
186+
}
187+
188+
.dg .c .slider {
189+
background: #e9e9e9 !important;
190+
}
191+
192+
.dg .c .slider:hover {
193+
background: #eee !important;
194+
}
195+
</style>

‎js/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import Vue from 'vue';
77
import VModal from 'vue-js-modal'
88
import VueRouter from 'vue-router';
99
import Vuelidate from 'vuelidate';
10-
10+
import anime from 'animejs';
1111
import App from './App.vue';
1212
import {dbConfig} from './dbConfig.js';
1313
import {routes} from './router/routes';
1414
import {store} from './store/store';
1515

16-
16+
window.anime = anime;
1717
firebase.initializeApp(dbConfig);
1818
Vue.use(VueRouter);
1919

@@ -95,6 +95,7 @@ firebase.auth().onAuthStateChanged(function(user) {
9595
});
9696

9797
const scene = store.state.scene;
98+
window.scene = scene;
9899
scene.background = new THREE.Color(1.0, 1.0, 1.0);
99100
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.0001, 180);
100101

‎js/store/store.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ export const store = new Vuex.Store({
160160
}
161161
},
162162
removeObjectFromSceneByName(state, name) {
163-
state.scene.remove(state.scene.getObjectByName(name));
163+
window.scene.remove(window.scene.getObjectByName(name));
164164
},
165165
joinRoom(state, roomName) {
166166
// state.socket.emit('joinRoom', roomName);

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
},
99
"gcloud": {
1010
"id": "shader-park",
11-
"version": "0-0-4",
11+
"version": "0-0-5",
1212
"devPort": 3000,
1313
"devAdminPort": 8000
1414
},
@@ -35,7 +35,7 @@
3535
]
3636
},
3737
"scripts": {
38-
"qDeploy": "gcloud app deploy --project $npm_package_gcloud_id --version $npm_package_gcloud_version",
38+
"qDeploy": "gcloud app deploy --project $npm_package_gcloud_id --version $npm_package_gcloud_version --no-promote",
3939
"deploy": "npm run build && npm run docs:build && gcloud app deploy --project $npm_package_gcloud_id --version $npm_package_gcloud_version --no-promote",
4040
"browse": "gcloud app browse --project $npm_package_gcloud_id",
4141
"build": "npm run less && NODE_ENV=production browserify -t vueify -e js/index.js | uglifyjs -cm > client/bundle.js",
@@ -51,14 +51,17 @@
5151
"license": "Apache-2.0",
5252
"dependencies": {
5353
"@tweenjs/tween.js": "^17.2.0",
54+
"animejs": "^3.0.1",
5455
"body-parser": "^1.18.2",
56+
"dat.gui": "^0.7.6",
5557
"envify": "^4.1.0",
5658
"escodegen": "^1.11.1",
5759
"express": "^4.16.3",
5860
"express-dynamic-static": "^1.0.5",
5961
"firebase": "^5.3.0",
6062
"node-cleanup": "^2.1.2",
6163
"node-fetch": "^2.1.2",
64+
"sculpture-park-core": "github:bnanner/sculpture-park-core",
6265
"socket.io": "^2.1.1",
6366
"three": "^0.103.0",
6467
"tunnel-agent": "^0.6.0",
@@ -69,7 +72,6 @@
6972
"vue-router": "^3.0.1",
7073
"vuelidate": "^0.7.4",
7174
"vuepress-plugin-mathjax": "^1.2.2",
72-
"sculpture-park-core": "github:bnanner/sculpture-park-core",
7375
"vuex": "^3.0.1"
7476
},
7577
"devDependencies": {

‎yarn.lock

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1319,6 +1319,11 @@ amdefine@>=0.0.4:
13191319
resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
13201320
integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
13211321

1322+
animejs@^3.0.1:
1323+
version "3.0.1"
1324+
resolved "https://registry.yarnpkg.com/animejs/-/animejs-3.0.1.tgz#8b808bad575e3b6106489d8b04b92bc4062166fe"
1325+
integrity sha512-7mMoBQScvA7s4zm3EVgnuXXrtOu6TJNAhU+Ajo7HsXYH0NwbuZIcRHMO65a9NyUlmAXz4VPxlK5cENNOQbCi8g==
1326+
13221327
ansi-align@^2.0.0:
13231328
version "2.0.0"
13241329
resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
@@ -3517,6 +3522,11 @@ dashdash@^1.12.0:
35173522
dependencies:
35183523
assert-plus "^1.0.0"
35193524

3525+
dat.gui@^0.7.6:
3526+
version "0.7.6"
3527+
resolved "https://registry.yarnpkg.com/dat.gui/-/dat.gui-0.7.6.tgz#92182a0f2dc96c26910f888238d3839166d82f76"
3528+
integrity sha512-9Uqr4aQUvp9q5P2b4y6gK604HXafubOq578OmOS8mjrIkYrBP4EbQ9gz9YRXgyPh7aQi+b9H/jAG7EucmhYpSA==
3529+
35203530
date-fns@^1.23.0:
35213531
version "1.30.1"
35223532
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"

0 commit comments

Comments
 (0)
0