IT评测·应用市场-qidao123.com技术社区

标题: 1、Three.js开端预备环境 [打印本页]
作者: 火影    时间: 2024-11-30 05:28
标题: 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文件
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <title>three.js css3d - sprites</title>
  6.     <meta charset="utf-8">
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  13.         body {
  14.             color: #000;
  15.         }
  16.     </style>
  17. </head>
  19. <body>
  20.     <div id="container"></div>
  21.     <!-- 类似于创建 并设置别名 -->
  22.     <script type="importmap">
  23.             {
  24.               "imports": {
  25.                 "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
  26.                 "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
  27.               }
  28.             }
  29.           </script>
  30.     <!-- 导入包名 -->
  31.     <script type="module">
  33.         import * as THREE from 'three';
  35.         console.log(THREE, 'THREE')
  37.     </script>
  38. </body>
  40. </html>
复制代码
6.在VSCode中安装serve服务器~ Live Server

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


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

这就表示我们环境预备好了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4