1、Three.js开端准备环境
准备工作
从 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 对象
这就表示我们环境准备好了。