1、Three.js开端预备环境

火影  金牌会员 | 2024-11-30 05:28:17 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 805|帖子 805|积分 2415

预备工作

从 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>
  3. <head>
  4.     <title>three.js css3d - sprites</title>
  5.     <meta charset="utf-8">
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body {
  12.             color: #000;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="container"></div>
  18.     <!-- 类似于创建 并设置别名 -->
  19.     <script type="importmap">
  20.             {
  21.               "imports": {
  22.                 "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
  23.                 "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
  24.               }
  25.             }
  26.           </script>
  27.     <!-- 导入包名 -->
  28.     <script type="module">
  29.         import * as THREE from 'three';
  30.         console.log(THREE, 'THREE')
  31.     </script>
  32. </body>
  33. </html>
复制代码
6.在VSCode中安装serve服务器~ Live Server

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


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

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

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

火影

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表