adrien/teTra
adrien/teTra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweak bg and minoes style

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-06-09 21:47:28 +02:00
parent 7af642c800
commit eda4e7324a
1 changed files with 58 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
app.js
View File

@ -82,16 +82,6 @@ const CLEARED_LINES_NAMES = [
"TETRA", "TETRA",
] ]
const GLOBAL_ROTATION = 0.0025
const DARK_TEXTURE_ROTATION = 0.0015
const DARK_MOVE_FORWARD = -0.0007
const DARK_OPACITY = 0.3
const COLORFULL_TEXTURE_ROTATION = 0.0015
const COLORFULL_MOVE_FORWARD = -0.002
const COLORFULL_OPACITY = 0.3
/* Classes */ /* Classes */
@ -346,7 +336,7 @@ const minoCamera = new THREE.CubeCamera(1, 1000, minoRenderTarget)
minoCamera.position.set(5, 10) minoCamera.position.set(5, 10)
Tetromino.prototype.lockedMaterial = new THREE.MeshBasicMaterial({ Tetromino.prototype.lockedMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff, color: 0xffffff,
reflectivity: 0.85, reflectivity: 0.9,
envMap: minoRenderTarget.texture envMap: minoRenderTarget.texture
}) })
@ -365,11 +355,11 @@ I.prototype.srs = [
] ]
I.prototype.material = new THREE.MeshBasicMaterial({ I.prototype.material = new THREE.MeshBasicMaterial({
color: 0xafeff9, color: 0xafeff9,
reflectivity: 0.85, reflectivity: 0.9,
envMap: minoRenderTarget.texture, envMap: minoRenderTarget.texture,
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
opacity: 0.6 opacity: 0.7
}) })
I.prototype.ghostMaterial = new THREE.MeshBasicMaterial({ I.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
color: 0xafeff9, color: 0xafeff9,
@ -388,11 +378,11 @@ J.prototype.minoesPosition = [
] ]
J.prototype.material = new THREE.MeshBasicMaterial({ J.prototype.material = new THREE.MeshBasicMaterial({
color: 0xb8b4ff, color: 0xb8b4ff,
reflectivity: 0.85, reflectivity: 0.9,
envMap: minoRenderTarget.texture, envMap: minoRenderTarget.texture,
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
opacity: 0.6 opacity: 0.7
}) })
J.prototype.ghostMaterial = new THREE.MeshBasicMaterial({ J.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide, side: THREE.DoubleSide,
@ -411,11 +401,11 @@ L.prototype.minoesPosition = [
] ]
L.prototype.material = new THREE.MeshBasicMaterial({ L.prototype.material = new THREE.MeshBasicMaterial({
color: 0xfdd0b7, color: 0xfdd0b7,
reflectivity: 0.85, reflectivity: 0.9,
envMap: minoRenderTarget.texture, envMap: minoRenderTarget.texture,
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
opacity: 0.6 opacity: 0.7
}) })
L.prototype.ghostMaterial = new THREE.MeshBasicMaterial({ L.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide, side: THREE.DoubleSide,
@ -434,11 +424,11 @@ O.prototype.srs = [
] ]
O.prototype.material = new THREE.MeshBasicMaterial({ O.prototype.material = new THREE.MeshBasicMaterial({
color: 0xffedac, color: 0xffedac,
reflectivity: 0.85, reflectivity: 0.9,
envMap: minoRenderTarget.texture, envMap: minoRenderTarget.texture,
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
opacity: 0.6 opacity: 0.7
}) })
O.prototype.ghostMaterial = new THREE.MeshBasicMaterial({ O.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide, side: THREE.DoubleSide,
@ -457,11 +447,11 @@ S.prototype.minoesPosition = [
] ]
S.prototype.material = new THREE.MeshBasicMaterial({ S.prototype.material = new THREE.MeshBasicMaterial({
color: 0xC8FBA8, color: 0xC8FBA8,
reflectivity: 0.85, reflectivity: 0.9,
envMap: minoRenderTarget.texture, envMap: minoRenderTarget.texture,
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
opacity: 0.6 opacity: 0.7
}) })
S.prototype.ghostMaterial = new THREE.MeshBasicMaterial({ S.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide, side: THREE.DoubleSide,
@ -498,11 +488,11 @@ T.prototype.tSlots = [
] ]
T.prototype.material = new THREE.MeshBasicMaterial({ T.prototype.material = new THREE.MeshBasicMaterial({
color: 0xedb2ff, color: 0xedb2ff,
reflectivity: 0.85, reflectivity: 0.9,
envMap: minoRenderTarget.texture, envMap: minoRenderTarget.texture,
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
opacity: 0.6 opacity: 0.7
}) })
T.prototype.ghostMaterial = new THREE.MeshBasicMaterial({ T.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide, side: THREE.DoubleSide,
@ -521,11 +511,11 @@ Z.prototype.minoesPosition = [
] ]
Z.prototype.material = new THREE.MeshBasicMaterial({ Z.prototype.material = new THREE.MeshBasicMaterial({
color: 0xffb8c5, color: 0xffb8c5,
reflectivity: 0.85, reflectivity: 0.9,
envMap: minoRenderTarget.texture, envMap: minoRenderTarget.texture,
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
opacity: 0.6 opacity: 0.7
}) })
Z.prototype.ghostMaterial = new THREE.MeshBasicMaterial({ Z.prototype.ghostMaterial = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide, side: THREE.DoubleSide,
@ -821,6 +811,7 @@ const scene = new THREE.Scene()
const renderer = new THREE.WebGLRenderer() const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight) renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor(0xffffff, 0)
document.body.appendChild(renderer.domElement) document.body.appendChild(renderer.domElement)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 400) const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 400)
@ -836,50 +827,63 @@ controls.maxPolarAngle = 2.14;
controls.target = P(5, 9); controls.target = P(5, 9);
controls.update(); controls.update();
const commonCylinderGeometry = new THREE.CylinderGeometry(25, 25, 400, 20, 1, true)
const GLOBAL_ROTATION = 0.0025
const darkTextureRotation = 0.0006
const darkMoveForward = -0.0006
const darkOpacity = 0.4
const colorFullTextureRotation = 0.0006
const colorFullMoveForward = -0.0016
const colorFullOpacity = 0.4
const commonCylinderGeometry = new THREE.CylinderGeometry(25, 25, 500, 12, 1, true)
// dark space full of stars - background cylinder // dark space full of stars - background cylinder
const darkCylinderTexture = new THREE.TextureLoader(manager).load("images/dark.jpg") const darkCylinderTexture = new THREE.TextureLoader(manager).load("images/dark.jpg");
darkCylinderTexture.wrapS = THREE.RepeatWrapping darkCylinderTexture.wrapS = THREE.RepeatWrapping;
darkCylinderTexture.wrapT = THREE.MirroredRepeatWrapping darkCylinderTexture.wrapT = THREE.MirroredRepeatWrapping;
darkCylinderTexture.repeat.set(1, 1) darkCylinderTexture.repeat.set(1, 1);
const darkCylinder = new THREE.Mesh( const darkCylinderMaterial = new THREE.MeshLambertMaterial({
commonCylinderGeometry,
new THREE.MeshLambertMaterial({
side: THREE.BackSide, side: THREE.BackSide,
map: darkCylinderTexture, map: darkCylinderTexture,
blending: THREE.AdditiveBlending, blending: THREE.AdditiveBlending,
opacity: DARK_OPACITY opacity: darkOpacity
}) });
) const darkCylinder = new THREE.Mesh(
commonCylinderGeometry,
darkCylinderMaterial
);
darkCylinder.position.set(5, 10, -10) darkCylinder.position.set(5, 10, -10)
scene.add(darkCylinder) scene.add(darkCylinder);
// colourfull space full of nebulas - main universe cylinder // colourfull space full of nebulas - main universe cylinder
const colorFullCylinderTexture = new THREE.TextureLoader(manager).load("images/colorfull.jpg") const colorFullCylinderTexture = new THREE.TextureLoader(manager).load("images/colorfull.jpg");
colorFullCylinderTexture.wrapS = THREE.RepeatWrapping colorFullCylinderTexture.wrapS = THREE.RepeatWrapping;
colorFullCylinderTexture.wrapT = THREE.MirroredRepeatWrapping colorFullCylinderTexture.wrapT = THREE.MirroredRepeatWrapping;
colorFullCylinderTexture.repeat.set(1, 1) colorFullCylinderTexture.repeat.set(1, 1);
const colorFullCylinder = new THREE.Mesh( const colorFullCylinderMaterial = new THREE.MeshBasicMaterial({
commonCylinderGeometry,
new THREE.MeshBasicMaterial({
side: THREE.BackSide, side: THREE.BackSide,
map: colorFullCylinderTexture, map: colorFullCylinderTexture,
blending: THREE.AdditiveBlending, blending: THREE.AdditiveBlending,
opacity: COLORFULL_OPACITY opacity: colorFullOpacity
}) });
) const colorFullCylinder = new THREE.Mesh(
commonCylinderGeometry,
colorFullCylinderMaterial
);
colorFullCylinder.position.set(5, 10, -10) colorFullCylinder.position.set(5, 10, -10)
scene.add(colorFullCylinder) scene.add(colorFullCylinder);
const light = new THREE.AmbientLight(0xffffff, 10) const light = new THREE.AmbientLight(0xffffff, 1);
scene.add(light) scene.add(light)
const edgeMaterial = new THREE.MeshBasicMaterial({ const edgeMaterial = new THREE.MeshBasicMaterial({
color: 0x88abe0, color: 0x88abe0,
transparent: true, transparent: true,
opacity: 0.5, opacity: 0.5,
reflectivity: 0.85, reflectivity: 0.9,
envMap: minoRenderTarget.texture envMap: minoRenderTarget.texture
}) })
@ -930,12 +934,12 @@ function animate() {
requestAnimationFrame(animate) requestAnimationFrame(animate)
darkCylinder.rotation.y += GLOBAL_ROTATION darkCylinder.rotation.y += GLOBAL_ROTATION
darkCylinderTexture.offset.y -= DARK_MOVE_FORWARD darkCylinderTexture.offset.y -= darkMoveForward
darkCylinderTexture.offset.x -= DARK_TEXTURE_ROTATION darkCylinderTexture.offset.x -= darkTextureRotation
colorFullCylinder.rotation.y += GLOBAL_ROTATION colorFullCylinder.rotation.y += GLOBAL_ROTATION
colorFullCylinderTexture.offset.y -= COLORFULL_MOVE_FORWARD colorFullCylinderTexture.offset.y -= colorFullMoveForward
colorFullCylinderTexture.offset.x -= COLORFULL_TEXTURE_ROTATION colorFullCylinderTexture.offset.x -= colorFullTextureRotation
controls.update() controls.update()
@ -1201,7 +1205,6 @@ window.onbeforeunload = function(event) {
if (playing) return false if (playing) return false
} }
/*if ('serviceWorker' in navigator) { /*if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js') navigator.serviceWorker.register('service-worker.js')
}*/ }*/