手把手教你入门Three.js（初识篇）

news2024/9/29 8:06:25

Three.js入门篇

    • 一、Three.js和webGL的介绍
    • 二、开发和学习环境
    • 三、 三个基本概念
      • 1. 场景Scene
      • 2. 相机Camera
      • 3. 渲染器Renderer
    • 四、三维坐标系
    • 五、材质Material
    • 六、光源
      • 1. 点光源
      • 2. 环境光
      • 3. 平行光:
    • 七、常见几何体
    • 八、渲染器-设置设备像素比
    • 九、渲染器-锯齿属性

一、Three.js和webGL的介绍

Three.js

是一款基于原生WebGL封装的Web 3D库，向外提供了许多的接口。
它可以运用在在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域。

WebGL

WebGL（Web 图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 元素中使用。原生WebGL和图形学是Three.js的底层知识。

二、开发和学习环境

  1. 开发环境：项目开发引入threejs，比如vue或react脚手架引入threejs。

    • 安装：threejs是一个js库，直接通过npm命令行安装。

      🔔npm安装特定版本three.js(注意使用哪个版本，查文档就查对应版本)

      // 比如安装148版本
npm install three@0.148.0 --save

    • 引入three.js

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

    • 引入其他拓展库

      除了three.js核心库以外，在threejs文件包中examples/jsm目录下，你还可以看到各种不同功能的扩展库。

      需要用到哪一个扩展库，再局部引入。

      // 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

      注： 新版本路径addons替换了examples/jsm

      // 引入旧版本拓展库
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

  2. 学习环境：入门threejs阶段，.html文件中直接引入threejs。再使用vscode的Live Sever插件去创建一个本地服务器。

    • script标签方式引入three.js

      three.js库可以去hreejs官方文件包下面的build目录下载。

    Three.js 的 github地址

    //在<head>中引入js文件
<script src="./build/three.js"></script>

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

    • type="importmap"配置路径

      官网写法：

      <script type="importmap">
    {
		"imports": {
			"three": "./build/three.module.js"//文件从官网下载
		}
	}
</script>

      <script type="module">
    import * as THREE from 'three';
    // 浏览器控制台测试，是否引入成功
    console.log(THREE.Scene);
</script>

    • **type=“importmap”**配置：扩展库引入

三、 三个基本概念

在这里插入图片描述

1. 场景Scene

  • 三维场景：用来模拟生活中的真实三维场景。新建好的几何体、光源、相机等，都需要添加到场景中才会显示。

  • 物体形状：几何体·Geometry

  • 物体外观：材质Material

  • 物体：网格模型Mesh（虚拟物体）

  • 模型位置：.position

  • 将模型添加到三维场景scene中：.add()方法

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

// 创建一个长宽高为10的长方体几何对象Geometry
const geometry = new THREE.BoxGeometry( 10, 10, 10 );

// 创建一个材质对象Material,并设置材质颜色
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );

//  创建网格模型Mesh，可以将它看成一个虚拟物体
const mesh = new THREE.Mesh( geometry, material );

// 设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0,10,0);
// 将模型添加到场景中
scene.add( mesh );

2. 相机Camera

相机的作用是拍摄你的画面。

Three,js中有两种相机：

  1. 正交投影相机（OrthographicCamera）

    这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。常用于渲染2D场景或者UI元素

  2. 透视投影相机（PerspectiveCamera）

    近大远小，模拟人眼所看到场景。它是3D场景的渲染中用得最普遍的投影模式。

    • 透视投影相机PerspectiveCamera：视锥体
      请添加图片描述

    • 相机距离物体的位置：.position

    • 相机镜头对准哪个物体（坐标）：.lookAt()

      // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = 800; //宽度
const height = 500; //高度
// 45:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 3000);

//相机在Three.js三维坐标系中的位置
camera.position.set(200, 200, 200); 

//相机观察目标指向Threejs 3D空间中某个位置
camera.lookAt(0, 0, 0); //1. 坐标原点
camera.lookAt(mesh.position);//2. 指向mesh对应的位置

      请添加图片描述

3. 渲染器Renderer

用相机拍摄好后画面后，还需要用渲染器显示到浏览器上。
快速查找渲染器的方法

  • WebGL渲染器：WebGLRenderer

  • 设置Canvas画布尺寸：.setSize()

  • 设置背景颜色： .setClearColor()

  • 渲染器渲染方法：.render()

  • 获取画布元素：.domElement

    // 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
const width = 800; //宽度
const height = 500; //高度
renderer.setSize(width, height); //设置画布（渲染区域）的尺寸(像素px)
renderer.render(scene, camera); //执行渲染操作

// 将画布插入到HTML元素中
document.getElementById('demo').appendChild(renderer.domElement);

    <div id="demo" ></div>

四、三维坐标系

设置辅助坐标系可以更好地在空间中观察物体。

const axesHelper = new THREE.AxesHelper(10)；//设置坐标轴线段尺寸
scene.add(axesHelper);

如果想看到坐标轴原点，可以将材质为半透明

const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff, //设置材质颜色
    transparent:true,//开启透明
    opacity:0.5,//设置透明度
});

注：three.js坐标轴颜色红x、绿y、蓝z，对于three.js的3D坐标系默认y轴朝上。
❓为什么y轴朝上
因为在在Three.js 中，空间是基于右手笛卡尔坐标系展示的。
请添加图片描述

五、材质Material

🔔MeshBasicMaterial材质不受光源影响，场景中不添加光源也可以看见。

如果使用其他材质时，页面不显示模型就要检查是不是光源忘记添加了~

基础网格材质：MeshBasicMaterial（不受光）

漫反射网格材质：MeshLambertMaterial

高光镜面网格材质：MeshPhongMaterial

标准网格材质：MeshStandardMaterial （最真实）

基于物理的渲染（PBR）最近已成为许多3D应用程序的标准，例如Unity， Unreal和 3D Studio Max。

物理网格材质: MeshPhysicalMaterial

请添加图片描述

六、光源

1. 点光源

从一个点向各个方向发射的光源，类似一个灯泡发出的光。

设置点光源：PointLight

        // 【设置光源】(参数1: 颜色, 参数2: 光源强度, 参数3: 光源距离, 参数4: 光源范围)
        const pointLight = new THREE.PointLight(0xffffff, 1, 0, 0);

点光源辅助观察器：PointLightHelper

        const pointLightHelper = new THREE.PointLightHelper(pointLight, 5);
        scene.add(pointLightHelper);

2. 环境光

环境光会均匀的照亮场景中的所有物体，因为它没有方向，所以不能用来投射阴影。

设置环境光：AmbientLight

        const ambient = new THREE.AmbientLight(0xffffff, 0.4);
        scene.add(ambient);

3. 平行光:

平行光是沿着特定方向发射的光，常常用平行光来模拟太阳光的效果。

设置平行光：DirectionalLight

       const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
        directionalLight.position.set(80, 100, 50);
	    directionalLight.intensity = 0.5;// 设置光源强度

平行光源辅助观察器：DirectionalLightHelper

        const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 1, 0xff0000);//参数1：光源，参数2：长度，参数3：颜色
        scene.add(dirLightHelper);

七、常见几何体

请添加图片描述

八、渲染器-设置设备像素比

如果遇到canvas画布输出模糊问题，需要按着你屏幕设备的像素比去设置。

🔔为了适应不同的硬件设备屏幕，通常需要执行setPixelRatio该方法。

    console.log(`查看当前屏幕设备像素比`,window.devicePixelRatio)
	renderer.setPixelRatio(window.devicePixelRatio);

九、渲染器-锯齿属性

💬为什么要在渲染时设置锯齿属性?

在 Three.js 中，渲染器负责将场景和相机转换为实际图像。为了获得更好的图像质量和减少图像锯齿。

💬什么是图像锯齿呢？

图片锯齿，全称叫图像折叠失真，是指在图片的画面轮廓边缘出现不平滑的棱角。

出现这种情况，说明画面的分辨率不够或太大而画面拥挤，或者是3D游戏时显卡没启用抗锯齿功能 (抗锯齿标准翻译为抗图像折叠失真)

抗锯齿（Antialiasing）就是指对图像边缘进行柔化处理，使图像边缘看起来更平滑真实，

Three.js 中提供了多种抗锯齿选项，例如：antialias: true（自动抗锯齿）和 antialias: 0.5（抗锯齿强度为 0.5）。

// 设置自动抗锯齿
// 方式一
const renderer = new THREE.WebGLRenderer({
  antialias:true,
});
// 方式二
renderer.antialias = true

注：以上引用图来自Three.js中文网，借鉴学习，加入自己理解整理而得的学习笔记。

✨ 一些有用的网址：
three.js官方中文文档
Three.js中文网
github链接查看所有版本threejs

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

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

相关文章

题解_notion(持续更新ing)

题解_notion(持续更新ing)

题解coding
阅读更多...
8年经验之谈 —— Redis的性能测试与优化！

8年经验之谈 —— Redis的性能测试与优化！

Redis作为一种高性能的Key-Value数据库&#xff0c;一直受到众多开发者和企业的青睐。然而&#xff0c;在高并发、大数据存储的应用场景中&#xff0c;如何测试并优化Redis的性能&#xff0c;成为了问题。本文将从测试与优化两个方面来讲解如何达到最优的Redis性能。 一、性能…
阅读更多...
ae如何去除视频水印？分享三个简单的方法！

ae如何去除视频水印？分享三个简单的方法！

ae如何去除视频水印&#xff1f; 去除视频水印可以提高视频的质量、改善视频的流畅度&#xff0c;并减少视频文件的大小&#xff0c;方便观看&#xff0c;那么如何去除视频水印呢&#xff1f;下面是三种方法推荐&#xff0c;一起来看看吧&#xff5e; 方法一&#xff1a;使用A…
阅读更多...
NUUO摄像头远程命令执行漏洞复现 [附POC]

NUUO摄像头远程命令执行漏洞复现 [附POC]

文章目录 NUUO 摄像头远程命令执行漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 NUUO 摄像头远程命令执行漏洞复现 [附POC] 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff…
阅读更多...
如何用个人数据Milvus Cloud知识库构建 RAG 聊天机器人？（上）

如何用个人数据Milvus Cloud知识库构建 RAG 聊天机器人？（上）

生成式人工智能时代，开发者可以借助大语言模型（LLM）开发更智能的应用程序。然而，由于有限的知识，LLM 非常容易出现幻觉。检索增强生成（RAG）https://zilliz.com/use-cases/llm-retrieval-augmented-generation 通过为 LLM 补充外部知识，有效地解决了这一问题。 在 Chat …
阅读更多...
Spring MVC 中文文档

Spring MVC 中文文档

1. Spring Web MVC Spring Web MVC是建立在Servlet API上的原始Web框架&#xff0c;从一开始就包含在Spring框架中。正式名称 “Spring Web MVC” 来自其源模块的名称&#xff08; spring-webmvc&#xff09;&#xff0c;但它更常被称为 “Spring MVC”。 与Spring Web MVC并…
阅读更多...
target采退、测评养号购物下单操作教程

target采退、测评养号购物下单操作教程

1.点击右上角的Create account注册账号 2.填写账号信息 3. 进入自己需要购买的商品页面 点击pick it up购买 4. 进入购物车页面选择快递方式和地址后点击 check out按钮 5. 之后会提示绑定XYK&#xff0c;这里我是用虚拟XYK开卡平台进行支付的. 6. 确认订单无误后点击Place you…
阅读更多...
ELK学习（一）

ELK学习（一）

Elasticsearch 安装 项目架构图 添加软件包 # 添加 ELK 软件包到自定义 Yum 仓库 [rootecs-proxy s4]# rsync -av elk/ /var/localrepo/elk/ [rootecs-proxy s4]# createrepo --update /var/localrepo 购买云主机 主机IP地址配置es-0001192.168.1.21最低配置2核4Ges-000219…
阅读更多...
PDFgear——一款接入AI智能化模型的免费PDF聊天软件

PDFgear——一款接入AI智能化模型的免费PDF聊天软件

一、前言 自从Open AI发布的ChatGPT火爆之后&#xff0c;国内外陆陆续续衍生了很多基于GPT大语言模型的API接口开发的小应用&#xff0c;当GPT对于普通的Chat聊天有Token限制&#xff0c;无法输入大文本或者大文件无法与外部数据进行对话&#xff0c;一时间基于OpenAI Embeddi…
阅读更多...
Hadoop学习总结（搭建Hadoop集群(伪分布式模式)）

Hadoop学习总结（搭建Hadoop集群(伪分布式模式)）

如果前面有搭建过Hadoop集群完全分布式模式&#xff0c;现在搭建Hadoop伪分布式模式可以选择直接克隆完全分布式模式中的主节点(hadoop001)。以下是在搭建过完全分布式模式下的Hadoop集群的情况进行 伪分布式模式下的Hadoop功能与完全分布式模式下的Hadoop功能相同。 一、克隆…
阅读更多...
JS防抖与节流(含实例各二种写法 介绍原理)

JS防抖与节流(含实例各二种写法 介绍原理)

防抖 防抖是什么&#xff1f; 单位时间内&#xff0c;频繁触发事件&#xff0c;只执行最后一次 通俗易懂点就是把防抖想象成MOBA游戏的回城&#xff0c;在回城过程中被打断就要重来 例子&#xff1a;我们来做一个效果&#xff0c;我们鼠标在盒子上移动&#xff0c;数字就变化 …
阅读更多...
美摄AI商品图解决方案

美摄AI商品图解决方案

电子商务时代&#xff0c;商品图片的质量直接影响着消费者的购买决策。一张高质量的商品图片不仅能够吸引消费者的注意力&#xff0c;还能够提升品牌形象&#xff0c;从而提高销售额。然而&#xff0c;拍摄高质量的商品图片并不是一件容易的事情&#xff0c;它需要专业的摄影技…
阅读更多...
C语言KR圣经笔记 2.7类型转换

C语言KR圣经笔记 2.7类型转换

2.7 类型转换 当一个操作符有几个不同类型的操作数时&#xff0c;会根据少量规则将几个操作数转换为一个公共的类型。 通常来说&#xff0c;仅有的自动转换&#xff0c;是在不丢失信息的情况下将“窄”的操作数转换为“宽”的类型&#xff0c;例如在 表达式 f i 中将整数转换…
阅读更多...
如何用.bat文件直接安装jar包

如何用.bat文件直接安装jar包

大家应该都知道一个maven引入jar包&#xff0c;如果直接把jar包放到目录&#xff0c;这样是没用的&#xff0c;引入还是会失败 这里我们可以创建一个.bat的windows系统文件&#xff0c;写入pom.xml对应的groupid&#xff0c;artifactId&#xff0c;version pom.xml中进入jar包…
阅读更多...
深入理解数据结构（2）——用数组实现队列

深入理解数据结构（2）——用数组实现队列

数组是一种数据结构&#xff0c;队列也是一种数据结构。它们都是由基础的语法实现的。 如果一个数据结构可以用另外的数据结构来实现&#xff0c;那么可以有力的证明——“数据结构是一种思想”&#xff0c;是一种讲语法组合起来实现某种功能的手段 “整体大于局部” 一、队列的…
阅读更多...
大模型相关概念

大模型相关概念

GGML 以纯C语言编写的框架&#xff0c;让用户可以在MacBook电脑上轻松运行大型语言模型&#xff0c;这种模型通常在本地运行成本较高。目前&#xff0c;这一框架主要被业余爱好者使用&#xff0c;但在企业模型部署方面也有广泛的应用前景。 量化快速入门 我们首先简单介绍一下…
阅读更多...
原生JavaScript实现的SPA单页应用（hash路由）

原生JavaScript实现的SPA单页应用（hash路由）

什么叫做SPA单页应用 单页Web应用 &#xff08;single page web application&#xff0c;SPA&#xff09; &#xff0c;就是只有一张Web页面的应用&#xff0c;是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 单页应用的说法是在JavaScript和AJA…
阅读更多...
超写实数字人小灿加入，助力火山语音全类型虚拟数字人应用创新

超写实数字人小灿加入，助力火山语音全类型虚拟数字人应用创新

当发现更多AI科技作用于日常生活时&#xff0c;你是否想过竟然有一天会与AI数字人做同事&#xff1f;日前&#xff0c;火山语音团队重磅推出了一位神秘新成员——首个超写实数字员工小灿&#xff01;这位新同事不仅形象清新美丽&#xff0c;还有着很强的亲和力&#xff0c;大幅…
阅读更多...
ardupilot开发 --- CAN BUS、DroneCAN 、UAVCAN 篇

ardupilot开发 --- CAN BUS、DroneCAN 、UAVCAN 篇

1. CAN BUS、DroneCAN 、UAVCAN 区别 UAVCAN是一种轻量级协议&#xff0c;旨在通过CAN BUS 在航空航天和机器人应用中实现可靠通信。 UAVCAN网络是分散的对等网络&#xff0c;其中每个对等体&#xff08;节点&#xff09;具有唯一的数字标识符 - 节点ID&#xff0c;并且仅需要…
阅读更多...
minio + linux + docker + spring boot实现文件上传与下载

minio + linux + docker + spring boot实现文件上传与下载

minio docker spring boot实现文件上传与下载 1.在linux上安装并启动docker2.在docker中拉取minio并启动3.Spring Boot 整合 minio4.测试 minio 文件上传、下载及图片预览等功能 1.在linux上安装并启动docker 检查linux内核&#xff0c;必须是3.10以上 uname ‐r安装docker…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023