预备工作
从 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 对象
这就表示我们环境预备好了。
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |