1、Three.js开端准备环境

六卿2024-11-29 13:33

准备工作

从 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/[email protected]/build/three.module.js

我们需要用到three.js和它对应的工具包
https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/

5.创建html文件

javascript 复制代码

<!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/[email protected]/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
              }
            }
          </script>
    <!-- 导入包名 -->
    <script type="module">

        import * as THREE from 'three';

        console.log(THREE, 'THREE')

    </script>
</body>

</html>

6.在VSCode中安装serve服务器~ Live Server

安装完成后在文件名右键或者文件中右键

页面：

肯定是没内容的因为我们只是引入打印了一下 THREE 对象