Paris8/GeometryDash3D
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

follow documentation and teacher recommendation + use classes

Browse source
This commit is contained in:
Mylloon 2022-11-08 10:40:45 +01:00
parent 76028e9de3
commit 770e277463
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
4 changed files with 109 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -3,7 +3,10 @@
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
<title>Moteur de jeu • Projet</title>
<style>
body {

16
js/Element.js Normal file
View file

@ -0,0 +1,16 @@
export class Element {
constructor() {
this.data = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
}
/**
* Rotate the element
*/
rotate = () => {
this.data.rotation.x += 0.01;
this.data.rotation.y += 0.01;
};
}

77
js/Env.js Normal file
View file

@ -0,0 +1,77 @@
import { Element } from "./Element.js";
export class Quality {
static ultra = 1;
static medium = 2;
static low = 3;
}
export class Env {
constructor() {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
1,
1000
);
this.camera.position.z = 5;
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(window.innerWidth, window.innerHeight);
// Modification of the scene scale without modifying the size
this.quality = Quality.ultra;
this.renderer.setSize(
window.innerWidth / this.quality,
window.innerHeight / this.quality,
false
);
}
/**
* Get the Canvas element
* @returns domElement
*/
getDomElement = () => this.renderer.domElement;
/**
* Get current scene
* @returns Scene
*/
getScene = () => this.scene;
/**
* Get used camera
* @returns Camera
*/
getCamera = () => this.camera;
/**
* Get current renderer
* @returns Render
*/
getRenderer = () => this.renderer;
/**
* Change the quality of the render
* @param {Quality} quality
* @returns
*/
setQuality = (quality) => (this.quality = quality);
/**
* Add an element to the scene
* @param {Element} element Element
*/
addToScene = (element) => {
this.scene.add(element.data);
};
/**
* Render the current scene, using the camera
* @returns
*/
render = () => this.renderer.render(this.scene, this.camera);
}

30
js/main.js
View file

@ -1,29 +1,23 @@
import { Env } from "./Env.js";
import { Element } from "./Element.js";
window.addEventListener("load", () => main());
const main = () => {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const env = new Env();
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
document.body.appendChild(env.getDomElement());
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const cube = new Element();
env.addToScene(cube);
const animate = () => {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
cube.rotate();
env.render();
};
animate();
};