Into the lighthouse

The key to achieving a smooth, continuous camera movement was to place the camera inside an Empty object in Blender, referred to as the CameraRig , and link it to a bezier curve.

First, we create a bezier curve and enable Path Animation , specifying the total number of frames needed for the camera to travel along it. In our case, this was set to 2,808 frames (equivalent to a 117-second single take).

Next, we add a Follow Path constraint to the CameraRig, targeting the bezier curve. This setup ensures that the CameraRig follows the defined path throughout the entire timeline.

Blender UI showing curve and constraint settings

To export this animation properly in the GLB file, we need to bake it. This is done by selecting the CameraRig and navigating to: Object > Animation > Bake Action . In our project, we used a step of every 20 frames , which was sufficient to maintain smoothness. Depending on each project's needs, this value can be adjusted for more or less detail.

In this project, we used as few materials as possible to optimize performance. We also avoided embedding images in the GLB file, as they were dynamically preloaded on the Three.js side instead.

A key part of the workflow was creating a SceneLoader class, where we defined a setupMaterials method. In this method, we created two THREE.MeshStandardMaterial and one THREE.MeshBasicMaterial. Then, during the setupScene phase (executed after loading), we used a traverse function to assign these materials to any node that was a Mesh.

3a. Gradient material

In Blender, this was a Principled BSDF material connected to an Image Texture node set as the Base Color. The texture itself was a minimal 128x128px image, using 16x64px gradient bands. By using gradient mapping with an atlas texture, we achieved a colorful scene using a very small texture, which is especially effective for an "unlit" aesthetic.

Gradient material setup in Blender.

3b. Gradient with pattern material

This one was more complex. I wanted to recreate an aesthetic similar to the rocks in Lands End, which used a color gradient combined with a pattern texture. To achieve this, we needed two sets of UVs. The first UV set was used similarly to the gradient material (referenced in Blender as the default UVMap), and we created a second UV set (UVMap.001) scaled by a factor of 16 using a Vector > Mapping node. Then, we mixed both before connecting them to the Base Color. This entire node setup is shown in the image.

Gradient and pattern material node setup in Blender.

While this looked as intended in Blender, matching it in Three.js required further work. Starting from a clone of the gradient material, I used the onBeforeCompile method to inject an additional map and assign it to the secondary UV channel (.uv1 in Three.js, as the primary is .uv). The code snippet below shows how this was implemented:

            
    this.commonGradientPatternMaterial = this.commonGradientMaterial.clone()
    this.commonGradientPatternMaterial.onBeforeCompile = (shader) => {
        shader.uniforms.map2 = { value: assets.pattern_img }
        shader.uniforms.repeatScale = { value: 8.0 }
        shader.vertexShader = shader.vertexShader.replace(
            '#include <uv_pars_vertex>',
            `
                #include <uv_pars_vertex>
                attribute vec2 uv1;
                varying vec2 vUv1;
                `
        )
        shader.vertexShader = shader.vertexShader.replace(
            '#include <uv_vertex>',
            `
                #include <uv_vertex>
                vUv1 = uv1;
                `
        )
        shader.fragmentShader = shader.fragmentShader.replace(
            '#include <uv_pars_fragment>',
            `
                #include <uv_pars_fragment>
                varying vec2 vUv1;
                uniform sampler2D map2;
                uniform float repeatScale;
                `
        )
        shader.fragmentShader = shader.fragmentShader.replace(
            '#include <map_fragment>',
            `
                #ifdef USE_MAP
                vec4 sampledDiffuseColor = texture2D( map, vMapUv );
                vec4 patternColor = texture2D( map2, vUv1 * repeatScale );
                diffuseColor *= mix(sampledDiffuseColor, patternColor, patternColor.a);
                #endif
                `
        )
    }
            
            

3c. Memories material

This was the simplest material by itself: a THREE.MeshBasicMaterial with transparency. However, the complexity came from the need to animate its opacity over time, so the "memories" could appear and disappear throughout the film.

Memories material node setup in Blender.

In Blender, I needed a value that could be animated over the timeline. I chose the scaleX property of an Empty object named "Memories-Driver", which I animated in the Graph Editor to control when each memory should appear or fade. To link this to the material's alpha, I added an Input > Value node, then connected a driver to it. This driver referenced the scaleX value of "Memories-Driver."

On the Three.js side, during the update loop, I assigned the opacity property of the material to the scale.x of the exported Memories-Driver object3D, ensuring perfect sync with the timeline.

            
    clips.forEach((clip) => {
        const isOnceClip = clip.name.includes('Once')
        this.animationActions[clip.name] = isOnceClip
            ? this.animationCameraMixer.clipAction(clip)
            : this.animationMixer.clipAction(clip)

        let loopType = THREE.LoopOnce
        let clampWhenFinished = true
        if (clip.name.includes('Loop')) {
            loopType = THREE.LoopRepeat
            clampWhenFinished = false
        } else if (clip.name.includes('PingPong')) {
            loopType = THREE.LoopPingPong
            clampWhenFinished = false
        }
        this.animationActions[clip.name].setLoop(loopType)
        this.animationActions[clip.name].clampWhenFinished = clampWhenFinished
        this.animationActions[clip.name].play()
    })