added EE to intro

2025-11-15 20:10:31 +00:00
parent b5a23217c6
commit f2c94228d1
8 changed files with 215 additions and 39 deletions
@@ -11,6 +11,14 @@ class Intro{

    constructor(){
        this.canvas = document.querySelector('.intro3d')
+
+        // Order : 
+        // 1. Launch loading promises
+        // 2. When they are all completed, initScene
+        // 2.1 at the end of initScen, we add the class 'ready' to the canvas, which launches the CSS animation
+        // 3. When that CS animation is finished, we can launch the 3D animation (rendering already started to have textures)
+        this.canvas.addEventListener('animationend', this.launch3DAnim.bind(this))
+
        const loadHDR = () =>
            new Promise((resolve, reject) => {
                new RGBELoader()
@@ -18,14 +26,22 @@ class Intro{
                    .load('kloofendal_48d_partly_cloudy_puresky_2k.hdr', resolve, this.hdrProgress, reject)
            })

-        const loadTexture = () => 
+        const loadTexture1 = () => 
            new Promise((resolve, reject) => {
                new THREE.TextureLoader()
                    .setPath('/app/assets/images/')
                    .load('logop42-intro_three.png', resolve, undefined, reject)
            })
        
-        Promise.allSettled([loadHDR(), loadTexture()]).then(this.initScene.bind(this))    
+        const loadTexture2 = () => 
+            new Promise((resolve, reject) => {
+                new THREE.TextureLoader()
+                    .setPath('/app/assets/images/')
+                    .load('Logo-Emergence.png', resolve, undefined, reject)
+            })
+
+
+        Promise.allSettled([loadHDR(), loadTexture1(), loadTexture2()]).then(this.initScene.bind(this))    
        this.Xcorrection = -0.02
    }

@@ -38,17 +54,19 @@ class Intro{
        } 
    }

-    initScene(LoadersResults){
+    initScene(LoadersResults){ console.log('initScene')
        let hdrTexture
-        const [hdrResult, texResult] = LoadersResults
-        if (hdrResult.status === 'fulfilled' && texResult.status === 'fulfilled') {
+        const [hdrResult, texResultP42, texResultEE] = LoadersResults
+        if((hdrResult.status === 'fulfilled') && (texResultP42.status === 'fulfilled') && (texResultEE.status === 'fulfilled')) {
            hdrTexture = hdrResult.value
-            this.backgroundTexture = texResult.value
+            this.backgroundTextureP42 = texResultP42.value
+            this.backgroundTextureEE = texResultEE.value

            hdrTexture.mapping = THREE.EquirectangularReflectionMapping
-            this.backgroundTexture.colorSpace = THREE.SRGBColorSpace
+            this.backgroundTextureP42.colorSpace = THREE.SRGBColorSpace
+            this.backgroundTextureEE.colorSpace = THREE.SRGBColorSpace
        } else {
-            console.error('Loading error:', hdrResult, texResult)
+            console.error('Loading error:', hdrResult, texResultP42, texResultEE)
            return
        }

@@ -71,14 +89,22 @@ class Intro{
        this.renderer.setClearColor(0x000000, 0)
        this.renderer.outputColorSpace = THREE.SRGBColorSpace

-        this.backgroundTexture.colorSpace = THREE.SRGBColorSpace
-        this.backgroundTexture.wrapS = THREE.ClampToEdgeWrapping
-        this.backgroundTexture.wrapT = THREE.ClampToEdgeWrapping
-        this.backgroundTexture.generateMipmaps = false
-        this.backgroundTexture.minFilter = THREE.LinearFilter
-        this.backgroundTexture.magFilter = THREE.LinearFilter
-        this.imageAspect = this.backgroundTexture.image.width / this.backgroundTexture.image.height
-       
+        this.backgroundTextureP42.colorSpace = THREE.SRGBColorSpace
+        this.backgroundTextureP42.wrapS = THREE.ClampToEdgeWrapping
+        this.backgroundTextureP42.wrapT = THREE.ClampToEdgeWrapping
+        this.backgroundTextureP42.generateMipmaps = false
+        this.backgroundTextureP42.minFilter = THREE.LinearFilter
+        this.backgroundTextureP42.magFilter = THREE.LinearFilter
+        this.aspectRatioP42 = this.backgroundTextureP42.image.width / this.backgroundTextureP42.image.height
+
+        this.backgroundTextureEE.colorSpace = THREE.SRGBColorSpace
+        this.backgroundTextureEE.wrapS = THREE.ClampToEdgeWrapping
+        this.backgroundTextureEE.wrapT = THREE.ClampToEdgeWrapping
+        this.backgroundTextureEE.generateMipmaps = false
+        this.backgroundTextureEE.minFilter = THREE.LinearFilter
+        this.backgroundTextureEE.magFilter = THREE.LinearFilter
+        this.aspectRatioEE = this.backgroundTextureEE.image.width / this.backgroundTextureEE.image.height
+        
        this.makeOrResizePlane()
        this.#onResizeCallbacks.push(this.makeOrResizePlane.bind(this))

@@ -117,7 +143,10 @@ class Intro{
                envMapIntensity: 1.5,
                attenuationColor: new THREE.Color(0x88ffcc),
                attenuationDistance: 2,   
-                color: 0x88ffcc,  
+                color: 0x88ffcc, 
+                depthWrite: false,
+                depthTest: true,
+                transparent: true,
            })

            for (let i = 0; i < text.length; i++) {
@@ -130,7 +159,8 @@ class Intro{
                    bevelEnabled: true,
                    bevelThickness: 0.03,
                    bevelSize: 0.03,
-                    bevelSegments: 32
+                    bevelSegments: 32,
+                    renderOrder: 10,
                })
                
                geo.center() 
@@ -151,8 +181,13 @@ class Intro{
            this.#onResizeCallbacks.forEach(fn => fn())
        }) 

+        this.renderer.render(this.scene, this.camera)
        this.canvas.classList.add('ready')
-        this.nextAnim = Date.now()+2000
+
+    }
+
+    launch3DAnim(){ console.log('CSs finished, launching 3D anim')
+        this.nextAnim = Date.now()
        this.animate()
    }

@@ -163,32 +198,76 @@ class Intro{
        const viewWidth = viewHeight * this.camera.aspect
        
        let planeWidth, planeHeight
-        if (viewWidth / viewHeight > this.imageAspect) {
+        if (viewWidth / viewHeight > this.aspectRatioP42) {
            planeHeight = viewHeight
-            planeWidth = planeHeight * this.imageAspect
+            planeWidth = planeHeight * this.aspectRatioP42
        } else {
            planeWidth = viewWidth
-            planeHeight = planeWidth / this.imageAspect
-        }
-        
-        if (!this.plane) {
+            planeHeight = planeWidth / this.aspectRatioP42
+        }        
+        if (!this.planeP42) {
            const geo = new THREE.PlaneGeometry(planeWidth, planeHeight)
-            const mat = new THREE.MeshBasicMaterial({ map: this.backgroundTexture })            
-            this.plane = new THREE.Mesh(geo, mat)
-            this.plane.scale.set(1.44, 1.5, 1)
-            this.plane.position.x = this.Xcorrection
-            this.plane.position.z = 0
-            this.plane.renderOrder = 0
-            this.scene.add(this.plane)
+            const mat = new THREE.MeshBasicMaterial({ map: this.backgroundTextureP42, transparent: false, depthWrite:true, depthTest:true })
+            this.planeP42 = new THREE.Mesh(geo, mat)
+            this.planeP42.scale.set(1.44, 1.5, 1)
+            this.planeP42.position.x = this.Xcorrection
+            this.planeP42.position.z = 0
+            this.planeP42.renderOrder = 0
+            this.scene.add(this.planeP42)
        } else {
-            this.plane.geometry.dispose()
-            this.plane.geometry = new THREE.PlaneGeometry(planeWidth, planeHeight)
+            this.planeP42.geometry.dispose()
+            this.planeP42.geometry = new THREE.PlaneGeometry(planeWidth, planeHeight)
        }
+
+        if (viewWidth / viewHeight > this.aspectRatioEE) {
+            planeHeight = viewHeight
+            planeWidth = planeHeight * this.aspectRatioEE
+        } else {
+            planeWidth = viewWidth
+            planeHeight = planeWidth / this.aspectRatioEE
+        }    
+        if (!this.planeEE) {
+            const geo = new THREE.PlaneGeometry(planeWidth, planeHeight)
+            this.matEE = new THREE.MeshBasicMaterial({ map: this.backgroundTextureEE, transparent: false, alphaTest: 0.01, depthWrite:true, depthTest:true })
+            this.matEE.defines = this.matEE.defines || {}
+            this.matEE.defines.USE_UV = ""
+            this.matEE.onBeforeCompile = shader => {
+                shader.uniforms.uReveal = { value: 0 }  
+                shader.fragmentShader = shader.fragmentShader
+                 .replace(
+                    `#include <uv_pars_fragment>`,
+                    `#include <uv_pars_fragment>
+                     uniform float uReveal;`
+                )                
+                .replace(
+                    `#include <envmap_fragment>`,
+                    `#include <envmap_fragment>
+                     if (vUv.x > uReveal) discard;
+                    `
+                )
+                this.matEE.userData.shader = shader
+            }
+            
+            this.planeEE = new THREE.Mesh(geo, this.matEE)
+            this.planeEE.scale.set(.2, .2, 1)
+            this.planeEE.position.set(0, -0.8, 0)
+            this.planeEE.renderOrder = 1
+            this.scene.add(this.planeEE)
+        } else {
+            this.planeEE.geometry.dispose()
+            this.planeEE.geometry = new THREE.PlaneGeometry(planeWidth, planeHeight)
+        }
+
+
    }

    animate() {
        requestAnimationFrame(this.animate.bind(this))
-
+        if (this.matEE.userData.shader) {
+            if(this.matEE.userData.shader.uniforms.uReveal.value<1){
+                this.matEE.userData.shader.uniforms.uReveal.value += 0.01
+            }
+        }
        if(Date.now()>this.nextAnim){
            this.#lettersZ += .005
            for(const letter of this.glassLetters){
@@ -215,7 +294,6 @@ class Intro{
            }
        }

-
        this.renderer.render(this.scene, this.camera)
    }

@@ -19,6 +19,7 @@ canvas.intro3d{
    background:transparent;
    pointer-events: none;
    z-index:99;
+    opacity: 1; transform: scale(1) 
 }

 canvas.intro3d.ready{