3D-Web/about.html at main · Behram484/3D-Web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About — Reborn Wings</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>

<header class="site-header">
    <nav class="navbar navbar-expand-lg navbar-dark px-3">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="index.html">
                <span class="logo-mark"><span class="logo-wing logo-wing--l"></span><span class="logo-body"></span><span class="logo-wing logo-wing--r"></span></span>
                <span class="logo-text"><span class="logo-text__title">Reborn<span class="accent">Wings</span></span><span class="logo-text__strap">Built for war. Restored for joy.</span></span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="index.html">Showroom</a></li>
                    <li class="nav-item"><a class="nav-link active" href="about.html">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="originality.html">Originality</a></li>
                    <li class="nav-item"><a class="nav-link" href="sitemap.html">Site Map</a></li>
                    <li class="nav-item"><a class="nav-link" href="references.html">References</a></li>
                    <li class="nav-item"><a class="nav-link" href="submission.html">Submission</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

<main class="page-content">

    <h1>About Reborn Wings</h1>
    <p class="lead"><em>Built for war. Restored for joy.</em></p>

    <section id="about">
        <h2>About</h2>
        <p>
            I chose this topic because I am drawn to the engineering of Second World War aircraft and
            to the way they have outlived their original purpose: the P-51, Bf 109 and Yak-3 fly side
            by side at airshows today, restored and admired as machines. <em>Reborn Wings</em> is an
            interactive 3D showroom built around that idea for the <em>Interactive 3D App</em> module
            at the University of Sussex (2025/26).
        </p>
    </section>

    <section id="models">
        <h2>3D Models</h2>
        <p>
            I created three different aircraft models in Blender to represent three of the most famous
            fighters of the Second World War — the American P-51 Mustang, the German Bf 109, and the
            Soviet Yak-3. Each model contains two animations: a control-surface animation where the
            flaps or tail surfaces flex, and a propeller animation where the spinner rotates. I also separated the
            propeller, flaps, ailerons, and tail surfaces from the fuselage so they can be controlled
            and animated independently in the web page.
        </p>
    </section>

    <section id="process">
        <h2>Process and tools</h2>
        <p>
            Each aircraft was modelled, rigged, and animated entirely in Blender 4. The screenshots
            below show the same P-51 file (<code>plane/plane1.blend</code>) — first in solid shading
            with the historical livery applied, and second in wireframe with the scene outliner and
            animation timeline open, so the mesh decomposition (separate <code>Fuselage</code>,
            <code>flap.L/R</code>, <code>tail.L/R</code>) and the two named animation clips
            (<code>flap</code> and <code>spiral</code>) are both visible.
        </p>
        <div class="process-grid">
            <figure class="process-figure">
                <img src="about-images/Blender-solid.png"
                     alt="P-51 Mustang in Blender, solid shading with livery applied"
                     loading="lazy" decoding="async" />
                <figcaption>Solid view in Blender — the finished P-51 with its historical livery applied.</figcaption>
            </figure>
            <figure class="process-figure">
                <img src="about-images/blender-wireframe.png"
                     alt="P-51 in Blender wireframe view, with scene outliner showing mesh decomposition and timeline showing the spiral animation"
                     loading="lazy" decoding="async" />
                <figcaption>Wireframe view — 3 K triangles, mesh broken into Fuselage / flap.L/R / tail.L/R, with the <code>spiral</code> animation clip visible on the timeline (the <code>flap</code> clip lives on the same Armature).</figcaption>
            </figure>
        </div>
    </section>

    <section id="design">
        <h2>Design</h2>
        <p>
            I used CSS to create a dark, warm hangar-style layout with a custom CSS logo, a sticky
            navigation bar, and a full-bleed 3D viewport. I used Three.js to set up the scene, with
            OrbitControls so users can drag to rotate and scroll to zoom around the aircraft. I also
            added a procedural sunset Sky behind the planes, an HDRI environment for reflections, and
            four named lights (ambient, key, spot, rim) with on-screen buttons to control wireframe
            mode, shader mode, bloom, camera presets, and light visibility.
        </p>
    </section>

    <section id="integration">
        <h2>Integration</h2>
        <p>
            For audio I used a propeller-engine recording from Pixabay (Pixabay Content Licence),
            played by an HTML5 <code>&lt;audio&gt;</code> element from the Sound tab in the info card. I built a
            small hangar floor in front-end code using a procedurally painted canvas texture with a
            warm light pool baked in to match the sunset overhead. In the rendering code, I generated
            each aircraft's historical paint scheme (silver P-51, RLM-camouflage Bf 109, VVS Yak-3)
            at runtime by mapping a small colour palette onto the model's largest meshes, with
            specific parts (tail, ailerons, propeller spinner) overridden by name. I also wrote a
            custom GLSL shader that can replace the PBR materials with a Fresnel-rim preview for
            inspecting model geometry.
        </p>
    </section>

    <section id="interaction">
        <h2>Interaction</h2>
        <p>
            Users can switch between the three aircraft using the top strip (with a hangar-door
            transition), and read each plane's story in the side info card with Story / Image / Sound
            tabs. In the 3D viewer, they can drag to orbit and scroll to zoom, toggle wireframe mode,
            switch to the custom shader, and turn the bloom post-processing on or off. They can also
            play the two animations for each plane, jump between four camera presets (front, side,
            top, iso), toggle each light independently, adjust the key-light intensity, and trigger
            the engine sound from the Sound tab.
        </p>
    </section>

    <section id="implementation">
        <h2>Implementation</h2>
        <p>
            Built with HTML5, CSS3, JavaScript ES modules, Three.js r160, Bootstrap 5.3, and
            jQuery 3.7. The code follows a lightweight MVC pattern: the <strong>Model</strong> is
            the <code>PLANES[]</code> array in <code>js/main.js</code> (structured so it could be
            swapped for a JSON or PHP/SQLite endpoint later); the <strong>View</strong> is the
            Three.js scene plus <code>index.html</code> and <code>css/style.css</code>; the
            <strong>Controller</strong> is <code>js/ui.js</code>, which routes DOM input to the
            view's public API on <code>window.RebornWings</code>.
        </p>
        <p>
            Tested on Chrome 124, Firefox 125, Edge 124 (Windows 11) and Safari 17 (iPad). Three
            issues caught during testing and fixed: the original 5.7 MB <code>plane1.glb</code> was
            stalling first load (compressed to WebP, now &lt;500 ms); wireframe state was lost on
            plane switch (now cached and re-applied on <code>plane:loaded</code>); spotlight target
            was never added to the scene (now correctly aimed).
        </p>
    </section>

    <section id="deeper-understanding">
        <h2>Deeper Understanding</h2>
        <p>Five concrete features reach past the basic "rotating object" lab demo:</p>
        <ol>
            <li><strong>Custom GLSL shader</strong> — Fresnel rim + time-driven scan-line, toggleable
                via the <em>Shader</em> button.</li>
            <li><strong>Post-processing bloom</strong> — <code>EffectComposer</code> +
                <code>UnrealBloomPass</code>, switchable at runtime.</li>
            <li><strong>In-Blender animations</strong> — two named clips per aircraft, driven by
                Three.js's <code>AnimationMixer</code>.</li>
            <li><strong>glTF optimisation</strong> — <code>plane1.glb</code> compressed 5.7 MB → 334 KB
                (94 % saving) via WebP at 1024² with <code>@gltf-transform/cli</code>.</li>
            <li><strong>Procedural atmospheric sky</strong> — Three.js's <code>Sky</code> with the
                Preetham-Hosek scattering model, tuned for a layered red-gold-blue sunset behind the aircraft.</li>
        </ol>
        <p>
            Accessibility was treated as part of going further: semantic landmarks, ARIA labels and
            <code>aria-pressed</code> on every toggle, focus rings via <code>:focus-visible</code>,
            <code>prefers-reduced-motion</code> support, and WCAG AA contrast on primary text.
        </p>
    </section>

    <section id="publication">
        <h2>Implementation and Publication</h2>
        <p>
            Hosted on the University ITS Web Server (URL on the
            <a href="submission.html">Submission</a> page) and re-tested on the deployed URL. The
            submission zip contains the full codebase, the optimised <code>.glb</code> models, and
            the editable Blender <code>.blend</code> sources, as required by the assignment brief.
        </p>
    </section>

    <section id="ai-usage">
        <h2>Generative AI Usage Record</h2>
        <p>
            Per the University of Sussex policy on generative AI, this is a complete record of AI use
            in the project. <strong>No AI-generated assets appear in the submission</strong> — every
            3D model, texture, palette, audio sample, and written paragraph was produced by hand.
        </p>
        <p>
            I use <strong>Claude</strong> in VS Code for line-level code completion in JavaScript
            and CSS, allowing Claude to interpret error messages. I also use <strong>ChatGPT</strong>
            to learn more about improving my website. All adopted suggestions have been manually
            reviewed and edited; no unmodified complete files have been directly inserted.
        </p>
    </section>

    <section id="asset-sources">
        <h2>Image and Sound Sources</h2>
        <p>
            All 3D models, textures, and colour palettes are my own work — no third-party model files
            were imported. The engine sound effect is <em>"Small Propeller Plane Flyby"</em> by
            <strong>kalsstockmedia</strong> on Pixabay, used under the Pixabay Content Licence (free
            for commercial use, no attribution required — credited here anyway). Reference photographs used to guide modelling
            were consulted from Wikipedia and Wikimedia Commons (citations on the
            <a href="references.html">References</a> page). The HDRI for image-based lighting is the
            public <em>Royal Esplanade</em> equirectangular HDR from the Three.js examples (MIT),
            loaded from the Three.js CDN at runtime.
        </p>
    </section>

</main>

<footer class="site-footer py-3 text-center small">
    © 2026 Reborn Wings · <a href="index.html">Showroom</a> · <a href="references.html">References</a>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>