-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcarShowcasegui.js
97 lines (68 loc) · 3.27 KB
/
carShowcasegui.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
import GUI from 'lil-gui'
let addGUI = (THREE,camera,scene,lights,points,controls)=>{
const gui = new GUI();
const cameraFolder= gui.addFolder('camera controls')
const sceneFolder= gui.addFolder('scene controls')
const lightsFolder= gui.addFolder('lights controls')
const controlsFolder= gui.addFolder('controls')
controlsFolder.add(controls,'minDistance',0,3,1)
controlsFolder.add(controls,'maxDistance',0,15,1)
cameraFolder.add(camera.position,'x',-5,5,0.01).name('position x')
cameraFolder.add(camera.position,'y',-5,5,0.01).name('position y')
cameraFolder.add(camera.position,'z',-5,5,0.01).name('position z')
cameraFolder.add(camera.rotation,'x',-Math.PI,Math.PI,0.01)
cameraFolder.add(camera.rotation,'y',-Math.PI,Math.PI,0.01)
cameraFolder.add(camera.rotation,'z',-Math.PI,Math.PI,0.01)
cameraFolder.add(camera,'zoom',0,3,0.001)
lights.forEach(light => {
if(light.isAmbientLight){
lightsFolder.add(light,'intensity',0,5,0.01).name('intensity')
}
else{
lightsFolder.add(light.position,'x',-5,5,0.01).name('position x')
lightsFolder.add(light.position,'y',-5,5,0.01).name('position y')
lightsFolder.add(light.position,'z',-5,5,0.01).name('position z')
lightsFolder.add(light.rotation,'x',-Math.PI,Math.PI,0.01)
lightsFolder.add(light.rotation,'y',-Math.PI,Math.PI,0.01)
lightsFolder.add(light.rotation,'z',-Math.PI,Math.PI,0.01)
lightsFolder.add(light,'intensity',0,10,0.01).name('intensity')
}
});
sceneFolder.add(scene.position,'x',-5,5,0.01).name('position x')
sceneFolder.add(scene.position,'y',-5,5,0.01).name('position y')
sceneFolder.add(scene.position,'z',-5,5,0.01).name('position z')
sceneFolder.add(scene.rotation,'x',-Math.PI,Math.PI,0.01)
sceneFolder.add(scene.rotation,'y',-Math.PI,Math.PI,0.01)
sceneFolder.add(scene.rotation,'z',-Math.PI,Math.PI,0.01)
const point0Folder = gui.addFolder("point0");
const point1Folder = gui.addFolder("point1");
const point2Folder = gui.addFolder("point2");
const point3Folder = gui.addFolder("point3");
const point4Folder = gui.addFolder("point4");
point0Folder.add(points[0].position, "x", -5, 5, 0.00001);
point0Folder.add(points[0].position, "y", -5, 5, 0.00001);
point0Folder.add(points[0].position, "z", -5, 5, 0.00001);
point1Folder.add(points[1].position, "x", -5, 5, 0.00001);
point1Folder.add(points[1].position, "y", -5, 5, 0.00001);
point1Folder.add(points[1].position, "z", -5, 5, 0.00001);
point2Folder.add(points[2].position, "x", -5, 5, 0.00001);
point2Folder.add(points[2].position, "y", -5, 5, 0.00001);
point2Folder.add(points[2].position, "z", -5, 5, 0.00001);
// show/hide lil.gui on keypress h
gui.domElement.style.display = 'none';
// Function to hide or show the GUI
function toggleGUI() {
if (gui.domElement.style.display === 'none') {
gui.domElement.style.display = 'block';
} else {
gui.domElement.style.display = 'none';
}
}
// Event listener for keypress
document.addEventListener('keypress', function(event) {
if (event.key === 'h' || event.key === 'H') {
toggleGUI();
}
});
}
export {addGUI};