master

分支 (1)

管理

管理

master

covid-3d-storytelling
/
index.html

<html lang="zh-Hans">

<head>
    <title>新冠回溯</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- Import model-viewer -->
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
    <!-- Import srollama scripts -->
    <script src="https://unpkg.com/scrollama"></script>
    <!-- Import JQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Import Scroll Magic  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.js"></script>
    <!-- Import Babylon.js -->
    <script src="https://cdn.babylonjs.com/babylon.max.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>

    <!-- Import CSS files -->
    <link rel="stylesheet" href="https://zijianli16.github.io/covid-3d-storytelling/css/general.css">
    <link rel="stylesheet" href="https://zijianli16.github.io/covid-3d-storytelling/css/scrollama.css">
    <link rel="stylesheet" href="https://zijianli16.github.io/covid-3d-storytelling/css/model-viewer.css">
    <link rel="stylesheet" href="https://zijianli16.github.io/covid-3d-storytelling/css/map-scrollmagic.css">
    <link rel="stylesheet" href="https://zijianli16.github.io/covid-3d-storytelling/css/babylon.css">
</head>

<body>
    <div id="intro">
        <h1 style="text-align: center;">回溯新冠</h1>
        <h2 style="text-align: center;">3D/AR滑动新闻叙事</h2>
        <h4>作者：李子健</h4>
        <h4>联系方式：<br> 微信: zijianli16<br>邮箱：zijianli16@gmail.com</h4>
        <p>
            备注：这个项目意在展示3D/AR滑动叙事。里面涉及的3D模型、图片、文字、数据仅供参考。
        </p>
    </div>

    <div>
        <h2>
            什么是新型冠状病毒？
        </h2>

        <p>
            2019新型冠状病毒，2020年1月12日，世界卫生组织正式将其命名为2019-nCoV。人感染了冠状病毒后常见体征有呼吸道症状、发热、咳嗽、气促和呼吸困难等。在较严重病例中，感染可导致肺炎、严重急性呼吸综合征、肾衰竭，甚至死亡。
        </p>
        <p>阅读指南：向下滑动可以变换3D视角。点击AR功能可以近距离观察新冠病毒模型。</p>
    </div>

    <div id="content-conatiner">
        <div id="virus-model-container">
            <model-viewer id="virus-model-viewer" ar
                src="https://zijianli16.github.io/covid-3d-storytelling/models/virus-model.glb" alt="新冠病毒3D模型"
                ios-src="https://zijianli16.github.io/covid-3d-storytelling/models/virus-model.usdz" exposure="0.8"
                shadow-intensity="1.7" shadow-softness="1" animation-name="Action" camera-orbit="-344.5deg 76.65deg 3m"
                field-of-view="90deg" min-field-of-view="50deg" max-field-of-view="90deg"
                min-camera-orbit="auto auto 0m" max-camera-orbit="auto auto 3m" autoplay
                quick-look-browsers="safari chrome">

                <button slot="ar-button" id="ar-button">
                    AR功能
                </button>

                <button id="tuchu" class="Hotspot" slot="hotspot-1"
                    data-position="0.5456869988675925m 1.1083549959338548m 0.36137029874144055m"
                    data-normal="0.09884958484158678m 0.9437516755063027m -0.3155337296640292m"
                    data-visibility-attribute="visible">
                    <div class="HotspotAnnotation">棘突</div>
                </button>

                <button id="yellow-p" class="Hotspot" slot="hotspot-2"
                    data-position="0.31439512768158256m 0.5384131658508594m -0.5845267529524666m"
                    data-normal="0.2647913572096705m -0.34541617757574344m -0.9003183889136238m"
                    data-visibility-attribute="visible">
                    <div class="HotspotAnnotation">E蛋白质<br>（E Protein）<br>标注为黄色</div>
                </button>

                <button id="green-p" class="Hotspot" slot="hotspot-3"
                    data-position="-0.000482181381573233m 0.8708903740428329m -0.2540032821447735m"
                    data-normal="0.08843240135165509m 0.9478377897621274m -0.3062404850603938m"
                    data-visibility-attribute="visible">
                    <div class="HotspotAnnotation">血凝素酯酶二聚体<br>（hemagglutinin-esterase dimer)<br>标注为绿色</div>
                </button>

                <button id="purple-p" class="Hotspot" slot="hotspot-4"
                    data-position="-0.10311313339096861m 0.49607635476381834m -0.7069866683530017m"
                    data-normal="0.5854998957600352m 0.5642634700308164m -0.5820623750542289m"
                    data-visibility-attribute="visible">
                    <div class="HotspotAnnotation">膜糖蛋白<br>(M Protein)<br>（标注为紫色）</div>
                </button>

                <button id="dna" class="Hotspot" slot="hotspot-5"
                    data-position="-0.19690285339330726m -0.040792330714902736m 0.20366757345782066m"
                    data-normal="0.7810395660127288m -0.007086720506193607m -0.6244413300824307m"
                    data-visibility-attribute="visible">
                    <div class="HotspotAnnotation">RNA遗传物质<br>（标注为红色)</div>
                </button>

            </model-viewer>

            <figcaption class="figCaption">
                新冠病毒模型来源：https://sketchfab.com/talesrt<br>病毒信息来源：http://www.lascn.com/Item/82421.aspx
            </figcaption>

        </div>

        <div class="scroll-texts">
            <div class="step" data-step="a">
                <p>
                    冠状病毒属的病毒是具有外套膜（envelope）包裹的RNA病毒，其直径约100-160nm，遗传物质在所有RNA病毒中最大。
                </p>
            </div>

            <div class="step" data-step="b">
                <p>
                    <strong>棘突糖蛋白：</strong><br>棘突糖蛋白（S, Spike Protein,是受体结合位点、溶细胞作用和主要抗原位点）。
                </p>
            </div>

            <div class="step" data-step="c">
                <p>
                    <strong>小包膜糖蛋白：</strong><br>小包膜糖蛋白（E, Envelope Protein，较小，与胞膜结合的蛋白）。在病毒进入细胞后会进行大量复制。
                </p>
            </div>

            <div class="step" data-step="d">
                <p>
                    <strong>血凝素糖蛋白：</strong><br>少数种类还有血凝素糖蛋白（HE蛋白，Haemaglutinin－esterase）。它与病毒中酶的活性相关。
                </p>
            </div>

            <div class="step" data-step="e">
                <p>
                    <strong>膜糖蛋白：</strong><br>膜糖蛋白（M，Membrane Protein，负责营养物质的跨膜运输、新生病毒出芽释放与病毒外包膜的形成）。
                </p>
            </div>

            <div class="step" id="last-step" data-step="f">
                <p>
                    <strong>遗传物质RNA:</strong><br>与我们人类的遗传物质双链 DNA 不同，冠状病毒是一类单链 RNA 病毒。比起稳定的双链 DNA
                    结构，单链的遗传物质使得冠状病毒具有更强的变异性。
                </p>
            </div>
        </div>
    </div>

    <div>
        <h2>
            火神山医院和雷神山医院
        </h2>
        <p>
            2020年伊始，新冠病毒肆虐。武汉各医院床位告急。多一张病床，就意味着多一份治愈的希望。火线造医院迫在眉睫。在中国武汉，有两座医院从荒芜之地，建成为抗击疫情的堡垒。
        </p>
    </div>

    <div id="map-container">
        <div id="video-spacer"></div>
        <div id="video-container">

            <video id="bg-video" playsinline autoplay muted>
            </video>
            <figcaption class="figCaption">地理信息来源：Google Earth Studio</figcaption>

        </div>

        <div id="text-container">
            <div class="spacer" id="spacer0001"></div>
            <div id="trigger1"></div>
            <div id="pin1">
                <p class="textbox" id="overlayText01">
                    疫情突发，迅速蔓延。武汉市决定参照北京“小汤山非典医院”模式，在蔡甸知音湖畔修建一座容纳1000张床位的火神山医院。两天后，又决定在30公里外的江夏黄家湖畔，再建一座雷神山医院。
                </p>
            </div>

            <div class="spacer" id="spacer0102"></div>
            <div id="trigger2"></div>
            <div id="pin2">
                <p class="textbox" id="overlayText02">
                    此时的武汉，离汉通道关闭，地铁公交停运，全面进入战时状态。全市仅有两家传染病医院，床位不足900张，大量病人“求治无门”。有患者望眼欲穿，甚至有的直至病逝都没能等到床位。
                </p>
            </div>

            <div class="spacer" id="spacer0203"></div>
            <div id="trigger3"></div>
            <div id="pin3">
                <p class="textbox" id="overlayText03">
                    与时间赛跑，与死神竞速。一张床位，就能挽救一个生命。
                    <br>
                    一声令下。一场事关生死的救援战全面打响!
                </p>
            </div>

            <div class="spacer" id="spacer0304"></div>
            <div id="trigger4"></div>
            <div id="pin4">
                <p class="textbox" id="overlayText04">
                    火神山医院是参照2003年抗击非典期间“北京小汤山医院”模式，建设的一座专门医院，集中收治新型冠状病毒肺炎患者。医院总建筑面积3.39万平方米，编设床位1000张，开设重症监护病区、重症病区、普通病区。
                </p>
            </div>

            <div class="spacer" id="spacer0405"></div>
            <div id="trigger5"></div>
            <div id="pin5">
                <p class="textbox" id="overlayText05">
                    武汉雷神山医院位于江夏区强军路，全院共设床位1600张，分别为2个重症医学科病区、3个亚重症病区及27个普通病区，除重症病区外，病房均为2人间。
                </p>
            </div>

        </div>
    </div>

    <div style="margin-top: 200px;">
        <div>
            <h4>接下来我们进入雷神山病房的内部，来看看病房的内部结构</h4>
        </div>
        <h2 style="margin-top: 30px;">
            3D参观雷神山病房
        </h2>
    </div>

    <div id="babylon-content-container">
        <div id="babylon-video-spacer"></div>
        <div id="babylon-container">
            <div id="loading-screen">
                <img src='images/loadingScreen.gif' alt="loading screen">
            </div>
            <canvas id="canvas" touch-action="auto"></canvas>
            <figcaption class="figCaption">3D模型下载来源:Sketchfab.com </figcaption>
        </div>


        <!-- =================BABYLON SCENE 01 STARTS BELOW================= -->


        <div id="babylon-text-container">
            <div class="spacer" id="babylon-spacer0001"></div>
            <div id="babylon-trigger1"></div>
            <div id="babylon-pin1">
                <p class="textbox" id="babylon-overlayText01">
                    现在我们所看到的就是一个典型的新冠病房的布局。向下滑动以观察和了解病房中的医疗设备及其用途。</p>
            </div>

            <div class="spacer" id="babylon-spacer0102"></div>
            <div id="babylon-trigger2"></div>
            <div id="babylon-pin2">
                <p class="textbox" id="babylon-overlayText02">
                    这是一个移动X光扫描仪，可以随时监测新冠患者的肺部感染情况，方便医生追踪患者的病情。
                </p>
            </div>

            <div class="spacer" id="babylon-spacer0203"></div>
            <div id="babylon-trigger3"></div>
            <div id="babylon-pin3">
                <p class="textbox" id="babylon-overlayText03">
                    病床上方的监视器实时显示病人的心跳，血压，血氧数据，一旦出现异常，医务人员可实时对病人进行相应的救治。
                </p>
            </div>

            <div class="spacer" id="babylon-spacer0304"></div>
            <div id="babylon-trigger4"></div>
            <div id="babylon-pin4">
                <p class="textbox" id="babylon-overlayText04">
                    病床的左侧配备有先进的营养液注射器，可将输液的精确度控制在毫克范围内。
                </p>
            </div>

            <div class="spacer" id="babylon-spacer0405"></div>
            <div id="babylon-trigger5"></div>
            <div id="babylon-pin5">
                <p class="textbox" id="babylon-overlayText05">
                    病床的右侧是静脉注射装置，也就是俗称的打点滴。
                </p>
            </div>

            <div class="spacer" id="babylon-spacer0506"></div>
            <div id="babylon-trigger6"></div>
            <div id="babylon-pin6">
                <p class="textbox" id="babylon-overlayText06">
                    一间病房安排有两张病床，配备有相同的医疗设备。
                </p>
            </div>

            <div class="spacer" id="babylon-spacer0607"></div>
            <div id="babylon-trigger7"></div>
            <div id="babylon-pin7">
                <p class="textbox" id="babylon-overlayText07">
                    病房里还配备有辅助医疗工具，方便年迈和不便行走的病人活动。
                </p>
            </div>

            <div class="spacer" id="babylon-spacer0708"></div>
            <div id="babylon-trigger8"></div>
            <div id="babylon-pin8">
                <p class="textbox" id="babylon-overlayText08">
                    病房中还安装有电脑，可以让医生实时联网与疫情中心同步数据。
                </p>
            </div>

        </div>


    </div>

    <div>
        <h1>完</h1>
    </div>

    <!-- Import javascripts  -->
    <script src="https://zijianli16.github.io/covid-3d-storytelling/js/virus-scrollama.js"></script>
    <script src="https://zijianli16.github.io/covid-3d-storytelling/js/map-scrollmagic.js"></script>
    <script src="js/babylonRoom.js"></script>
</body>

</html>