【Three.js】Three.js快速上手教程

news2024/10/6 21:34:51

1. Three.js简介

官网对 Three.js 的介绍非常简单：“Javascript 3D library”。
即：three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能，是一个常见的web 3D库。

相关概念解释：three.js > webGL > openGL

  • openGL 是一个跨平台3D/2D的绘图标准，webGL 则是openGL 在浏览器上的一个实现。
  • web前端开发人员可以直接用WebGL 接口进行编程，但 webGL 只是非常基础的绘图API，需要编程人员有很多的数学知识、绘图知识才能完成3D编程任务，而且代码量巨大。
  • three.js 对 WebGL 进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行web 3D开发，降低了门槛，同时大大提升了效率。

总结来一句话： 就是你不懂计算机图形学，只要理解了three.js的一些基本概念你也可以快速上手web 3D。

1.1 官网首页

https://threejs.org/
由于是国外网站，可能加载有点慢，（可以尝试科学加速…）
three.js官网首页

1.2 官网资源的本地化配置

由于3D资源较大，还有访问有时候会较慢，并且为了方便查看源码，我们可以从github上直接glone到本地启动。
three.js官方资源地址：https://github.com/mrdoob/three.js/

git clone https://github.com/mrdoob/three.js.git

github上的three.js资源
克隆到本地之后，使用vscode导入项目，你可以看到如下目录，不同版本会略有差异。

three.js
└───build——src目录下各个代码模块打包后的结果
    │───three.js——开发的时候.html文件中要引入的threejs引擎库，和引入jquery一样，可以辅助浏览器调试
    │───three.min.js——three.js压缩后的结构文件体积更小，可以部署项目的时候在.html中引入。
    │───three.module.js—— 可以import方式引入
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───editor——Three.js的可视化编辑器，可以编辑3D场景
    │───index.html——打开应用程序
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───examples——里面有大量的threejs案例，平时可以通过代码编辑全局查找某个API、方法或属性来定位到一个案例
    │
└───src——Three.js引擎的各个模块，可以通过阅读源码深度理解threejs引擎
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───utils——一些辅助工具
    │───\utils\exporters\blender——blender导出threejs文件的插件

在这里插入图片描述
安装依赖包

cnpm install

启动项目

npm run dev

启动后可以看到如下页面，点击docs就可以看到文档
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. 快速开始示例

我将通过一个demo快速讲解three.js的主要概念

2.1 引入three.js

使用three.js的第一步首先就是先把three.js引入到你的项目文件中。

2.1.1 script标签方式引入three.js

你可以像平时开发web前端项目一样，把three.js当做一个js库引入你的项目。

<script src="../../three.js/build/three.js"></script>

//随便输入一个API，测试下是否已经正常引入three.js
console.log(THREE.Scene);

2.1.2 ES6 import方式引入

给script标签设置type="module",也可以在.html文件中使用import方式引入three.js。

如果你没有前端ES6基础，可以自行补充学习。

<script type="module">
// 现在浏览器支持ES6语法，自然包括import方式引入js文件
import * as THREE from '../../three.js/build/three.module.js';
</script>

2.1.3 three.js工程化开发

平时学习，为了方便可以直接在.html文件中引入three.js相关文件，不过在正式开发的时候，你可以在你的nodejs工程文件中，通过npm命令行安装three.js。

npm安装

npm install three --save

# 特定版本three.js
# 139版本
npm install three@0.139.0 --save

// 引入three.js
import * as THREE from 'three';

// 和在.html文件中一样使用threejs类
var geo = new THREE.PlaneGeometry(105,209);

// 扩展库引入和使用
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);

2.2 创建三维场景

2.2.1 三维场景Scene

你可以Scene它理解为虚拟的3D场景，用来表示模拟生活中的真实三维场景,或者说三维世界。

// 创建3D场景对象Scene
var scene = new THREE.Scene();

2.2.2 给场景添加物体

你可以把网格模型Mesh理解为一个虚拟的物体，用来表示生活中真实的物体，比如一个箱子、一个鼠标。

//创建一个长方体几何对象Geometry
var geometry = new THREE.BoxGeometry(100, 100, 100); 
//材质对象Material（受光照影响的材质）
var material = new THREE.MeshLambertMaterial({
    color: 0x00ffff,//设置材质颜色
}); 
//创建网格模型对象Mesh
var mesh = new THREE.Mesh(geometry, material); 
//网格模型mesh添加到场景scene中
scene.add(mesh);

2.3 相机和渲染器

经过上面的代码还无法在网页中看到生成的长方体，还需要借助相机camera和渲染器renderer把虚拟的三维场景Scene渲染出来。

three.js想把三维场景Scene呈现在web页面上，其实就像你生活中拍照一样，首先要有一个相机，然后还有你，你拿着相机，按一下，咔，完成拍照，获得照片。
在这里插入图片描述

2.3.1 透视投影相机PerspectiveCamera

// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
var width = 800; //宽度
var height = 500; //高度
/**
 * 透视投影相机设置
 */
// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
var camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(292, 223, 185); //相机在Three.js三维坐标系中的位置
camera.lookAt(0, 0, 0); //相机观察目标指向Three.js坐标系原点

2.3.2 WebGL渲染器WebGLRenderer

/**
 * 创建渲染器对象
 */
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
renderer.render(scene, camera); //执行渲染操作
//three.js执行渲染命令会输出一个canvas画布，也就是一个HTML元素，你可以插入到web页面中
document.body.appendChild(renderer.domElement);

2.4 添加光源

/**
 * 光源设置
 */
//点光源
var pointLight = new THREE.PointLight(0xffffff,1.0);
pointLight.position.set(400, 200, 300); //点光源位置
scene.add(pointLight); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0xffffff,0.4);
scene.add(ambient); //环境光源添加到场景中

2.5 最终效果

在这里插入图片描述

3. 完整代码

<script type="module">
    import * as THREE from '../../../three.js/build/three.module.js'
    /**
     * 创建3D场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    //创建一个长方体几何对象Geometry
    var geometry = new THREE.BoxGeometry(100, 100, 100);
    //材质对象Material
    var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff, //设置材质颜色
    });
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中

    /**
     * 光源设置
     */
    //点光源
    var pointLight = new THREE.PointLight(0xffffff,1.0);
    pointLight.position.set(400, 200, 300); //点光源位置
    scene.add(pointLight); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0xffffff,0.4);
    scene.add(ambient);

    // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
    var width = 800; //宽度
    var height = 500; //高度
    /**
     * 透视投影相机设置
     */
    // 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
    var camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
    camera.position.set(292, 223, 185); //相机在Three.js三维坐标系中的位置
    camera.lookAt(0, 0, 0); //相机观察目标指向Three.js坐标系原点
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
    renderer.render(scene, camera); //执行渲染操作
    //three.js执行渲染命令会输出一个canvas画布，也就是一个HTML元素，你可以插入到web页面中
    document.body.appendChild(renderer.domElement);
</script>

4. 总结

在这里插入图片描述

  1. 创建3D场景对象Scene
  2. 创建网格模型对象
  3. 光源设置
  4. 透视投影相机对象设置
  5. 创建渲染器对象
    在这里插入图片描述

📢欢迎点赞👍/ 收藏⭐/ 留言📝如有错误敬请指正！
未完待续…

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/102096.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

QT QTabWidget 控件 使用详解

QT QTabWidget 控件 使用详解

本文详细的介绍了QTabWidget控件的各种操作&#xff0c;例如&#xff1a;新建界面、设置页面名字、设置提示信息、设置页面激活、设置标题栏位置、设置页面关闭按钮、设置页面关闭按钮、获取页面下标、获取页面总数、清空所有页面、删除某个页面、设置拖拽移动、设置显示页面、…
阅读更多...
全国职业技能大赛网络安全-金砖技能大赛——应急响应内存镜像分析（超详细解析）

全国职业技能大赛网络安全-金砖技能大赛——应急响应内存镜像分析（超详细解析）

全国职业技能大赛网络安全-金砖技能大赛——应急响应内存镜像分析&#xff08;超详细解析&#xff09; 背景&#xff1a;作为信息安全技术人员必须能够掌握内容镜像分析、重要数据恢复、 恶意文件分析等相关技能&#xff0c;利用这些技能我们能够第一时间分析相关恶意文件、 分…
阅读更多...
美少女怒肝20天用C语言写出的排序集合

美少女怒肝20天用C语言写出的排序集合

文章目录 排序的概念一、常见的排序算法二、代码实现总结排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在…
阅读更多...
作为前端，你是否了解链表这种数据结构？

作为前端，你是否了解链表这种数据结构？

在面试中只要被问到React Hooks就常被问到为什么Hooks不能在循环和条件判断嵌套函数当中使用&#xff1b;相信很多人都知道标准答案&#xff0c;【因为声明的Hooks保存在链表当中】&#xff0c;但是你真的知道链表吗&#xff1f; 什么是链表 我们先看来看一个简单的单向链表结…
阅读更多...
华为珍藏版：SpringBoot全优笔记，面面俱到太全了

华为珍藏版：SpringBoot全优笔记，面面俱到太全了

前言 作为开发人员&#xff0c;对于Spring全家桶肯定是不陌生的&#xff0c;而来自于Spring大家族的Spring Boot&#xff0c;作为Spring团队提供的流行框架&#xff0c;它的存在解决的Spring框架使用较为繁琐的问题&#xff0c;所以掌握SpringBoot是精通Spring必不可少的一个过…
阅读更多...
[附源码]Python计算机毕业设计Django血库管理系统

[附源码]Python计算机毕业设计Django血库管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
[附源码]计算机毕业设计Node.js-Bigbaby美食网站（程序+LW）

[附源码]计算机毕业设计Node.js-Bigbaby美食网站（程序+LW）

项目运行 环境配置&#xff1a; Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境&#xff1a;最好是Nodejs最新版&#xff0c;我…
阅读更多...
《Go语言并发之道》读书笔记

《Go语言并发之道》读书笔记

《Go语言并发之道》第一章&#xff1a; 并发概述第二章&#xff1a;对你的代码建模&#xff1a;通信顺序进程第三章&#xff1a;GO语言并发组件由于不怎么熟悉GO&#xff0c;只做简单的摘录&#xff0c;敲敲示例代码 鸭子类型&#xff1a;当看到一只鸟走起来像鸭子、游泳起来像…
阅读更多...
微服务框架 SpringCloud微服务架构 多级缓存 49 缓存同步 49.3 监听Canal

微服务框架 SpringCloud微服务架构 多级缓存 49 缓存同步 49.3 监听Canal

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 多级缓存 文章目录微服务框架多级缓存49 缓存同步49.3 监听Canal49.3.1 Canal 客户端49 缓存同步 49.3 监听Canal 49.3.1 Canal 客户端 C…
阅读更多...
深耕无线通讯细分领域 可信华成产品受市场青睐

深耕无线通讯细分领域 可信华成产品受市场青睐

深圳市可信华成通信科技有限公司&#xff08;以下简称可信华成&#xff09;&#xff0c;成立于2010年&#xff0c;是一家在无线通信领域中崛起的集研发、智能制造、销售为一体的国家高新技术企业&#xff0c;深圳市专精特新企业&#xff1b; 注册资金2200万元&#xff0c;员工8…
阅读更多...
【图像压缩】余弦变换及霍夫曼编码jpeg压缩和解压【含Matlab源码 2086期】

【图像压缩】余弦变换及霍夫曼编码jpeg压缩和解压【含Matlab源码 2086期】

⛄一、DCT图像无损压缩简介 1 图像压缩 图像压缩按照压缩过程中是否有信息的损失以及解压后与原始图像是否有误差可以分为无损压缩和有损压缩两大类。无损压缩是指不损失图像质量的压缩&#xff0c;它是对文件的存储方式进行优化&#xff0c;采用某种算法表示重复的数据信息&a…
阅读更多...
网络安全——【收藏】网络设备安全加固规范

网络安全——【收藏】网络设备安全加固规范

一、Cisco网络设备安全基线规范 本建议用于Cisco路由器和基于Cisco IOS的交换机及其三层处理模块&#xff0c;其软件版本为CISCO IOS 12.0及以上版本。加固前应该先备份系统配置文件。 01 账号管理、认证授权 1.1.本机认证和授权 初始模式下&#xff0c;设备内一般建有没有…
阅读更多...
Linux——用户、组的管理以及文件的权限设置

Linux——用户、组的管理以及文件的权限设置

一、用户和组 Linux系统中的用户唯一的标识码为用户ID&#xff0c;即UID&#xff0c;每个用户至少属于一个组&#xff0c;即为用户分组。用户分组存在唯一的标识码&#xff0c;为GID。不同的用户拥有不同的权限。 1&#xff0e;认识用户账号文件/etc/passwd和用户影子文件/et…
阅读更多...
Java项目：SSM汽车租车管理系统

Java项目：SSM汽车租车管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 本项目包含管理员、普通用户两种角色&#xff1b; 管理员主要功能包括&#xff1a; 后台首页、停车位信息管理、车辆求租信息审核、车辆出租信息…
阅读更多...
热门技术中的应用：容器技术中的网络-第31讲-容器网络之Calico：为高效说出善意的谎言

热门技术中的应用：容器技术中的网络-第31讲-容器网络之Calico：为高效说出善意的谎言

上一节我们讲了Flannel如何解决容器跨主机互通的问题，这个解决方式其实和虚拟机的网络互通模式是差不多的，都是通过隧道。但是Flannel有一个非常好的模式，就是给不同的物理机设置不同网段，这一点和虚拟机的Overlay的模式完全不一样。 在虚拟机的场景下，整个网段在所有的物…
阅读更多...
操作系统（3）银行家算法模拟实现

操作系统（3）银行家算法模拟实现

参考博客&#xff1a;银行家算法详解&#xff08;C语言&#xff09;_Sparky*的博客-CSDN博客_银行家问题c语言 1. 效果展示 2. 程序流程图 3. 数据结构设计 /**定义数据结构*/ vector<vector<int>> Max;// 最大需求矩阵 vector<vector<int>> Allocat…
阅读更多...
小白如何入门Python爬虫？这是我见过最详细的入门教学

小白如何入门Python爬虫？这是我见过最详细的入门教学

本文针对初学者&#xff0c;我会用最简单的案例告诉你如何入门python爬虫&#xff01; 想要入门Python 爬虫首先需要解决四个问题 熟悉python编程 了解HTML 了解网络爬虫的基本原理 学习使用python爬虫库 01了解什么是爬虫&#xff0c;它的基本流程是什么&#xff1f; 网络…
阅读更多...
IDEA 2022 之 Lombok 使用 教程

IDEA 2022 之 Lombok 使用 教程

文章目录**1.Lombok是什么****1.1 Lombok 是什么&#xff1f;****Lombok 引入**2、POM 中引入依赖3、IDE 中安装插件**4. Lombok 使用****4.1 Lombok 使用注意**5.代码案例&#xff1a;**Lombok 原理**6. 常用注解结语1.Lombok是什么 ​ Lombok是使用java编写的一款开源类库。…
阅读更多...
【Redis】Redis缓存穿透、缓存雪崩、缓存击穿详解与解决办法（Redis专栏启动）

【Redis】Redis缓存穿透、缓存雪崩、缓存击穿详解与解决办法（Redis专栏启动）

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;专注于研究 Java/ Liunx内核/ C及汇编/计算机底层原理/源码&#xff0c;就职于大型金融公司后端高级工程师&#xff0c;擅长交易领域的高安全/可用/并发/性能的架构设计与演进、系统优化与稳定性建设。 &#x1…
阅读更多...
Java项目：springboot大学生实习管理系统

Java项目：springboot大学生实习管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 本系统的用户可以分为三种&#xff1a;管理员、教师、学生。三种角色登录后会有不同菜单界面&#xff1b; 管理员主要功能&#xff1a; 信息管…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023