399 lines
13 KiB
JavaScript
399 lines
13 KiB
JavaScript
/* ************************************************************************** */
|
|
/* */
|
|
/* ::: :::::::: */
|
|
/* 3d.js :+: :+: :+: */
|
|
/* +:+ +:+ +:+ */
|
|
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
|
/* +#+#+#+#+#+ +#+ */
|
|
/* Created: 2024/09/13 13:59:46 by edbernar #+# #+# */
|
|
/* Updated: 2024/11/15 15:26:47 by edbernar ### ########.fr */
|
|
/* */
|
|
/* ************************************************************************** */
|
|
|
|
import { createStar, createBox, createRectangle, createRing, colorList } from '/static/javascript/multiOnlineGame/Map.js'
|
|
import { createBarPlayer } from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js'
|
|
import * as THREE from '/static/javascript/three/build/three.module.js'
|
|
import { files } from '/static/javascript/filesLoader.js';
|
|
|
|
let actualBarSelecor = null;
|
|
let actualGoalSelecter = null;
|
|
let lastSelected = null;
|
|
let lastSelectedGoal = null;
|
|
const availableSkins = [
|
|
{id: 0, color: 0xff53aa, texture: null},
|
|
{id: 1, color: 0xaa24ea, texture: null},
|
|
{id: 2, color: 0x2c9c49, texture: null},
|
|
{id: 3, color: 0x101099, texture: null},
|
|
{id: 4, color: null, texture: null},
|
|
{id: 5, color: null, texture: null},
|
|
{id: 6, color: null, texture: null},
|
|
{id: 7, color: null, texture: null},
|
|
];
|
|
const availableGoals = [
|
|
createStar,
|
|
createBox,
|
|
createRectangle,
|
|
createRing
|
|
]
|
|
|
|
class barSelecter
|
|
{
|
|
scene = null;
|
|
renderer = null;
|
|
camera = null;
|
|
spotLight = new THREE.SpotLight(0xffffff, 5);
|
|
selected = lastSelected ? lastSelected : availableSkins[0];
|
|
bar = this.createBarPlayer(this.selected);
|
|
boundChangeSkin = this.changeSkin.bind(this);
|
|
boundSkinSelector = this.resizeSelector.bind(this);
|
|
div = null;
|
|
|
|
|
|
constructor(div)
|
|
{
|
|
const pos = div.getBoundingClientRect();
|
|
this.scene = new THREE.Scene();
|
|
this.renderer = new THREE.WebGLRenderer({antialias: true});
|
|
this.camera = new THREE.PerspectiveCamera(60, (pos.width - 10) / (pos.height - 10));
|
|
|
|
this.div = div;
|
|
if (!lastSelected)
|
|
lastSelected = availableSkins[0];
|
|
this.scene.background = new THREE.Color(0x020202);
|
|
this.renderer.setSize(pos.width - 10, pos.height - 10);
|
|
this.scene.add(this.spotLight);
|
|
this.camera.position.set(0.7, 0.5, 0.7);
|
|
this.spotLight.position.set(0.7, 0.5, 0.7);
|
|
div.appendChild(this.renderer.domElement);
|
|
actualBarSelecor = this;
|
|
this.scene.add(this.bar);
|
|
actualBarSelecor.camera.lookAt(actualBarSelecor.bar.position);
|
|
this.spotLight.target = this.bar;
|
|
this.spotLight.lookAt(this.bar.position);
|
|
this.renderer.setAnimationLoop(this.#loop);
|
|
availableSkins[4].texture = files.skinOneTexture;
|
|
availableSkins[5].texture = files.skinTwoTexture;
|
|
availableSkins[6].texture = files.skinThreeTexture;
|
|
availableSkins[7].texture = files.skinFourTexture;
|
|
div.addEventListener('click', () => {
|
|
const popup = document.getElementById('popup-skin-selector');
|
|
const skins = document.getElementsByClassName('color-box-skin');
|
|
|
|
popup.style.display = 'flex';
|
|
for (let i = 0; i < skins.length; i++)
|
|
{
|
|
skins[i].setAttribute('skinId', availableSkins[i].id);
|
|
if (availableSkins[i].color != null)
|
|
skins[i].style.backgroundColor = `#${availableSkins[i].color.toString(16)}`;
|
|
else
|
|
skins[i].style.backgroundImage = `url("${availableSkins[i].texture.show}")`
|
|
skins[i].removeEventListener('click', this.boundChangeSkin);
|
|
skins[i].addEventListener('click', this.boundChangeSkin);
|
|
}
|
|
popup.removeEventListener('click', this.hideSkinSelector);
|
|
popup.addEventListener('click', this.hideSkinSelector);
|
|
});
|
|
window.addEventListener('resize', this.boundSkinSelector);
|
|
}
|
|
|
|
resizeSelector()
|
|
{
|
|
const pos = this.div.getBoundingClientRect();
|
|
this.renderer.setSize(pos.width - 10, pos.height - 10);
|
|
this.camera.aspect = (pos.width - 10) / (pos.height - 10);
|
|
this.camera.updateProjectionMatrix();
|
|
}
|
|
|
|
hideSkinSelector(event)
|
|
{
|
|
const popup = document.getElementById('popup-skin-selector');
|
|
|
|
if (event.target.getAttribute('id') == 'popup-skin-selector')
|
|
popup.style.display = 'none';
|
|
}
|
|
|
|
changeSkin (event)
|
|
{
|
|
const popup = document.getElementById('popup-skin-selector');
|
|
|
|
const id = event.target.getAttribute('skinId');
|
|
popup.style.display = 'none';
|
|
if (Array.isArray(this.bar.material))
|
|
{
|
|
this.bar.material.forEach(material => {
|
|
if (material.map)
|
|
material.map.dispose();
|
|
material.dispose();
|
|
});
|
|
}
|
|
else
|
|
{
|
|
if (this.bar.material.map)
|
|
this.bar.material.map.dispose();
|
|
this.bar.material.dispose();
|
|
}
|
|
lastSelected = availableSkins[id];
|
|
if (availableSkins[id].color)
|
|
this.bar.material = new THREE.MeshPhysicalMaterial({color: availableSkins[id].color});
|
|
else
|
|
{
|
|
if (typeof availableSkins[id].texture !== 'object')
|
|
this.bar.material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(skin.texture)});
|
|
else
|
|
{
|
|
this.bar.material = [
|
|
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture.left)}),
|
|
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture.right)}),
|
|
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture.top)}),
|
|
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture.bottom)}),
|
|
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture.front)}),
|
|
new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture.back)}),
|
|
]
|
|
}
|
|
}
|
|
this.selected = availableSkins[id];
|
|
}
|
|
|
|
createBarPlayer(color)
|
|
{
|
|
return (createBarPlayer(color));
|
|
}
|
|
|
|
#loop()
|
|
{
|
|
actualBarSelecor.renderer.render(actualBarSelecor.scene, actualBarSelecor.camera);
|
|
actualBarSelecor.bar.rotation.y += 0.005;
|
|
}
|
|
|
|
dispose()
|
|
{
|
|
if (this.renderer)
|
|
{
|
|
this.renderer.dispose();
|
|
this.renderer.forceContextLoss();
|
|
}
|
|
this.renderer = null;
|
|
if (this.scene)
|
|
{
|
|
this.scene.children.forEach(child => {
|
|
if (child.geometry)
|
|
child.geometry.dispose();
|
|
if (child.material)
|
|
child.material.dispose();
|
|
if (child.texture)
|
|
child.texture.dispose();
|
|
this.scene.remove(child);
|
|
});
|
|
}
|
|
this.scene = null;
|
|
actualBarSelecor = null;
|
|
window.removeEventListener('resize', this.boundSkinSelector);
|
|
}
|
|
}
|
|
|
|
class goalSelecter
|
|
{
|
|
scene = null;
|
|
renderer = null;
|
|
camera = null;
|
|
selected = lastSelectedGoal ? lastSelectedGoal : availableGoals[0];
|
|
ambiantLight = new THREE.AmbientLight(0xffffff, 35);
|
|
goal = this.selected(colorList[Math.floor(Math.random() * 100 % colorList.length)], true);
|
|
rendererList = [];
|
|
sceneList = [];
|
|
cameraList = [];
|
|
div = null;
|
|
boundChangeGoal = this.changeGoal.bind(this);
|
|
boundhideGoalSelector = this.hideGoalSelector.bind(this);
|
|
boundshowGoals = this.showGoals.bind(this);
|
|
boundresizeSelector = this.resizeSelector.bind(this);
|
|
|
|
constructor(div)
|
|
{
|
|
const pos = div.getBoundingClientRect();
|
|
this.scene = new THREE.Scene();
|
|
this.renderer = new THREE.WebGLRenderer({antialias: true});
|
|
this.camera = new THREE.PerspectiveCamera(60, (pos.width - 10) / (pos.height - 10));
|
|
|
|
this.div = div;
|
|
lastSelectedGoal = this.selected;
|
|
this.scene.background = new THREE.Color(0x020202);
|
|
this.renderer.setSize(pos.width - 10, pos.height - 10);
|
|
this.scene.add(this.ambiantLight);
|
|
this.camera.position.set(1.5, 0.5, 1.5);
|
|
div.appendChild(this.renderer.domElement);
|
|
actualGoalSelecter = this;
|
|
this.scene.add(this.goal);
|
|
this.camera.lookAt(actualGoalSelecter.goal.position);
|
|
this.renderer.setAnimationLoop(this.#loop.bind(this));
|
|
div.removeEventListener('click', this.boundshowGoals);
|
|
div.addEventListener('click', this.boundshowGoals);
|
|
window.addEventListener('resize', this.boundresizeSelector);
|
|
}
|
|
|
|
resizeSelector()
|
|
{
|
|
const pos = this.div.getBoundingClientRect();
|
|
this.renderer.setSize(pos.width - 10, pos.height - 10);
|
|
this.camera.aspect = (pos.width - 10) / (pos.height - 10);
|
|
this.camera.updateProjectionMatrix();
|
|
}
|
|
|
|
showGoals()
|
|
{
|
|
const popup = document.getElementById('popup-goal-selector');
|
|
const goal = document.getElementsByClassName('color-box-goal');
|
|
|
|
popup.style.display = 'flex';
|
|
|
|
for (let i = 0; i < goal.length; i++)
|
|
{
|
|
const canvas = goal[i].getElementsByTagName('canvas');
|
|
|
|
for (let j = 0; j < canvas.length; j++)
|
|
canvas[j].remove();
|
|
goal[i].setAttribute('goalId', i);
|
|
goal[i].appendChild(this.showObject(availableGoals[i], goal[i].getBoundingClientRect()));
|
|
goal[i].removeEventListener('click', this.boundChangeGoal);
|
|
goal[i].addEventListener('click', this.boundChangeGoal);
|
|
goal[i].style.backgroundColor = `#1a1a1a`;
|
|
}
|
|
popup.removeEventListener('click', this.boundhideGoalSelector);
|
|
popup.addEventListener('click', this.boundhideGoalSelector);
|
|
};
|
|
|
|
showObject(func, pos)
|
|
{
|
|
const scene = new THREE.Scene();
|
|
const renderer = new THREE.WebGLRenderer({antialias: true});
|
|
const camera = new THREE.PerspectiveCamera(60, (pos.width - 8) / (pos.height - 8));
|
|
const mesh = func(colorList[Math.floor(Math.random() * 100 % colorList.length)]);
|
|
const spotLight = new THREE.SpotLight(0xffffff, 5000);
|
|
|
|
renderer.setSize(pos.width - 8, pos.height - 8);
|
|
scene.add(mesh);
|
|
camera.position.set(1.5, 1.5, 1.5);
|
|
spotLight.position.set(1.5, 1.5, 1.5);
|
|
spotLight.target = mesh;
|
|
camera.lookAt(mesh.position);
|
|
scene.add(spotLight);
|
|
scene.background = new THREE.Color(0x1a1a1a);
|
|
this.sceneList.push(scene);
|
|
this.rendererList.push(renderer);
|
|
this.cameraList.push(camera);
|
|
return (renderer.domElement);
|
|
}
|
|
|
|
changeGoal(event)
|
|
{
|
|
if (!this.scene)
|
|
return ;
|
|
const popup = document.getElementById('popup-goal-selector');
|
|
const id = event.target.parentElement.getAttribute('goalId');
|
|
|
|
popup.style.display = 'none';
|
|
lastSelectedGoal = availableGoals[id];
|
|
this.selected = availableGoals[id];
|
|
if (this.scene && this.scene.children && this.scene.children.length > 1)
|
|
{
|
|
this.scene.children[1].geometry.dispose();
|
|
this.scene.children[1].material.dispose();
|
|
this.scene.remove(this.scene.children[1]);
|
|
}
|
|
this.goal = this.selected(colorList[Math.floor(Math.random() * 100 % colorList.length)], true);
|
|
this.scene.add(this.goal);
|
|
this.camera.lookAt(this.goal.position);
|
|
this.disposeGoalSelector();
|
|
}
|
|
|
|
hideGoalSelector(event)
|
|
{
|
|
const popup = document.getElementById('popup-goal-selector');
|
|
|
|
if (event.target.getAttribute('id') == 'popup-goal-selector')
|
|
{
|
|
this.disposeGoalSelector();
|
|
popup.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
disposeGoalSelector()
|
|
{
|
|
const colorBoxGoal = document.getElementsByClassName('color-box-goal');
|
|
|
|
for (let i = colorBoxGoal.length - 1; i >= 0; i--)
|
|
{
|
|
const canvas = colorBoxGoal[i].getElementsByTagName('canvas');
|
|
|
|
for (let j = 0; j < canvas.length; j++)
|
|
canvas[j].remove();
|
|
if (this.rendererList && this.rendererList[i])
|
|
{
|
|
this.rendererList[i].dispose();
|
|
this.rendererList[i].forceContextLoss();
|
|
this.sceneList[i].children.forEach(child => {
|
|
if (child.geometry)
|
|
child.geometry.dispose();
|
|
if (child.material)
|
|
child.material.dispose();
|
|
if (child.texture)
|
|
child.texture.dispose();
|
|
this.scene.remove(child);
|
|
});
|
|
this.rendererList.splice(i, 1);
|
|
this.sceneList.splice(i, 1);
|
|
this.cameraList.splice(i, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
#loop()
|
|
{
|
|
actualGoalSelecter.goal.rotation.y += 0.01;
|
|
actualGoalSelecter.goal.rotation.x += 0.01;
|
|
actualGoalSelecter.renderer.render(actualGoalSelecter.scene, actualGoalSelecter.camera);
|
|
for (let i = 0; this.rendererList && i < this.rendererList.length; i++)
|
|
{
|
|
this.sceneList[i].children[0].rotation.y -= 0.01;
|
|
this.sceneList[i].children[0].rotation.x += 0.01;
|
|
this.rendererList[i].render(this.sceneList[i], this.cameraList[i]);
|
|
}
|
|
}
|
|
|
|
dispose()
|
|
{
|
|
this.disposeGoalSelector();
|
|
if (this.renderer)
|
|
{
|
|
this.renderer.dispose();
|
|
this.renderer.forceContextLoss();
|
|
}
|
|
if (this.rendererList)
|
|
{
|
|
for (let i = 0; i < this.rendererList.length; i++)
|
|
{
|
|
this.rendererList[i].dispose();
|
|
this.rendererList[i].forceContextLoss();
|
|
}
|
|
}
|
|
this.renderer = null;
|
|
if (this.scene)
|
|
{
|
|
this.scene.children.forEach(child => {
|
|
if (child.geometry)
|
|
child.geometry.dispose();
|
|
if (child.material)
|
|
child.material.dispose();
|
|
if (child.texture)
|
|
child.texture.dispose();
|
|
this.scene.remove(child);
|
|
});
|
|
}
|
|
this.scene = null;
|
|
actualGoalSelecter = null;
|
|
this.div.removeEventListener('click', this.boundshowGoals);
|
|
window.removeEventListener('resize', this.boundresizeSelector);
|
|
}
|
|
}
|
|
|
|
export { barSelecter, goalSelecter, lastSelected, availableSkins, lastSelectedGoal, availableGoals }; |