如何使用HTML和CSS在网页中插入3D对象

你是一个有创意的前端网页设计师，或者你正在寻找让你的网站看起来更有互动性和视觉吸引力的方法？你想为你的产品做有趣的广告吗？不要再看了。今天，我们将学习如何在网站中插入3D物体。

在本教程中，我们将用基本组件创建一个简单的网页，设计其图层，然后在网页中插入3D对象。

主要收获

在本教程结束时，读者将获得以下知识。

3D对象、格式以及它们的一些属性。
如何为自己的网站创建或获取3D对象。
在网站中插入一个3D对象。
对插入到网页中的3D对象进行格式化。

前提条件

在我们开始之前，本教程的一些先决条件包括。

对HTML和网页开发有良好理解的基本知识。
对CSS有基本的了解。
在你的机器上安装一个基本的网页开发IDE或文本编辑器。在我们的案例中，我们将使用Visual Studio Code。
一个稳定的互联网连接。

什么是3D对象？

如果你有这样的疑问，我们可以很容易地回答：3D对象或3D模型是具有三个维度的形状：长、宽、高。

如何获得 3D 物体？

我们可以通过以下方式获得三维物体：从头开始创建、扫描现实生活中的物体、修改模板以满足你的需要，以及下载在线模型。我们将简要介绍上述每一种方法。

从头开始创建三维物体

人们可以使用3D模型创建软件从头开始创建3D物体，这些软件可以下载到电脑中。人们也可以在3D建模网站上进行在线设计。

从现实生活中的物体扫描

你可以通过用你选择的扫描仪扫描物品来创建一个。

摄影测量是另一个可以使用的过程。

摄影测量可以简单地定义为从二维图像中获取可靠的测量数据的艺术，通过重叠形成一个三维模型。

这种方法更简单，更可取，因为人们可以使用智能手机生成的二维图像，获得实时的三维模型。

修改现有模板

人们可以修改计算机上的现有模板或以前为另一个项目创建的模板，以满足你的需要。

在线下载

有许多网站有不同的3D模型。允许免费下载的例子有Sketchfab和Google Poly等。

三维模型格式

这些格式用于存储模型的外观，对模型的动画进行编码，对几何图形进行编码，以及存储模型的物理外观。它们被用于视频游戏、3D打印、工程、电影和其他许多方面。

一些常用的格式包括：FBX 、STL 、OBJ 、glTF 、DAE 等等。

在我们的案例中，我们将使用glTF model 。

图形语言传输格式（glTF），是一种3D模型格式，旨在通过应用程序有效地传输和加载3D模型。

在访问上述网站或任何其他网站后，搜索任何喜欢的模型并下载它。在本例中，我们将搜索、下载并使用glTF格式的虚拟现实头盔（VR Headset）模型。

VR Headsets

三维模型属性

这些是由前端开发人员设置的网站上所查看的3D对象的特征。

人们可以为3D模型设置的一些属性包括。

自动旋转
替代文本（alt）。
模型的可见性
增强的真实性
触摸动作
相机控制
来源(src)
ios-src以及更多的内容......

现在让我们进入本教程。

首先，让我们来设置我们的Visual Studio Code IDE。

在扩展标签中，搜索HTML Boilerplate和Live Server扩展并安装它们。
创建一个文件夹，并将其命名为 "3D对象"。
用Visual Studio Code打开该文件夹，创建两个文件夹，命名为 "assets "和 "css"。
在主目录中创建一个 "index.html "文件，在CSS文件夹中创建 "style.css"。

创建一个网页结构

我们要创建一个简单的HTML结构。

我们可以使用模板生成器来简化这个过程，这些生成器可能默认预装在Visual Studio Code中，或者作为可下载的扩展，在索引文件中输入 "html:5 "或 "html5-boilerplate"。

由于我们不需要生成的模板中的额外元素，我们将删除额外的代码，并将其链接到我们的CSS文件中。

让我们也把它与一些在线脚本联系起来，这些脚本将加载一些 "Font Awesome "字体和图标。

结果将如下图所示。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>3D Object</title>
        <script src='https://kit.fontawesome.com/a076d05399.js' />
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    </body>
</html>

通过在资源管理器中右击 "index.html "文件并选择 "用实时服务器打开 "或在状态栏上点击 "Go live "来启动实时服务器。

它将自动在默认浏览器中打开网页的预览，由于我们还没有添加任何内容，所以它将是空白的。

我推荐你使用谷歌浏览器，因为它支持大多数3D对象。你可以在设置中改变默认浏览器。

如果在浏览器中不能自动打开网页预览，请在Visual Studio Code状态栏中检查服务器使用的端口号，然后在浏览器中输入URL进行访问，像这样。

<code>http://127.0.0.1:5501/</code>

端口号因人而异。在我的例子中，它是端口号5501 。如果服务器没有完全启动，请停止任何在后台运行的具有类似地址的服务。如果它仍然有错误，请在网上寻找有关它显示的错误的额外支持。

在头部部分，添加一个链接来导入model-viewer JavaScript代码。这样你就可以把组件导入到网页中。

<!--Imports a model-viewer JavaScript code -->
<!--It helps to handle how the 3D Object would be displayed -->
<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>

将你的标志图片复制到assets文件夹中。

完成后，添加一个div 元素的id ，作为container ，以容纳我们在正文标签中的所有内容，同时在其中添加另一个用于我们的导航栏。

让我们也添加div 元素与以下ids。

aside 用于保存我们的3D对象。
content 用于对该对象的一些解释，以及
icons 用于一些社会媒体图标。

添加一个简单的标志和一些链接到网页上，以及它们在css中的一些属性，如下图所示。

<!-- Main Container -->
<div id="container">
    <!-- Navbar container -->
    <div id="navbar">
        <div id="logo">
            <img src="assets/logo.png" alt="logo">
        </div>
        <ul>
            <li class="active">
                <a href="#">Home</a>
            </li>
            <li><a href="#">Tech</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Help</a></li>
        </ul>
    </div>
    <!-- An aside -->
    <!-- This is for holding the 3D object -->
    <div id="aSide">
        
    </div>

    <!-- Content container -->
    <!-- This is for holding some brief description about the 3D object -->
    <div id="content">
        <h2>3D VR LIVE</h2>
        <p>The modern headsets, boost your pleasure to the MAX!</p>
        <button>Shop</button>
    </div>

    <!-- Social media icons -->
    <!-- This is for holding some company's social media icons and related links -->
    <div id="icons">
        <div id="iconsLogo">
            <i class="fab fa-facebook-f"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-youtube"></i>
            <i class="fab fa-twitter"></i>
        </div>
    </div>
</div>

现在，用css对网页和div 元素进行样式处理。

/* The webpage overall styling */
* {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    box-sizing: border-box;
    color: grey;
}

/*  This is for styling the main container that holds everything */
#container {
    height: 100vh;
    width: 100%;
    position: relative;
    background: #f7f7f7;
}

/* This styles the navbar and its contents */
#navbar {
    height: 60px;
    width: 100%;
    position: absolute;
    top: 20px;
    left: 0;
}

/* This styles the logo in the navbar */
#navbar #logo {
    height: 60px;
    width: 60px;
    position: absolute;
    left: 3%;
    top: -5px;
}

/* This styles the logo image to be used in the navbar */
#navbar #logo img {
    height: 60px;
    width: 60px;
}

/* This styles the unlisted links in the navbar */
#navbar ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 5%;
    top: 0;
}

/* This changes the appearance of the listed links in the navbar */
#navbar ul li {
    height: 60px;
    width: 80px;
    margin: 0 30px;
    display: grid;
    place-items: center;
    color: grey;
}

/* This sets the hover action of the navbar links */
#navbar ul:hover .active {
    background: none;
    border: none;
}

/* This styles the descriptions of the 3D object */
#content {
    height: 500px;
    width: 700px;
    position: absolute;
    left: 12%;
    top: calc(50% - 250px);
}

/* This styles the heading in the 3D description */
#content h2 {
    font-size: 140px;
    color: grey;
}

/* This styles the paragraph in the 3D description*/
#content p {
    font-size: 20px;
    color: rgb(189, 189, 189);
}

/* This styles the button in the 3D description*/
#content button {
    width: 35%;
    height: 40px;
    font-size: 16px;
    font-family: sans-serif;
    margin-top: 5vh;
    margin-left: center;
    border: none;
    outline: none;
    border-radius: 20px;
    background: dodgerblue;
    color: white;
}

/* This adds some hover effects over the button */
#content button:hover {
    background: navy;
}

/* This styles the social media icons*/
#icons {
    height: 500px;
    width: 140px;
    background: none;
    position: absolute;
    left: 0;
    top: calc(50% - 250px);
    display: flex;
    align-items: center;
    filter: drop-shadow(2px 2px 2px grey);
}

/* This styles the social media icons logos*/
#icons #iconsLogo {
    height: 300px;
    width: 50px;
    display: flex;
    flex-direction: column;
}

/* This styles the social media icons logos images*/
#icons #iconsLogo i {
    height: 50px;
    width: 50px;
    font-size: 30px;
    margin: 10px;
    color: grey;
    display: grid;
    place-items: center;
    cursor: pointer;
}

结果如下。

Page structure

插入3D对象

现在，让我们把3D模型添加到网页上。首先，如果3D模型文件是zip 格式，将下载的模型zip ，提取成文件，如.bin 和.gltf 。

来自".bin "文件的数据用于缓冲器中的缓冲，然后被BufferViews、访问器和网格基元使用

将这些文件复制到main 目录下的assets 文件夹中。在复制文件时，请确保检查并查看zip 是否有任何额外的文件或图像，。

这些文件的名称可能与assets文件夹中的图片不冲突。如果它们有冲突，在粘贴之前，先重新命名assets文件夹中的图像。

在具有aside id的div 元素中，让我们导入3D对象和它的一些属性。

在这种情况下，我们将使用type 、source(src) 、alternative text （以防任何加载错误）、auto-rotate （用于对象的连续旋转）、camera-controls （允许人们以他们喜欢的视角查看对象）、ar （支持增强现实，AR，设备）和ios-src （用于支持iOS 12+设备）。

编写下面的代码来导入网页中的3D模型。

<!-- 3D objsect -->
<!-- This inserts the 3D object inside the aside container -->
<model-viewer src="assets/HTC_Vive_Headset.gltf" alt="VR Headset" auto-rotate camera-controls ar ios-src="assets/HTC_Vive_Headset.gltf"></model-viewer>

你可以在Model-viewer网站上获得上述代码，甚至更多的属性。在这里，你也可以在文档部分看到一些可用于该对象的模型属性及其用途。

在实时预览中，它将输出以下内容。

Inserting a 3D Model

下一步是使用CSS来修改它的外观。

让我们通过将下面的代码添加到我们的CSS文件中来完成。

/* This styles the aside container */
#aSide {
    height: 600px;
    width: 600px;
    position: absolute;
    top: calc(50% - 250px);
    right: 7%;
}

/* This styles the 3D object inserted in the aside container */
#aSide model-viewer {
    height: 600px;
    width: 600px;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
}

最终结果。

Final results

你可以在这个资源库中找到上面的代码。

如果你已经达到了这一点，这意味着你的3D模型已经很好地插入到网页中，以统一的速度旋转，并且可以修改摄像机的角度。

总结

三维物体对于帮助客户看到他们产品的完整尺寸和相对大小是非常有用的。与二维图像相比，它们的外观和互动性都更有趣。

综上所述，读者学到了以下内容。

什么是三维物体。
三维对象的格式和属性。
如何获得3D对象。
如何使用HTML和CSS在网页中插入3D对象。

你可以在下面的参考资料中了解更多关于3D对象以及如何使用JavaScript创建一个3D对象。

如何使用HTML和CSS在网页中插入3D物体