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
2.9 kB
89 lines
1<html>
2 <head>
3 <meta charset="UTF-8" />
4 <meta
5 name="viewport"
6 content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
7 />
8 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js"></script>
9 </head>
10 <body style="overflow: hidden">
11 <script>
12 class THREE_SCAFFOLD {
13 constructor() {
14 let w = window.innerWidth,
15 h = window.innerHeight;
16 this.scene = new THREE.Scene();
17 this.camera = new THREE.PerspectiveCamera(75, w / h);
18 this.scene.background = new THREE.Color(0x232323);
19 this.scene.add(this.camera);
20
21 this.renderer = new THREE.WebGLRenderer();
22 this.renderer.setSize(w, h);
23 let d = this.renderer.domElement;
24 d.style.position = "absolute";
25 d.style.left = "0px";
26 d.style.top = "0px";
27 document.body.appendChild(d);
28
29 this.keys = {};
30 document.addEventListener("keydown", this.keyDown.bind(this));
31 document.addEventListener("keyup", this.keyUp.bind(this));
32 window.addEventListener("resize", this.windowResized.bind(this));
33
34 this.lights = {};
35 this.lights.ambi = new THREE.AmbientLight(0xffffff, 0.2);
36 this.scene.add(this.lights.ambi);
37 this.lights.dir = new THREE.DirectionalLight(0xffffff, 1.0);
38 this.lights.dir.position.set(-0.8, 0.5, 0.7);
39 this.scene.add(this.lights.dir);
40
41 this.clock = new THREE.Clock();
42
43 this.setupScene();
44 this.animate();
45 }
46
47 setupScene() {
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 );
54 this.sphere.position.z = -2;
55 this.scene.add(this.sphere);
56 /* END */
57 }
58 animate() {
59 requestAnimationFrame(this.animate.bind(this));
60 let delta = this.clock.getDelta();
61 let total = this.clock.getElapsedTime();
62
63 /* Update your scene here */
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 */
70
71 this.renderer.render(this.scene, this.camera);
72 }
73
74 windowResized() {
75 this.camera.aspect = window.innerWidth / window.innerHeight;
76 this.camera.updateProjectionMatrix();
77 this.renderer.setSize(window.innerWidth, window.innerHeight);
78 }
79 keyDown(event) {
80 this.keys[event.key] = true;
81 }
82 keyUp(event) {
83 this.keys[event.key] = false;
84 }
85 }
86 let app = new THREE_SCAFFOLD();
87 </script>
88 </body>
89</html>