0
点赞
收藏
分享

微信扫一扫

浅谈网络 | 应用层之流媒体与P2P协议

Raow1 2024-12-03 阅读 6

准备工作

从 CDN 导入

1.安装 VSCode
2.安装 Node.js
3.查看Three.js最新版本
在这里插入图片描述
4.如何cdn引入
https://cdn.jsdelivr.net/npm/three@v版本号/build/three.module.js
例如:https://cdn.jsdelivr.net/npm/three@v0.170.0/build/three.module.js
在这里插入图片描述

我们需要用到three.js和它对应的工具包
https://cdn.jsdelivr.net/npm/three@v0.170.0/examples/jsm/
在这里插入图片描述
5.创建html文件

<!DOCTYPE html>
<html>

<head>
    <title>three.js css3d - sprites</title>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            color: #000;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <!-- 类似于创建 并设置别名 -->
    <script type="importmap">
            {
              "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
              }
            }
          </script>
    <!-- 导入包名 -->
    <script type="module">

        import * as THREE from 'three';

        console.log(THREE, 'THREE')

    </script>
</body>

</html>

6.在VSCode中安装serve服务器~ Live Server
在这里插入图片描述
安装完成后 在文件名右键或者文件中右键
在这里插入图片描述
在这里插入图片描述
页面:
肯定是没内容的 因为我们只是引入 打印了一下 THREE 对象
在这里插入图片描述
这就表示我们环境准备好了。

举报

相关推荐

0 条评论