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 对象

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

相关推荐
quitv28 分钟前
react脚手架配置别名
前端·javascript·react.js
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
贺今宵4 小时前
通过$attrs传递的未指定名称的modelValue值在子组件中修改
前端·javascript
lifire_H8 小时前
Canvas在视频应用中的技术解析
前端·javascript·音视频
十八朵郁金香10 小时前
深入理解 JavaScript 中的 this 指向
开发语言·前端·javascript
贵州晓智信息科技10 小时前
使用 Three.js 转换 GLSL 粒子效果着色器
开发语言·javascript·着色器
linkcoco11 小时前
记录h5使用navigator.mediaDevices.getUserMedia录制音视频
前端·javascript·vue·音视频·js
Mh11 小时前
代码提交校验及提交规范的实践方案
前端·javascript·架构
昨日余光11 小时前
仅需三分钟,使用Vue3.x版本组件式风格实现一个消息提示组件!
前端·javascript·css·vue.js·typescript·html
软件开发技术深度爱好者11 小时前
验证码介绍及生成与验证(HTML + JavaScript实现)
javascript