flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/three-scaffold. basic three.js scaffold for quick testing/demoing
flo-bit.github.io/three-scaffold/
javascript
scaffold
threejs
minify
author
florian
date
(Jan 6, 2023, 8:19 PM +0100)
commit
1845ab3c
1845ab3c6f004910f80410932a23fb5dd60f27cf
parent
8ef6625b
8ef6625b5ee0908208c921ce54d830868eb2039d
+20
-33
+20
-33
index.html
+20
-33
index.html
···
6
6
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
7
7
/>
8
8
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js"></script>
9
-
10
-
<script
11
-
src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"
12
-
integrity="sha512-WoO4Ih0CDOSLYafy22wZD/mcJ7k0ESLqtQsFa6zFKnEUrbtuGU+GkLtVhgt93xa2qewG5gKEC6CWlN8OaCTSVg=="
13
-
crossorigin="anonymous"
14
-
referrerpolicy="no-referrer"
15
-
></script>
16
9
</head>
17
-
18
-
<body style="overflow: hidden; background-color: rgb(0, 0, 0)">
10
+
<body style="overflow: hidden">
19
11
<script>
20
12
class THREE_SCAFFOLD {
21
13
constructor() {
14
+
let w = window.innerWidth,
15
+
h = window.innerHeight;
22
16
this.scene = new THREE.Scene();
23
-
this.camera = new THREE.PerspectiveCamera(
24
-
75,
25
-
window.innerWidth / window.innerHeight
26
-
);
27
-
28
-
let background = 0x232323;
29
-
this.scene.background = new THREE.Color(background);
30
-
17
+
this.camera = new THREE.PerspectiveCamera(75, w / h);
18
+
this.scene.background = new THREE.Color(0x232323);
31
19
this.scene.add(this.camera);
32
-
this.renderer = new THREE.WebGLRenderer();
33
-
this.renderer.setSize(window.innerWidth, window.innerHeight);
34
20
21
+
this.renderer = new THREE.WebGLRenderer();
22
+
this.renderer.setSize(w, h);
35
23
let d = this.renderer.domElement;
36
24
d.style.position = "absolute";
37
25
d.style.left = "0px";
···
46
34
this.lights = {};
47
35
this.lights.ambi = new THREE.AmbientLight(0xffffff, 0.2);
48
36
this.scene.add(this.lights.ambi);
49
-
50
37
this.lights.dir = new THREE.DirectionalLight(0xffffff, 1.0);
51
38
this.lights.dir.position.set(-0.8, 0.5, 0.7);
52
39
this.scene.add(this.lights.dir);
···
58
45
}
59
46
60
47
setupScene() {
61
-
let geo = new THREE.IcosahedronGeometry(1, 1);
62
-
63
-
let mat = new THREE.MeshStandardMaterial({ flatShading: true });
64
-
65
-
this.sphere = new THREE.Mesh(geo, mat);
48
+
/* setup your scene here */
49
+
/* START */
50
+
this.sphere = new THREE.Mesh(
51
+
new THREE.IcosahedronGeometry(1, 1),
52
+
new THREE.MeshStandardMaterial({ flatShading: true })
53
+
);
66
54
this.sphere.position.z = -2;
67
55
this.scene.add(this.sphere);
56
+
/* END */
68
57
}
69
-
70
58
animate() {
71
59
requestAnimationFrame(this.animate.bind(this));
72
-
73
60
let delta = this.clock.getDelta();
74
61
let total = this.clock.getElapsedTime();
75
62
76
63
/* Update your scene here */
77
-
this.sphere.rotation.y += this.keys[" "] != true ? delta * 0.1 : 0;
78
-
this.sphere.rotation.x += this.keys[" "] != true ? delta * 0.213 : 0;
64
+
/* START */
65
+
if (this.keys[" "] != true) {
66
+
this.sphere.rotation.y += delta * 0.1;
67
+
this.sphere.rotation.x += delta * 0.213;
68
+
}
69
+
/* END */
79
70
80
71
this.renderer.render(this.scene, this.camera);
81
72
}
···
83
74
windowResized() {
84
75
this.camera.aspect = window.innerWidth / window.innerHeight;
85
76
this.camera.updateProjectionMatrix();
86
-
87
77
this.renderer.setSize(window.innerWidth, window.innerHeight);
88
78
}
89
-
90
79
keyDown(event) {
91
80
this.keys[event.key] = true;
92
81
}
93
-
94
82
keyUp(event) {
95
83
this.keys[event.key] = false;
96
84
}
97
85
}
98
-
99
86
let app = new THREE_SCAFFOLD();
100
87
</script>
101
88
</body>