1-初识Three.js

介绍

three.js

一个WebGL引擎,基于JavaScript,可直接运行GPU驱动游戏与图形驱动应用于浏览器

其库提供的特性与API以绘制3D场景于浏览器

项目结构

每个 three.js 项目至少需要一个 HTML 文件来定义网页以及一个 JavaScript 文件来运行 three.js 代码。

index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type="module" src="/main.js"></script>
	</body>
</html> 

main.js

javascript 复制代码
import * as THREE from 'three';

...

public/

public/ 文件夹有时也被称为 "静态(static)"文件夹,因为其中包含的文件会原封不动地推送到网站上。纹理(textures)、音频和 3D 模型通常会放在这里。

项目安装

方案一 NPM+构建工具(推荐使用)

1、安装Node.js

作用:管理依赖项、运行构建工具

2、项目文件夹->终端->安装three.js->安装构建工具Vite

注:Vite 将在开发过程中使用,但不会被打包成为最终网页的一部分

除了 Vite 也可以使用其他支持导入 ES Modules 的现代构建工具

three.js

npm install --save three

vite

npm install --save-dev vite

3、终端运行

npx vite
npx是什么?

npx 与 Node.js 一同安装,可运行 Vite 等命令行程序,这样就不必在 node_modules/ 中搜索正确的文件。

另外,可以将 Vite 的常用命令 放入 package.json:scripts 列表,然后使用 npm run dev 代替。

4、结果描述

如果一切顺利,将在终端中看到一个类似 http://localhost:5173 的 URL,打开该 URL 就能看到网络应用程序。

方案二 从CDN导入

javascript 复制代码
<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@<version>/examples/jsm/"
    }
  }
</script>

注:在 main.js 中从 "three"(一个 npm 软件包)导入代码,但网络浏览器并不知道这意味着什么。 在 index.html 中,需要添加一个 导入映射(import map)来定义从哪里获取软件包。将下面的代码放在 <head></head> 标签内、样式(styles)之后。

不要忘记将上述链接中的 <version> 替换为 three.js 的实际版本,如 "v0.149.0"

最新版本可在 npm 版本列表中找到 !

1、运行本地服务器

作用:将这些文件托管到网络浏览器可以访问的 URL 上

2、安装 Node.js,运行 serve ,启动本地服务器

npx serve

3、结果描述

如果一切顺利,将在终端中看到一个类似 http://localhost:5173 的 URL,打开该 URL 就能看到网络应用程序。

three.js 三要素

1、场景(scene)------容器

2、相机(camera)------观察

3、渲染器(renderer)------组合

相关推荐
weixin_5168756510 分钟前
使用 axios 拦截器实现请求和响应的统一处理(附常见面试题)
前端·javascript·vue.js
_oP_i13 分钟前
Unity 中使用 WebGL 构建并运行时使用的图片必须使用web服务器上的
前端·unity·webgl
H_HX12616 分钟前
https服务器访问http资源报Mixed Content混合内容错误
前端·vue.js·安全策略·https访问http
羊小猪~~24 分钟前
前端入门一之CSS知识详解
前端·javascript·css·vscode·前端框架·html·javas
ReBeX30 分钟前
【GeoJSON在线编辑平台】(1)创建地图+要素绘制+折点编辑+拖拽移动
前端·javascript·gis·openlayers·webgis
阿宝分享技术35 分钟前
从xss到任意文件读取
前端·xss
今天也想MK代码39 分钟前
在Swift开发中简化应用程序发布与权限管理的解决方案——SparkleEasy
前端·javascript·chrome·macos·electron·swiftui
宝子向前冲1 小时前
纯前端生成PDF(jsPDF)并下载保存或上传到OSS
前端·pdf·html2canvas·oss·jspdf
V+zmm101341 小时前
社区养老服务小程序ssm+论文源码调试讲解
java·服务器·前端·javascript·小程序·毕业设计·1024程序员节
卡布叻_星星1 小时前
同一个页面击穿element样式后,会影响同样组件的使用
前端·vue.js·elementui