如何学习three.js

如何学习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++也具有普遍性!!!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SecureCRT6中文版安装资源,一键安装

SecureCRT 6 是一款由 VanDyke Software 开发的终端仿真程序&#xff0c;它为用户提供了一个安全的远程访问工具&#xff0c;可以通过 SSH、Telnet、Rlogin 和串口等协议连接到远程服务器或设备。 它适用于各种操作系统&#xff0c;如 Windows、Mac 和 Linux。它提供了强大的功…

SELinux、SELinux运行模式、破解Linux系统密码、firewalld防火墙介绍、构建基本FTP服务、systemd管理服务、设置运行模式

1 路漫漫其修远兮&#xff0c;吾将上下而求索 2 DNS服务器 作用&#xff1a;负责域名解析的服务器&#xff0c;将域名解析为IP地址 /etc/resolv.conf:指定DNS服务器地址配置文件 3 常用的网络工具 ip命令&#xff08;Linux最基础的命令&#xff09; 1.查看IP地址 [rootserv…

C#,入门教程(19)——循环语句(for,while,foreach)的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(18)——分支语句&#xff08;switch-case&#xff09;的基础知识https://blog.csdn.net/beijinghorn/article/details/124039953 一、for循环 当老师进入教室&#xff0c;从门口开始分别按行、列点名&#xff0c;看看哪位翘课&…

【脑筋急转弯系列】乒乓球称重问题

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

EndNote登录一直显示The username/password specified is not valid

EndNote登录一直显示The username/password specified is not valid EndNote20今天想打开之前的share library的时候一直显示 ‘The Username/password specified is not valid’&#xff0c;查了很多解决方案&#xff0c;现在献上解决方案&#xff1a; 该密码然后重新登陆…

js 回文串

思路&#xff1a; 判断一个字符串是否为回文字符串的基本思路是比较字符串的正序和倒序是否相同。 两者相同&#xff0c;则该字符串是回文字符串&#xff0c;否则不是。 要实现这一思路&#xff0c;我们可以使用 JavaScript 字符串的一些方法。我是忽略了所有的空格和符号&…

超融合之道:亚信安慧AntDB 8.0版本引领数据库创新

在当今多变的数据应用场景中&#xff0c;AntDB作为行业领先的超融合流式实时数仓&#xff0c;秉承着“融合实时”的研发理念&#xff0c;全面应对企业日益复杂的数据处理需求。通过SQL接口访问多种执行引擎&#xff0c;AntDB在实现交易、分析等多重能力的“超融合”方面取得了显…

【MySQL高级】——性能分析

数据库调优中&#xff0c;目标是 响应时间更快&#xff0c;吞吐量更大&#xff0c;利用宏观的监控工具和微观的日志分析帮助我们快速找到调优的思路和方式。 1. 数据库服务器优化步骤 整个流程划分成了 观察&#xff08;Show status&#xff09; 和 行动&#xff08;Action&am…

记一次 .NET某收银软件 非托管泄露分析

一&#xff1a;背景 1. 讲故事 在我的分析之旅中&#xff0c;遇到过很多程序的故障和杀毒软件扯上了关系&#xff0c;有杀毒软件导致的程序卡死&#xff0c;有杀毒软件导致的程序崩溃&#xff0c;这一篇又出现了一个杀毒软件导致的程序非托管内存泄露&#xff0c;真的是分析多…

远程如何才能完整快速的传输大文件?

随着互联网技术的迅速进步&#xff0c;远程文件传输已经成为企业间合作与交流中不可或缺的一环。然而&#xff0c;在需要传输大文件的情况下&#xff0c;传统的文件传输方式往往会面临传输速度慢、文件易损等问题。因此&#xff0c;如何实现远程大文件的快速、安全、完整传输&a…

iOS UI掉帧和卡顿优化解决方案记录

UI卡顿原理 在 VSync 信号到来后&#xff0c;系统图形服务会通过 CADisplayLink 等机制通知 App&#xff0c;App 主线程开始在 CPU 中计算显示内容&#xff0c;比如视图的创建、布局计算、图片解码、文本绘制等。随后 CPU 会将计算好的内容提交到 GPU 去&#xff0c;由 GPU 进行…

教你用通义千问只要五步让千年的兵马俑跳上现代的科目三?

教你用五步让千年的兵马俑跳上现代的舞蹈科目三&#xff1f; 上面这个“科目三”的视频&#xff0c;只用了一张我上月去西安拍的兵马俑照片生成的。 使用通义千问&#xff0c;只要5步就能它舞动起来&#xff0c;跳上现在流行的“科目三”舞蹈。 全民舞王 第1步 打开通义千问…

设计师们必备的神秘利器!这款设计工具不容忽视!

「即时设计」与Figma类似&#xff0c;它是一种云设计工具&#xff0c;可以与多人实时合作&#xff0c;从设计到评估、交付、团队合作和版本管理。 作为一种国内工具&#xff0c;起初我们对它不是很乐观&#xff0c;但不得不说&#xff0c;经过深入使用&#xff0c;无论是迭代速…

【量化交易实战记】小明的破晓时刻——2023下半年新能源汽车板块的成功掘金之旅

在2023年的炎炎夏日&#xff0c;小明在不断的观察分析市场的过程中&#xff0c;突然敏锐地察觉到了新能源汽车市场的风云变幻。他日复一日地研读行业报告、追踪政策动向、分析公司财报&#xff0c;以及密切关注全球市场动态。那段时间里&#xff0c;新能源汽车行业仿佛迎来了一…

C++ 有需求 需要对数字向下取整 int和 double 混淆 已解决

在项目使用中。 原本以为 直接 ceil(13/ 2) 3 但是实际是错误的。 需要 是 ceil(5.0 / 2) double 才能向上取整。结果有大佬 直接使用两种办法 能解决问题。 由于传入的参数和返回的参数都是double&#xff0c;所以需要手动转化 #include <bits/stdc.h> using name…

Docker部署的gitlab升级指南(15.11.X容器里升级PostgreSQL到13.8)

一、确定当前版本 #进入当前版本容器产看gitlab版本 docker exec -it gitlab cat /opt/gitlab/embedded/service/gitlab-rails/VERSION#显示版本如下 14.4.0二、备份数据&#xff0c;防止升级发生意外 #执行备份命令 docker exec -ti gitlab gitlab-rake gitlab:backup:creat…

Mybatis基础---------增删查改

增删改 1、新建工具类用来获取会话对象 import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.apache.ibatis.session.SqlSessionFactoryBuilder; import org.apache.ibatis.io.Resources;import java.io.IOExcept…

Spring环境搭配

概述 Spring 是一个开源框架&#xff0c;Spring 是于2003 年兴起的一个轻量级的Java 开发框架&#xff0c;由 RodJohnson 在其著作 Expert One-On-One J2EE Development and Design 中阐述的部分理念和原型衍生而来。它是 为了解决企业应用开发的复杂性而创建的。框架的主要优势…

【PDF密码】PDF密码,如何强制取消?

想要给PDF文件设置一个密码防止他人对文件进行编辑&#xff0c;那么我们可以对PDF文件设置限制编辑&#xff0c;设置方法很简单&#xff0c;我们在PDF编辑器中点击文件 – 属性 – 安全&#xff0c;在权限下拉框中选中【密码保护】 然后在密码保护界面中&#xff0c;我们勾选【…

一台电脑如何通过另一台联网电脑访问网络

电脑A没有连接网络&#xff0c;电脑B已经连接wifi。 电脑A如何通过访问电脑B从而连接网络&#xff1f; 1. 将这2台电脑用网线直连 2. 电脑B打开【网络和Internet设置】 3. 右键点击WLAN&#xff0c;选择属性&#xff0c;进入共享tab页面&#xff0c;勾选【允许其他网络用户通过…