如何学习three.js

news2024/12/24 9:12:19

如何学习three.js

  • 前言
  • 1. 基础概念
    • 场景(Scene): three.js中所有物体的容器。你可以把它想象成一个舞台,在这里添加物体、光源等。
    • 相机(Camera): 决定了哪部分场景会被渲染。最常用的是透视相机(PerspectiveCamera)。
    • 渲染器(Renderer): 用于在一个<canvas>元素上渲染图像。
    • 几何体(Geometry): 物体的形状。比如,BoxGeometry 是一个立方体。
    • 材质(Material): 物体的外观(颜色、纹理)。
    • 网格(Mesh): 几何体和材质的组合,可以添加到场景中。
    • 光源(Lights): 照亮场景中的物体。常见的有环境光(AmbientLight)和点光源(PointLight)。
    • 动画循环(Animation Loop): 用于在==每帧==更新场景和渲染。
  • 2. 着色器(Shaders)
  • 3. 其他概念
    • n. 疑惑
      • 1. 感觉搞不懂"纹理贴图"与"着色器"的关系,他们俩可以分开用吗?还是必须混着用?
        • 纹理贴图
        • 着色器
        • 关系和组合使用
        • 要想贴图贴的好,uv坐标少不了
        • 为什么要使用着色器?直接使用three.js内置的光照、阴影、反射、折射等内置的成员属性不香吗?

前言

学习three.js最好的方法是通过理解它的核心概念和最常用的组件。

1. 基础概念

场景(Scene): three.js中所有物体的容器。你可以把它想象成一个舞台,在这里添加物体、光源等。

var scene = new THREE.Scene();

相机(Camera): 决定了哪部分场景会被渲染。最常用的是透视相机(PerspectiveCamera)。

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

除了透视相机,还有正交相机(OrthographicCamera).

不说八股文,就说在实战中的体验:
透视相机,在左右移动时,会变形(会有一种拉扯的感觉);
正交相机不会有拉扯的感觉

渲染器(Renderer): 用于在一个元素上渲染图像。

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);//renderer.domElement 是three.js的渲染器的HTML元素,document.body是文档的主体

上面这三句是你在用到渲染器时,必定要写的,这是将three.js场景渲染到屏幕的一种方式.

几何体(Geometry): 物体的形状。比如,BoxGeometry 是一个立方体。

var geometry = new THREE.BoxGeometry(1, 1, 1);

材质(Material): 物体的外观(颜色、纹理)。

var material = new THREE.MeshBasicMaterial(
	{
		color: 0x00ff00
	}
);

网格(Mesh): 几何体和材质的组合,可以添加到场景中。

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

光源(Lights): 照亮场景中的物体。常见的有环境光(AmbientLight)和点光源(PointLight)。

var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(50, 50, 50);
scene.add(light);

动画循环(Animation Loop): 用于在每帧更新场景和渲染。

function animate() {
  requestAnimationFrame(animate);
  // 任何动画的更新
  renderer.render(scene, camera);
}
animate();

2. 着色器(Shaders)

着色器是three.js中较高级的概念,用于自定义物体的渲染方式。着色器写在GLSL(OpenGL Shading Language)中,分为两种:

  • 顶点着色器(Vertex Shader): 处理每个顶点的逻辑,如位置、颜色等。
  • 片元着色器(Fragment Shader): 处理最终像素的颜色和外观。
    使用着色器时,你通常会创建一个ShaderMaterial或RawShaderMaterial,并提供顶点和片元着色器的代码:
var shaderMaterial = new THREE.ShaderMaterial({
  vertexShader: `...`, // GLSL代码
  fragmentShader: `...`, // GLSL代码
});

3. 其他概念

  • 纹理(Textures): 用于给物体添加详细的外观,如皮肤、图片等。
  • 加载器(Loaders): 用于加载不同格式的模型和纹理。
  • 控制器(Controls): 允许用户通过鼠标、键盘等交互来控制相机的视角。

n. 疑惑

1. 感觉搞不懂"纹理贴图"与"着色器"的关系,他们俩可以分开用吗?还是必须混着用?

答:

纹理贴图
  • 定义: 纹理贴图是一种图像,可以被映射(贴)到三维物体的表面,用于给物体增加颜色、细节、纹理等。
  • 用途: 纹理贴图常用于给物体添加真实感,如木材的纹理、石头的表面等。
  • 应用方式: 通过将纹理贴图应用到材质(Material)上,然后将这个材质应用到几何体(Geometry)上
    在这里插入图片描述
着色器
  • 定义: 着色器是运行在GPU上的小程序,用于控制顶点(顶点着色器)和像素(片元着色器)的渲染方式。
  • 用途: 着色器通常用于创建复杂的视觉效果,如动态光照、阴影、反射、折射等。
  • 应用方式: 通过编写GLSL代码来定义着色器的行为,并将其应用到ShaderMaterial或RawShaderMaterial。
    顶点着色器也是在Material里面使用
    在这里插入图片描述
    这个uniforms里面的texturetootj就是贴图,他将在着色器代码中被加载
    在这里插入图片描述
关系和组合使用
  • 分开使用: 你可以只使用纹理贴图来增强物体的外观,而不涉及自定义着色器的复杂性。同样,你也可以只使用着色器来创建特定的效果,而不使用任何纹理贴图。
  • 结合使用: 着色器可以访问和使用纹理贴图。例如,在自定义的片元着色器中,你可以使用纹理贴图来决定物体表面的颜色和纹理。这允许你创建更复杂和动态的视觉效果。
  • 总结:还是结合起来用比较好:贴图是肯定要加载的,然后通过uniforms将贴图传到着色器代码中,进行使用!
    也就是说,着色器中加载到了贴图,不仅完成了将贴图贴到模型上的任务,还在贴好图之后的模型上,添加了光照、阴影、反射、折射等
要想贴图贴的好,uv坐标少不了

关于uv坐标的计算,这段代码都是固定的,直接用就ok!

const positions = geometry.getAttribute('position').array;
// 找到模型顶点坐标的最小值和最大值
let minX = Number.POSITIVE_INFINITY;
let maxX = Number.NEGATIVE_INFINITY;
let minY = Number.POSITIVE_INFINITY;
let maxY = Number.NEGATIVE_INFINITY;
for (let i = 0; i < positions.length; i += 3) {
  const x = positions[i];
  const y = positions[i + 1];

  minX = Math.min(minX, x);
  maxX = Math.max(maxX, x);
  minY = Math.min(minY, y);
  maxY = Math.max(maxY, y);
}
// 计算顶点坐标范围
const rangeX = maxX - minX;
const rangeY = maxY - minY;
// 计算 UV 坐标并归一化到 0 到 1 之间
const uvs = [];
for (let i = 0; i < positions.length; i += 3) {
  const x = positions[i];
  const y = positions[i + 1];

  const u = (x - minX) / rangeX;
  const v = (y - minY) / rangeY;

  uvs.push(u, v);
}
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
  • 怎么用?
stlLoader.load('./src/stl/Down/测试123456.stl', geometry => {
      const positions = geometry.getAttribute('position').array;
      // 找到模型顶点坐标的最小值和最大值
      let minX = Number.POSITIVE_INFINITY;
      let maxX = Number.NEGATIVE_INFINITY;
      let minY = Number.POSITIVE_INFINITY;
      let maxY = Number.NEGATIVE_INFINITY;
      for (let i = 0; i < positions.length; i += 3) {
        const x = positions[i];
        const y = positions[i + 1];

        minX = Math.min(minX, x);
        maxX = Math.max(maxX, x);
        minY = Math.min(minY, y);
        maxY = Math.max(maxY, y);
      }
      // 计算顶点坐标范围
      const rangeX = maxX - minX;
      const rangeY = maxY - minY;
      // 计算 UV 坐标并归一化到 0 到 1 之间
      const uvs = [];
      for (let i = 0; i < positions.length; i += 3) {
        const x = positions[i];
        const y = positions[i + 1];

        const u = (x - minX) / rangeX;
        const v = (y - minY) / rangeY;

        uvs.push(u, v);
      }
      geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));

      //~~~
      mesh0 = new THREE.Mesh(geometry, material_tooth_0);
      mesh0_ = new THREE.Mesh(geometry, material_tooth_);

      mesh0_history = mesh0.clone();
      objects.push(mesh0);
      scene.add(mesh0);
    });

在这里插入图片描述

为什么要使用着色器?直接使用three.js内置的光照、阴影、反射、折射等内置的成员属性不香吗?

使用着色器(Shaders)而不是仅依赖three.js的内置光照、阴影、反射、折射等功能,主要有以下几个原因:

  • 高度自定义和灵活性: 着色器提供了对渲染过程的底层控制,使得你可以创建独特和复杂的视觉效果,这些效果可能无法通过three.js的标准材质和光源直接实现。例如,你可以创建自定义的波纹效果、独特的光照模型或高级的粒子效果。

  • 性能优化: 对于特定的应用,使用自定义着色器可能比使用three.js的高级材质更高效。自定义着色器允许你精确地控制GPU执行哪些操作,从而优化性能,特别是在复杂场景或需要渲染大量对象时。

  • 艺术和创意表达: 着色器允许艺术家和开发者通过代码实现他们的创意视觉,提供了一种新的表达方式。这在艺术作品、视觉效果和游戏开发中尤其有价值。

  • 实现特定的图形技术: 某些高级图形技术,如光线追踪、体积渲染或特殊的材质效果,可能需要使用着色器来实现。

  • 学习和探索: 学习着色器编程可以加深你对图形学的理解,提高你在WebGL和three.js上的技术水平。

虽然three.js提供了丰富的内置功能来处理光照、材质等,但这些功能有时可能不足以满足所有的视觉需求或性能要求。因此,着色器是一个强大的工具,用于在需要时扩展和增强three.js的能力。然而,需要注意的是,编写和维护着色器代码通常比使用three.js的标准功能更复杂,需要更深入的图形学知识和GLSL编程技能。

使用着色器glsl语言,让你不限于JavaScript,而更像是在开发opengl的项目!!!并且glsl着色器语言在c++也具有普遍性!!!

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

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

相关文章

Parallel patterns: convolution —— An introduction to stencil computation

在接下来的几章中&#xff0c;我们将讨论一组重要的并行计算模式。这些模式是许多并行应用中出现的广泛并行算法的基础。我们将从卷积开始&#xff0c;这是一种流行的阵列操作&#xff0c;以各种形式用于信号处理、数字记录、图像处理、视频处理和计算机视觉。在这些应用领域&a…

超简单的node爬虫小案例

同前端爬取参数一样&#xff0c;输入三个参数进行爬取 注意点也一样&#xff1a; 注意分页的字段需要在代码里面定制化修改&#xff0c;根据你爬取的接口&#xff0c;他的业务规则改代码中的字段。比如我这里总条数叫total&#xff0c;人家的不一定。返回的数据我这里是data.r…

存内计算技术打破常规算力局限性

目录 前言 关于存内计算 1、常规算力局限性 2、存内计算诞生记 3、存内计算核心 存内计算芯片研发历程及商业化 1、存内计算芯片研发历程 2、存内计算先驱出道 3、存内计算商业化落地 基于知存科技存内计算开发板ZT1的降噪验证 &#xff08;一&#xff09;任务目标以…

linux-部署Samba文件共享服务

linux-部署Samba文件共享服务 1、使用命令安装samba服务和samba客户端 dnf install samba samba-client # 或者 yum install samba samba-client2、配置文件的设置(可提前备份smb.conf) vim /etc/samba/smb.conf [global]workgroup SAMBAsecurity userpassdb backend tdbsam…

芯品荟|电梯外呼面板屏驱市场调研报告

PART ONE 产品简介 - Introduction - 1.电梯外呼面板介绍 电梯外呼面板&#xff0c;用于显示电梯当前位置、运行状态和楼层信息&#xff0c;以便乘客在等待电梯时了解电梯的运行情况。 电梯外呼面板&#xff0c;按显示屏的种类&#xff0c;分为3类&#xff0c;分别是LED屏、L…

Linux Mii management/mdio子系统分析之二 mdio总线-设备-驱动模型分析

Linux Mii management/mdio子系统分析之二 mdio总线-设备-驱动模型分析 &#xff08;转载&#xff09;原文链接&#xff1a;https://blog.csdn.net/u014044624/article/details/123303139 接着上篇文章继续分析mdio子系统&#xff0c;本章主要介绍mdio子系统的驱动模型&#xf…

3.3.2 CSMA/ CD协议

3.3.2 CSMA/ CD协议 CSMA/CD&#xff08;Carrier Sense Multiple Access with Collision Detection&#xff09;&#xff1a;载波监听多点接入/碰撞检测。 检测到碰撞后&#xff1a; 适配器立即停止发送。&#xff08;碰撞点后面的信号会一直叠加&#xff09;等待一段随机时间…

【AI】 AIOTSummary

智能物联网(AIoT)是2018年兴起的概念,指系统通过各种信息传感器实时采集 各类信息(一般是在监控、互动、连接情境下的),在终端设备、边缘域或云中心 通过机器学习对数据进行智能化分析,包括定位、比对、预测、调度等。智能物联网(AIoT)是2018年兴起的概念,指系统通过…

你还没脱单,这些软件都得背锅

不管你是否认可情人节概念&#xff0c;是否会在这天与自己的那个ta相聚&#xff0c;每个成年人都会或多或少地思考自己的感情问题。 在互联网兴盛之前&#xff0c;人与人的交往大都依靠职场关系和熟人介绍来结识新的对象&#xff0c;但也有媒人、婚姻介绍所等专门的职业为适龄…

服务异步通讯——springcloud

服务异步通讯——springcloud 文章目录 服务异步通讯——springcloud初始MQRabbitMQ快速入门单机部署1.1.下载镜像安装MQ SpringAMQPwork Queue 工作队列Fanout Exchange广播模式DirectExchange路由模式TopicExchange话题模式 消息转换器 初始MQ RabbitMQ快速入门 官网https:/…

科研绘图(八)线性热图

线性热图&#xff08;Linear Heat Map&#xff09;是一种数据可视化技术&#xff0c;用于展示数值在一维线性空间上的分布情况。它通常用于展示沿着一条线&#xff08;例如时间线或任何一维序列&#xff09;的数据密度或强度变化。线性热图与传统的二维热图不同&#xff0c;后者…

Sectigo多域名通配符证书买一年送一个月

Sectigo随着互联网的发展也在飞速发展&#xff0c;旗下颁发了多种单域名SSL证书、多域名SSL证书和通配符SSL证书产品。Sectigo旗下的SSL证书产品丰富&#xff0c;为了满足一些域名多&#xff0c;子域名也比较多的企事业单位的需求&#xff0c;推出了一种多域名通配符SSL证书。今…

Linux内核架构和工作原理详解(一)

简介 作用是将应用层序的请求传递给硬件&#xff0c;并充当底层驱动程序&#xff0c;对系统中的各种设备和组件进行寻址。目前支持模块的动态装卸(裁剪)。Linux内核就是基于这个策略实现的。Linux进程1.采用层次结构&#xff0c;每个进程都依赖于一个父进程。内核启动init程序…

simulink之state

状态 状态描述了无功系统的运行模式。在Stateflow图表中&#xff0c;状态用于顺序设计&#xff0c;以创建状态转换图。 状态可以是激活状态&#xff0c;也可以是非激活状态。一个状态的激活或不激活可以根据事件和条件而变化。事件的发生通过使状态变为激活或非激活来驱动状态…

跨境电商多账号防关联攻略分享,盘点那些可以多账号登录的指纹浏览器

在跨境电商行业中&#xff0c;卖家常常需要在电商平台上同时运营多个店铺&#xff0c;但像亚马逊这样的平台都禁止同一个卖家在同一个站点上开设多家店铺&#xff0c;这一做法也常常会带来账号关联的风险&#xff0c;而关联的后果可能非常严重。那么拥有多个账号的跨境卖家应该…

多级缓存(nginx本地缓存、JVM进程缓存、redis缓存)

文章目录 整体示意图1.nginx缓存2.进程缓存Caffeine示例 3.Lua语法(为了在nginx中做编程)4.OpenResty5.封装向Tomcat发送的Http请求&#xff0c;获取数据6.Tomcat集群的负载均衡7.redis缓存8.查询Redis缓存9.Nginx本地缓存 整体示意图 1.nginx缓存 2.进程缓存 Caffeine示例 3.…

多级缓存架构(二)Caffeine进程缓存

文章目录 一、引入依赖二、实现进程缓存1. 配置Config类2. 修改controller 三、运行四、测试 通过本文章&#xff0c;可以完成多级缓存架构中的进程缓存。 一、引入依赖 在item-service中引入caffeine依赖 <dependency><groupId>com.github.ben-manes.caffeine…

企业内部知识库搭建方法,一般人都不知道

让我们想象一下&#xff0c;你是一家创业公司的创始人或者是已有企业的CEO&#xff0c;你是否遇到过这样的问题&#xff0c;公司的员工有时候互相之间的信息交流不够顺畅&#xff0c;不同部门之间的知识沟通不够清晰&#xff1f; 或者是新加入的员工刚开始工作几个月都处在一个…

网络部署实战具体学习内容总结

网络部署实战具体学习内容总结 &#x1f4bb;网络部署实战课程通常旨在教授学生如何规划、配置、维护和优化计算机网络。这些课程涵盖了广泛的主题&#xff0c;以确保学生具备网络部署和管理所需的技能。 网络部署实战课程具体学习内容&#x1f447; 1️⃣网络架构设计及网络原…

遥测终端机选择要点:功能、稳定性与成本的综合考量

在当今的智能化时代&#xff0c;遥测终端机作为数据采集、传输和处理的关键设备&#xff0c;广泛应用于水利、气象、环保等领域。然而&#xff0c;面对市场上琳琅满目的遥测终端机产品&#xff0c;如何选择一款性能优良、稳定性高且成本合理的设备成为摆在用户面前的一大难题。…