tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Game

Browse Source 
- Added more ball in scene
    - Modify Lambert texture to Physical
    - Implement RectAreaLight in scene
This commit is contained in:
Hugo Bourgeon
2024-08-08 16:38:35 +02:00
parent a5926967c4
commit cdbff66aa8
8 changed files with 66 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
site/game/elements.js
View File

@ -6,7 +6,7 @@
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 16:07:51 by hubourge #+# #+# */
/* Updated: 2024/08/07 16:12:33 by hubourge ### ########.fr */
/* Updated: 2024/08/08 15:37:06 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
@ -20,7 +20,7 @@ let BoxThickness = 0.1;
function createBox(scene, x, y, z)
{
const geometryBox = new THREE.BoxGeometry(BoxWidth, BoxHeight, BoxThickness);
const materialBox = new THREE.MeshLambertMaterial({
const materialBox = new THREE.MeshPhysicalMaterial({
color: 0xff0000,
});
const box = new THREE.Mesh(geometryBox, materialBox);
@ -31,4 +31,15 @@ function createBox(scene, x, y, z)
return box;
}
function createBall(scene, x, y, z, geometryBall, materialBall) {
const ball = new THREE.Mesh(geometryBall, materialBall);
ball.position.x = x;
ball.position.y = y;
ball.position.z = z;
ball.castShadow = true;
scene.add(ball);
return ball;
}
export { createBall };
export { createBox };

68
site/game/main.js
View File

@ -6,18 +6,20 @@
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:49 by edbernar #+# #+# */
/* Updated: 2024/08/07 16:52:45 by hubourge ### ########.fr */
/* Updated: 2024/08/08 16:33:16 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
import { sendRequest } from './websocket.js';
import { MoveObject } from './controls.js';
import { createBox } from './elements.js';
import * as THREE from 'three';
import Stats from 'stats.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { createSpotLight, refreshSpotLight, createLightAmbient, createLightPoint, refreshLightPoint } from './light.js';
import { createMap } from './map.js';
import { createBox } from './elements.js';
import { createBall } from './elements.js';
import { RectAreaLightUniformsLib } from 'three/examples/jsm/lights/RectAreaLightUniformsLib.js';
let time = Date.now();
@ -27,12 +29,12 @@ const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// ------------------- Stats ------------------- //
// ------------------- Stats -------------------- //
const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mémoire
document.body.appendChild(stats.dom);
// ------------------- Scene ------------------- //
// ------------------- Scene -------------------- //
scene.background = new THREE.Color(0x1a1a1a);
// ------------------- Shadow ------------------- //
@ -44,47 +46,77 @@ camera.position.z = 4;
camera.position.y = 3;
camera.rotation.x = -(Math.PI / 4);
// ------------------- Ball ------------------- //
// ------------------- Ball --------------------- //
const geometryBall = new THREE.SphereGeometry(0.1, 32, 32);
const materialBall = new THREE.MeshLambertMaterial({ color: 0xffffff });
const ball = new THREE.Mesh(geometryBall, materialBall);
ball.position.y = 0.1;
ball.castShadow = true;
scene.add(ball);
const materialBall = new THREE.MeshPhysicalMaterial({ color: 0xffffff });
const ball1 = createBall(scene, 0, 0.1, 0, geometryBall, materialBall);
const ball2 = createBall(scene, 2, 0.1, 0, geometryBall, materialBall);
const ball3 = createBall(scene, 2, 0.1, 2, geometryBall, materialBall);
const ball4 = createBall(scene, 0, 0.1, 0, geometryBall, materialBall);
const ball5 = createBall(scene, 2, 0.1, -1.5, geometryBall, materialBall);
// ------------------- RectAreaLight ------------ //
RectAreaLightUniformsLib.init();
let width = 9;
let height = 1;
let intensity = 10;
const rectLightUp = new THREE.RectAreaLight( 0xff0000, intensity, width, height );
rectLightUp.position.set( 0, 0, -2.24);
rectLightUp.rotation.y = Math.PI;
scene.add( rectLightUp )
width = 9;
height = 1;
intensity = 5;
const rectLightDown = new THREE.RectAreaLight( 0x0000ff, intensity, width, height );
rectLightDown.position.set( 0, 0, 2.24);
scene.add( rectLightDown )
// --------------- Box Constrols -------------- //
const boxLeft = createBox(scene, -4.45, 0.1 / 2, 0);
const boxRight = createBox(scene, 4.45, 0.1 / 2, 0);
const controlBoxLeft = new MoveObject(boxLeft);
let spotLight = createSpotLight(0xffffff, ball, scene);
let spotLight = createSpotLight(0xffffff, ball4, scene);
let lightAmbient = createLightAmbient(scene);
let lightPoint = createLightPoint(scene);
createMap(scene);
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 1, 5);
camera.position.set(0, 4, 5);
controls.update();
function animate() {
stats.begin();
if (Date.now() - time > 10000)
{
time = Date.now();
spotLight = refreshSpotLight(scene, spotLight, ball);
spotLight = refreshSpotLight(scene, spotLight, ball4);
lightPoint = refreshLightPoint(scene, lightPoint);
}
// controls.update();
ball.position.x = Math.sin(Date.now() * 0.001) * 2;
ball.position.z = Math.cos(Date.now() * 0.001) * 2;
updateBalls();
renderer.render(scene, camera);
controlBoxLeft.update();
stats.end();
}
function updateBalls() {
ball1.position.z = Math.sin(Date.now() * 0.001) * 2;
ball2.position.x = Math.sin(Date.now() * 0.001) * 3.5;
ball3.position.x = Math.sin(Date.now() * 0.001) * 3.5;
ball3.position.z = Math.sin(Date.now() * 0.001) * 2;
ball4.position.z = Math.sin(Date.now() * 0.001) * 2;
ball4.position.x = Math.cos(Date.now() * 0.001) * 2;
ball5.position.y = Math.sin(Date.now() * 0.001) * 0.5 + 0.7;
}
renderer.setAnimationLoop(animate)
document.addEventListener("wheel", onDocumentWheel, false);

6
site/game/map.js
View File

@ -6,7 +6,7 @@
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:51 by edbernar #+# #+# */
/* Updated: 2024/08/07 16:26:17 by hubourge ### ########.fr */
/* Updated: 2024/08/08 15:36:48 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
@ -26,7 +26,7 @@ function createMap(scene) {
function createWall(scene, x, y, z, thickness) {
const geometryWall = new THREE.BoxGeometry(9, 0.5, thickness);
const materialWall = new THREE.MeshLambertMaterial({
const materialWall = new THREE.MeshPhysicalMaterial({
color: 0x3b3b3b,
});
const wall = new THREE.Mesh(geometryWall, materialWall);
@ -38,7 +38,7 @@ function createWall(scene, x, y, z, thickness) {
function createGround(scene) {
const geometry = new THREE.PlaneGeometry(9, 4.5, 1);
const material = new THREE.MeshLambertMaterial({
const material = new THREE.MeshPhysicalMaterial({
color: 0x3b3b3b,
});
const plane = new THREE.Mesh(geometry, material);