follow documentation and teacher recommendation + use classes
This commit is contained in:
parent
76028e9de3
commit
770e277463
GPG key ID:
A82D63DFF8D1317F
4 changed files with 109 additions and 19 deletions
|
|
@ -3,7 +3,10 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<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>
|
<title>Moteur de jeu • Projet</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
16
js/Element.js
Normal file
16
js/Element.js
Normal 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
77
js/Env.js
Normal 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
30
js/main.js
|
|
@ -1,29 +1,23 @@
|
||||||
|
import { Env } from "./Env.js";
|
||||||
|
import { Element } from "./Element.js";
|
||||||
|
|
||||||
window.addEventListener("load", () => main());
|
window.addEventListener("load", () => main());
|
||||||
|
|
||||||
const main = () => {
|
const main = () => {
|
||||||
const scene = new THREE.Scene();
|
const env = new Env();
|
||||||
const camera = new THREE.PerspectiveCamera(
|
|
||||||
75,
|
|
||||||
window.innerWidth / window.innerHeight,
|
|
||||||
0.1,
|
|
||||||
1000
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderer = new THREE.WebGLRenderer();
|
document.body.appendChild(env.getDomElement());
|
||||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
||||||
document.body.appendChild(renderer.domElement);
|
|
||||||
|
|
||||||
const geometry = new THREE.BoxGeometry(1, 1, 1);
|
const cube = new Element();
|
||||||
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
|
env.addToScene(cube);
|
||||||
const cube = new THREE.Mesh(geometry, material);
|
|
||||||
scene.add(cube);
|
|
||||||
|
|
||||||
camera.position.z = 5;
|
|
||||||
|
|
||||||
const animate = () => {
|
const animate = () => {
|
||||||
requestAnimationFrame(animate);
|
requestAnimationFrame(animate);
|
||||||
renderer.render(scene, camera);
|
|
||||||
}
|
cube.rotate();
|
||||||
|
|
||||||
|
env.render();
|
||||||
|
};
|
||||||
|
|
||||||
animate();
|
animate();
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Reference in a new issue