如何将 3d 对象添加到我的网站中？答案

【问题标题】：how do i add a 3d object into my website?如何将 3d 对象添加到我的网站中？
【发布时间】：2023-03-13 00:12:01
【问题描述】：

我有一个嵌入 3D 对象的 google 网站，我如何将 OBJ 文件嵌入到网站上？代码如下：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
    </head>
    <body>
        <a-scene>


            <a-sphere position="0 -5 -24" radius="5" color="purple"></a-sphere>
            
            <a-sphere position="0 -5 -10" radius="4" color="green"></a-sphere>
            <a-sphere position="0 -5 -0" radius="3" color="red"></a-sphere>
            <a-sphere position="0 -5 10" radius="2" color="yellow"></a-sphere>
            <a-sphere position="0 -5 20" radius="1" color="blue"></a-sphere>
            
        </a-scene>
    </body>
</html>

这里是要查看的站点：https://sites.google.com/view/aircraftrecognitionuk/home，我想要一架飞机而不是球体，请有人可以为我编辑此代码，TIA

文件名是：

平面.obj

或者，如果有人想帮助在网站上编辑它，请给我发消息，我可以添加你以帮助在谷歌网站上提供帮助

【问题讨论】：

标签： web 3d aframe

【解决方案1】：

您可以使用obj-model 组件添加.obj 模型：

<a-scene>
  <!-- Preload with a-assets -->
  <a-assets>
    <a-asset-item id="model-obj" src="/path/to/model.obj"></a-asset-item>
    <a-asset-item id="model-mtl" src="/path/to/model.mtl"></a-asset-item>
  </a-assets>

  <!-- add the model to the scene -->
  <a-entity obj-model="obj: #model-obj; mtl: #model-mtl"></a-entity>
</a-scene>

您最好使用 gltf 模型，并使用 gltf-model 组件将它们添加到场景中。

【讨论】：