什么是webgl
WebGL是一种基于OpenGL ES 2.0的Web技术，它允许在浏览器中渲染交互式3D和2D图形。WebGL利用了GPU（图形处理器）的能力，将图形处理分配到GPU上，意味着它可以更快地渲染复杂的图形。WebGL通过JavaScript API提供接口访问GPU，使用者可以使用JavaScript渲染图像或者利用各种库和框架制作动画、游戏和其他交互性的web内容。
WebGL的优点包括跨平台、高效率、可定制性强和开放源代码等，这使它成为创建一系列令人惊叹的交互式应用程序的理想技术。但是在使用WebGL过程中需要注意的是，它需要一定的计算机硬件和软件支持，以及对OpenGL ES 2.0的一定了解。
学习初衷
由于个人想学习webGL可以更好的提高自己的技术和发展前景，但是由于webgl有大量的切零散的api，创建模型毕竟繁琐，后来考虑到three.js。three.js是对webgl的高级封装，可以更快速的创建模型，和实现交互等。但是我们都知道现在项目中大多都是以框架为底的，react、vue等，很少独自去展现一个3d模型，所以就需要在框子中去使用three,这样就会造成很多的不便等，为了更好的在项目中实现3d跟数据的结合找到了Tres.js。Tres.js是将three跟vue结合封装，可以在vue项目中更好的去使用，同时更一步简化了创造模型的难度。
总而言之就是-------懒人必备，非常好用（但是还是需要了解一些webgl和three的一些知识）。
3D场景三要素
开始之前我们要了解3d场景的三个要素、场景Scene、相机Camera、渲染器Renderer，所有的图像都是在这三个基础上进行展现的，不了解的可以查看我之前three.js笔记。
画布（场景、渲染）
在我们创建场景前，我们需要一个什么来展示它。使用原始的 ThreeJS 我们会需要创建一个 canvas HTML 元素来挂载 WebglRenderer 并初始化一个场景。这就是场景的创建、跟渲染器的挂载。
<script lang="ts" setup>
import { TresCanvas } from '@tresjs/core'
</script>
<template>
<TresCanvas window-size>
<!-- 这里是您的场景 -->
</TresCanvas>
</template>这个 TresCanvas 组件会在场景幕后做一些设置的工作:
- 它创建一个 WebGLRenderer 用于自动更新每一帧。
- 它根据浏览器刷新率设置要在每一帧上调用的渲染循环。
- 默认情况下TresCanvas的高度会随着父元素的宽高，因为他会自动更新等所以他会随着你父元素的宽高更改同步更改，大白话就是自适应宽度。
- 如果想充满屏幕的大小可以使用window-size prop来强制画布使用整个窗口的宽高。
配置项
| 配置 | 描述 | 默认值 |
|---|---|---|
| alpha | 控制默认清除 alpha 值。设置为 true 时，该值为 0，否则为 1。 | false |
| antialias | 是否进行抗锯齿处理。 | true |
| camera | 由渲染器指定相机。 | |
| clearColor | 清除画布后渲染器显示颜色。 | #000000 |
| context | 将渲染器附加到现有的 RenderingContext | |
| depth | 绘图缓冲区是否至少具有16位的深度缓冲区 。 | true |
| failIfMajorPerformanceCaveat | 在性能较低时，是否检测渲染器创建失败。详细信息请参阅WebGL规范。 | false |
| logarithmicDepthBuffer | 是否使用深度缓冲区。如果在单个场景中处理巨大的比例差异，可能需要使用此选项。请注意，如果使用，此设置将使用gl_FragDepth，这将禁用Early Fragment Test优化，可能会导致性能下降。 | false |
| outputColorSpace | 定义输出编码 | LinearEncoding |
| powerPreference | 用户代理适合此WebGL上下文的GPU配置。可选"high-performance"（高性能）, "low-power"（低功耗）或 "default"（默认）。 | default |
| precision | 着色器精度。可选"highp"（高精度）, "mediump"（中精度）或 "lowp"（低精度）。 | "highp" 需要设备支持 |
| premultipliedAlpha | 渲染器是否假定颜色具有 premultiplied alpha. | true |
| preserveDrawingBuffer | 是否保留缓冲区直到手动清除或覆盖。 | false |
| shadows | 渲染器是否启用阴影。 | false |
| shadowMapType | 设置阴影映射类型 | PCFSoftShadowMap |
| stencil | 绘图缓冲区是否至少具有8位的 模板缓冲区 。 | true |
| toneMapping | 定义渲染器使用的色调映射曝光。 | ACESFilmicToneMapping |
| toneMappingExposure | 色调映射的曝光级别。 | 1 |
| useLegacyLights | 是否使用传统照明模式 | true |
| windowSize | 是否使用窗口大小作为画布大小，否则使用父元素大小。 | false |
灯光
<TresCanvas clearColor="#000000">
<TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
<OrbitControls />
<TresAmbientLight :color="0xffffff" :intensity="0.5" />
</TresCanvas>TresAmbientLight 灯光 因为tres.js是将three.js再vue中进行的高级封装，所以可以使用vue中所用的语法，来进行配置属性 具体所含有属性可以查看three.js对应属性的介绍。比如最基础的 color灯光的颜色 以及强度等。以下是链接到three对应属性灯光
alert(“三连啊！靓仔”);
感谢