准备工作
从 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 对象
这就表示我们环境准备好了。