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)------组合

相关推荐
NightCyberpunk44 分钟前
HTML、CSS
前端·css·html
xcLeigh1 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
zhenryx1 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
ZwaterZ1 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
zhangjr05753 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱3 小时前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
木子七3 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼3 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态3 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚3 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise