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文件

javascript 复制代码
<!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 对象

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

相关推荐
正义的大古19 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
雲墨款哥20 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程20 小时前
深入JS(一):手写 Promise
前端·javascript
EndingCoder21 小时前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
牛十二21 小时前
mac-intel操作系统go-stock项目(股票分析工具)安装与配置指南
开发语言·前端·javascript
yanlele1 天前
前端面试第 78 期 - 2025.09.07 更新 Nginx 专题面试总结(12 道题)
前端·javascript·面试
影子信息1 天前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js
徐小夕1 天前
用Vue3写了一款协同文档编辑器,效果简直牛!
前端·javascript·vue.js
wangbing11251 天前
界面规范8-文字
前端·javascript·html
qczg_wxg1 天前
高阶组件介绍
开发语言·javascript·react native·ecmascript