Game

- Added more ball in scene
    - Modify Lambert texture to Physical
    - Implement RectAreaLight in scene

site/game/elements.js

@@ -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 };

site/game/main.js

@@ -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 materialBall = new THREE.MeshPhysicalMaterial({ color: 0xffffff });
-const ball = new THREE.Mesh(geometryBall, materialBall);
+
-ball.position.y = 0.1;
+const ball1 = createBall(scene, 0, 0.1, 0, geometryBall, materialBall);
-ball.castShadow = true;
+const ball2 = createBall(scene, 2, 0.1, 0, geometryBall, materialBall);
-scene.add(ball);
+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;
+	updateBalls();
-	ball.position.z = Math.cos(Date.now() * 0.001) * 2;
 	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);

site/game/map.js

@@ -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);