当前位置: 首页 > news >正文

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

<!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 对象
在这里插入图片描述
这就表示我们环境准备好了。

http://www.lryc.cn/news/496017.html

相关文章:

  • 什么是Batch Normalization?
  • 十四(AJAX)、AJAX、axios、常用请求方法(GET POST...)、HTTP协议、接口文档、form-serialize
  • vue2怎么写computed属性
  • 【从零开始的LeetCode-算法】35. 搜索插入位置
  • vscode + conda + qt联合开发
  • 技术总结(四十三)
  • mac终端自定义命令打开vscode
  • 代码设计:设计模式:应对变化
  • Proteus中添加新元件库
  • Hive学习基本概念
  • 运维工程师.云计算工程师面试题.考试题
  • 四、初识C语言(4)
  • 解决爬虫ConnectionResetError出现的问题
  • Qt桌面应用开发 第十天(综合项目二 翻金币)
  • vue跳转以及传参
  • Meta Reality Labs的VR/AR投资战略转向:内部视角与市场影响
  • animate.css和wow.js结合使用实现动画效果
  • 【大模型】ChatGPT 提示词优化进阶操作实战详解
  • 网络安全:攻击和防御练习(全战课), DDos压力测试
  • 【落羽的落羽 C语言篇】指针·之其五
  • go的web框架介绍
  • 基于群晖搭建个人图书架-TaleBook based on Docker
  • redis哨兵安装部署
  • JVS低代码里表单与表格不同数据关联场景的实现方法
  • NaviveUI框架的使用 ——安装与引入(图标安装与引入)
  • Cannot resolve symbol ‘ActivityThread‘ | Android 语法
  • OpenSSH-9.9p1 OpenSSL-3.4.0 升级步骤详细
  • python 练习题
  • 数学建模——Topsis法
  • Electron-vue 框架升级 Babel7 并支持electron-preload webapck 4 打包过程记录