three.js 学习环境搭建three.js认识three.js 官方文档 three.js 文件库下载 github

认识three.js

three.js 文件库下载

本地创建文件目录

我这里新建threeLearn 目录， git clone github.com/mrdoob/thre…

新建learn_01目录并创建index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>three.js 学习环境搭建</title>
</head>
<body>
    
</body>
</html>

引入three.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>three.js 学习环境搭建</title>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "../three.js/build/three.module.js"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three";
      console.log('three', THREE);
      console.log('scene', THREE.Scene);
    </script>
  </body>
</html>

启动服务

打开浏览器，当控制台输出，表示学习环境搭建成功，后续可以学习使用three.js