学习Three制作的城市效果demo
效果: 1.背景天空盒 2.鼠标效果 3.建筑物渐变色 4.建筑物外围线条 5.扫描线 6.加场景扫描线 7.雷达效果 8.透明墙 9.地面扩散 10.扩散半球 11.旋转四棱锥 12.飞线 13.路径移动 14.场景文字 15.下雪 16.跟随鼠标位置缩放
使用1.轨道控件(OrbitControls) 2.动画控件(Tween) 3.着色器材质 4.blender创建城市模型
问题:
-
threejs创建设备坐标（三维） new THREE.Vector3(x, y, 0.5) 为什么z是0.5 z被设置为浮点数0.5。这个值代表着坐标点在z轴方向上的位置，以单位长度为1来度量。由于Three.js默认情况下使用右手坐标系，因此正z轴指向屏幕内部。设置为0.5的z值将使坐标点位于z轴的一半位置，即位于摄像机和场景之间
-
threejs中unproject是干什么的 unproject用于将屏幕坐标转换为 3D 场景中的坐标。这个方法通常用于用户点击了屏幕上某个位置后，在场景中添加一个物体或执行其他与鼠标交互相关的任务。
具体来说，unproject() 方法可以将三维场景中的一点（在世界坐标系下）投影到二维屏幕坐标系中。在此之后，使用逆转换可以将屏幕坐标转换回场景中的三维坐标。
-
threejs camera.position camera.rotation区别 position是相机位置 rotation是朝哪里看
-
projectionMatrix * modelViewMatrix * vec4(position, 1.0) 是什么意思
在 ThreeJS 中，projectionMatrix * modelViewMatrix * vec4(position, 1.0) 是一种常见的向量变换方法，用于将一个三维坐标从模型空间（Model Space）转换为屏幕空间（Screen Space），即将该点投影到相机的视锥体中，以便在屏幕上显示。
具体来说，这个公式表示：
modelViewMatrix 是一个矩阵，它表示了物体在世界坐标系内的位置和方向，也就是从模型空间到世界空间的变换。 projectionMatrix 则是一个矩阵，它描述了相机的透视或正交投影方式，即可将三维空间中的点投影到二维平面上的方法。 vec4(position, 1.0) 是一个四元组，其中前三个元素表示点的坐标，最后一个元素为 1.0。这个四元组表示了从模型空间中的某一点开始变换。 将这三个元素相乘，可以得到一个新的四元组，其值表示从模型空间到屏幕空间的变换，也就是将该点投影到相机视锥体内部的位置。最后我们可以通过将这个四元组的前三个元素除以第四个元素来得到一个三维坐标（齐次坐标 homogeneous coordinates）。这个三维坐标即为该点在屏幕上的位置。
- threejs中mix(base_color, u_head_color, v_position.z / u_size);mix()函数的作用
在 ThreeJS 中，mix() 函数是一种线性插值函数，用于计算两个值之间的中间值。具体来说，mix(x, y, a) 函数会返回一个新的值，该值介于 x 和 y 之间，并按照比例因子 a 进行加权平均。
在 base_color = mix(base_color, u_head_color, v_position.z / u_size) 这个公式中，base_color 和 u_head_color 是颜色值，v_position.z 和 u_size 则是数字。这个公式的作用是对 base_color 颜色进行线性插值，使其逐渐转变为 u_head_color 颜色。
具体来说，这个公式使用了一个插值因子，即 v_position.z / u_size。其中，v_position 表示当前像素在模型空间中的位置，而 u_size 是一个用户定义的常量，表示模型的尺寸。这个插值因子的作用是根据像素在模型场景中的深度信息（通过 v_position.z 获取），将 base_color 颜色向 u_head_color 颜色进行线性插值。当深度信息越大时，插值因子越接近 1，此时颜色更接近 u_head_color，因此呈现出一种从底部向顶部逐渐变化的颜色效果。
- ShaderMaterial是什么
ShaderMaterial 是一种特殊的材质类型，它允许用户自定义着色器（Shader）代码
- gl_FragColor 是什么
gl_FragColor 是一个内置变量，用于在片元着色器中指定当前像素的颜色值
- vec3 vec4是什么
vec3 表示一个三维向量，包含三个浮点数元素，分别表示向量在 x、y 和 z 方向上的分量。通常情况下，vec3 用于表示场景中的点坐标、法线向量、方向向量等。 vec4 则表示一个四维向量，包含四个浮点数元素，分别表示向量在 x、y、z 和 w 方向上的分量。其中，w 分量通常被称为齐次坐标（homogeneous coordinate），用于处理透视变换和插值等操作。在 WebGL 或 ThreeJS 中，vec4 可以用于表示颜色、光照参数、变换矩阵等。
- uniform varying attribute的区别
uniform 变量表示一种全局变量，它的值对应于每个渲染调用中都保持不变。通常情况下，uniform 变量用于传递与模型无关的常量或者材质属性等信息，如光源位置、环境光颜色、物体颜色等。 varying 变量表示一种从顶点着色器元素（Vertex Shader）到片元着色器元素（Fragment Shader）之间的插值变量。在顶点着色器中设置 varying 变量后，在后续的片元着色器中将会自动计算出沿着多边形内部线性插值的结果。通常情况下，varying 变量用于在顶点着色器和片元着色器之间传递插值颜色、插值法线、插值纹理坐标等数据。 attribute 变量则表示一种顶点属性，它用于描述一个顶点的本地属性，如顶点位置、顶点法线、顶点纹理坐标等。在顶点着色器中，使用 attribute 变量可以将这些本地数据传递到片元着色器中进行后续计算和插值处理。 他们是只能用于main函数之外吗 目前来看,是的
- 顶点着色器 片元着色器使用相同变量名是什么意思
顶点着色器和片元着色器可以使用相同的变量名来表示相同的变量，这通常被称为“共享变量”。具体来说，当使用相同的变量名来表示一个变量时，它们实际上是同一个变量，并且在两个着色器之间进行传递和处理。
- 顶点着色器 position 值是什么样的
position 变量通常是一个三维向量类型的变量（如 vec3），包含 x、y、z 三个分量，分别表示该顶点在 x、y、z 方向上的位置坐标
- gl_Position是什么
gl_Position 是 WebGL 中的一个内置变量，表示当前顶点在裁剪坐标系下的位置。在顶点着色器中，通过计算 gl_Position 变量的值，可以将该顶点在模型坐标系下的位置转换为在裁剪坐标系下的位置，从而进行下一步的处理和渲染。
具体来说，gl_Position 变量通常是一个四维向量类型的变量（如 vec4），包含 x、y、z、w 四个分量。其中，x、y、z 三个分量表示该顶点在裁剪坐标系下的位置坐标，范围为 [-1,1]；w 分量则用于透视除法（perspective divide），其值等于顶点的 z 坐标除以 w 坐标，并且 w 坐标通常设置为 1.0
- 顶点着色器 片元着色器区别 顶点着色器是画顶点(一个个的点) 片元着色器(把点画成片)
是顶点着色器绘制顶点后片元着色器进行着色吗 是的，顶点着色器和片元着色器都是在GPU上执行的程序，并且它们分别处理图形渲染管线中的不同阶段。
在顶点着色器中，主要对输入的顶点数据进行变换和处理，以生成裁剪坐标系下的顶点位置信息。这些顶点可以包括三角形的顶点、点云的点等。一旦所有的顶点经过顶点着色器处理后，它们就会被组装成为几何图元（如三角形）并发送到下一阶段：光栅化（Rasterization）。
光栅化阶段将每个图元转换为一组覆盖像素的集合，即所谓的片元（Fragment）。然后片元着色器运行在每个片元上，使用插值后的颜色、法向量等数据进行计算，以生成最终的像素颜色值。在这个阶段，可以进行各种丰富多样的效果，如纹理映射、光照、阴影计算等等。
因此，是先通过顶点着色器绘制顶点，再由片元着色器进行着色的，这是图形渲染管线中的一个重要的流程。
- u_time是内部变量吗
不是
- precision mediump float 这句话是什么意思,什么时候用
着色器程序中的 precision mediump float 常用于指定顶点颜色、纹理坐标以及其他浮点数据的精度。大多数情况下，使用中等精度已经足够了。但是如果需要进行更高精度的计算，可以考虑使用 highp 或自定义精度。
- atan函数的作用
atan() 是数学中反正切函数的缩写，其作用是返回给定角度（以弧度为单位）的反正切值,反正切函数是三角函数的一种，它可以帮助我们计算出一个角度的弧度值
- mod的作用
作用是计算给定数值对另一个数值取模后的余数
- depthTest 作用
用于控制渲染时是否开启深度测试(Depth Test),true就是有遮挡效果,false就是没有
- clock.getDelta() 是干什么的
clock.getDelta() 是 Three.js 中 Clock 类的一个方法，用于获取从上一帧到当前帧之间的时间差，以秒为单位。它通常与动画循环一起使用，用来计算物体在每一帧中应该移动的距离和旋转的角度。
在 Three.js 的渲染循环中，通常会创建一个 Clock 对象，然后在循环中调用 getDelta() 方法来获取时间差，这个时间差可以用来调整物体的状态和位置。例如，如果想要让一个物体每秒旋转 90 度，就可以在每一帧时将其旋转 (90 * delta) 度，其中 delta 表示上一帧到当前帧之间的时间差。
总之，clock.getDelta() 可以帮助我们计算出两帧之间的时间差，从而使得在连续的帧之间进行平滑动画的计算变得容易。
- threejs中vertexShader中的position数据会输出什么样的值
具体来说，position变量是一个vec3类型的变量，它包含XYZ三个分量。在顶点着色器中，可以对这些分量进行一系列操作和变换，例如平移、旋转、缩放、投影等，以便将顶点从模型空间转换到裁剪空间。最终，该变量的值将通过varying(插值)传递给片段着色器，用于生成像素颜色的计算。
- 这个position是某一时刻,某一个顶点的数据吗
对,整体有哪些点由geometry = new THREE.CylinderGeometry 这种来控制
- 这个position是一个相对值,还是这个顶点在屏幕中的绝对值吗
position 是一个相对值，它表示顶点在模型空间(Model Space)中的位置坐标。在 Three.js 中，所有的几何体都是在三维空间中定义，其位置信息是相对于世界坐标系(World Space)或父级物体的局部坐标系(Local Space)而言的。
相对于当前的物体,最终物体的位置由
const mesh = new THREE.Mesh(geometry, material) mesh.position.x=200; //由这里控制 position.set(-10,10,30) //或者这样 scene.add(mesh);