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

opaque background

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-01-26 13:07:31 +01:00
parent d5b6149992
commit d0d65b8654
5 changed files with 44 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
jsm/Vortex.js
View File

@@ -9,31 +9,31 @@ export class Vortex extends THREE.Group {
this.globalRotation = 0.028
this.darkTextureRotation = 0.006
this.darkMoveForward = 0.009
this.colorFullTextureRotation = 0.006
this.colorFullMoveForward = 0.025
this.transparentTextureRotation = 0.006
this.transparentMoveForward = 0.009
this.opaqueTextureRotation = 0.006
this.opaqueMoveForward = 0.025
const commonCylinderGeometry = new THREE.CylinderGeometry(35, 35, 1000, 12, 1, true)
this.colorFullCylinder = new THREE.Mesh(
this.opaqueCylinder = new THREE.Mesh(
commonCylinderGeometry,
new THREE.MeshBasicMaterial({
side: THREE.BackSide,
blending: THREE.NormalBlending
})
)
this.add(this.colorFullCylinder)
this.add(this.opaqueCylinder)
this.darkCylinder = new THREE.Mesh(
this.transparentCylinder = new THREE.Mesh(
commonCylinderGeometry,
new THREE.MeshLambertMaterial({
side: THREE.BackSide,
blending: THREE.AdditiveBlending
})
)
this.add(this.darkCylinder)
this.add(this.transparentCylinder)
this.position.set(5, 100, -10)
}
@@ -47,51 +47,47 @@ export class Vortex extends THREE.Group {
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(1, 2)
this.darkCylinder.material.map = texture
this.transparentCylinder.material.map = texture
})
this.darkCylinder.material.opacity = 0.14
this.transparentCylinder.material.opacity = 0.14
new THREE.TextureLoader(this.loadingManager).load("./images/plasma2.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(2, 2)
this.colorFullCylinder.material.map = texture
this.opaqueCylinder.material.map = texture
})
this.colorFullCylinder.material.opacity = 0.6
this.colorFullCylinder.material.blending = THREE.NormalBlending
this.globalRotation = 0.028
this.darkTextureRotation = 0.005
this.darkMoveForward = 0.009
this.colorFullTextureRotation = 0.006
this.colorFullMoveForward = 0.025
this.transparentTextureRotation = 0.005
this.transparentMoveForward = 0.009
this.opaqueTextureRotation = 0.006
this.opaqueMoveForward = 0.025
this.visible = true
break
case "Espace":
new THREE.TextureLoader(this.loadingManager).load("./images/stars_space.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(3, 6)
this.darkCylinder.material.map = texture
})
this.darkCylinder.material.opacity = 0.2
new THREE.TextureLoader(this.loadingManager).load("./images/colorfull.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(2, 4)
this.colorFullCylinder.material.map = texture
this.transparentCylinder.material.map = texture
})
this.transparentCylinder.material.opacity = 0.12
new THREE.TextureLoader(this.loadingManager).load("./images/stars_space.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping
texture.repeat.set(3, 6)
this.opaqueCylinder.material.map = texture
})
this.colorFullCylinder.material.opacity = 0.1
this.colorFullCylinder.material.blending = THREE.AdditiveBlending
this.globalRotation = 0.028
this.darkTextureRotation = 0.006
this.darkMoveForward = 0.03
this.colorFullTextureRotation = 0.006
this.colorFullMoveForward = 0.012
this.opaqueTextureRotation = 0.006
this.opaqueMoveForward = 0.03
this.transparentTextureRotation = 0.006
this.transparentMoveForward = 0.012
this.visible = true
break
@@ -106,14 +102,14 @@ export class Vortex extends THREE.Group {
if (this.visible) {
this.rotation.y += this.globalRotation * delta
if (this.darkCylinder.material.map) {
this.darkCylinder.material.map.offset.y += this.darkMoveForward * delta
this.darkCylinder.material.map.offset.x += this.darkTextureRotation * delta
if (this.transparentCylinder.material.map) {
this.transparentCylinder.material.map.offset.y += this.transparentMoveForward * delta
this.transparentCylinder.material.map.offset.x += this.transparentTextureRotation * delta
}
if (this.colorFullCylinder.material.map) {
this.colorFullCylinder.material.map.offset.y += this.colorFullMoveForward * delta
this.colorFullCylinder.material.map.offset.x += this.colorFullTextureRotation * delta
if (this.opaqueCylinder.material.map) {
this.opaqueCylinder.material.map.offset.y += this.opaqueMoveForward * delta
this.opaqueCylinder.material.map.offset.x += this.opaqueTextureRotation * delta
}
}
}