当前位置：首页 > news >正文

《Learn Three.js》学习（4）材质

news 来源：原创 2025/5/15 1:08:02

前言：

材质为scene中物体的皮肤，有着不同的特性和视觉效果。

材质的共有属性：

基础属性：

融合属性：

融合决定了我们渲染的颜色如何与它们后面的颜色交互

高级属性：

与WebGL内部有关

简单材质：

MeshBasicMaterial

创建材质：可以使用构造函数一次性传完所有参数；或先创建一个实例，再对实例的属性数据赋值

var meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff});

MeshDepthMaterial

不是由光照或者某个材质决定的，而是由相机距离决定的。不需要参数

wireframe 是否显示线框

wireframe 指定线框线宽度（该属性只对THRER.CanvasRender有效）

（方块再near和far之间的距离渲染）

scene.overrideMaterial = new THREE.MeshLambertMaterial();

使用scene.overrideMaterial属性，保证场景中所有物体都使用该材质，而无需再每个THREE.Mesh对象上显示声明。

联合材质

// 创建一个深度材质，这种材质可以用来渲染对象的深度信息，通常用于特效或者后期处理。
var cubeMaterial = new THREE.MeshDepthMaterial();// 创建一个基本颜色材质，设置颜色为绿色（0x00ff00），并且使其透明，透明度为0.6。
// blending 设置为 THREE.MultiplyBlending，这是一种混合模式，可以让颜色之间进行乘法混合，常用于创建透明或者半透明效果。
var colorMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, // 绿色transparent: true, // 设置材质为透明opacity: 0.6, // 设置透明度为0.6blending: THREE.MultiplyBlending // 设置混合模式
});// 使用 SceneUtils 的 createMultiMaterialObject 方法创建一个多材质对象。
// 这个方法接受两个参数：几何体（cubeGeometry）和材质数组（[cubeMaterial, colorMaterial]）。
// 这样，同一个几何体可以被多个材质覆盖，这里是一个深度材质和一个基本颜色材质。
var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [cubeMaterial, colorMaterial]);// 调整第二个材质（颜色材质）的缩放比例，使其稍微小于1，这样可以创建一种视觉效果，
// 使得颜色材质看起来像是覆盖在深度材质之上的一层半透明膜。
cube.children[1].scale.set(0.99, 0.99, 0.99);// 将创建的多材质立方体添加到场景中。
scene.add(cube);

THREE.MultiplyBlending会将前景色和背景色相乘。

MeshNormalMaterial

每一个免得颜色是由从该面向外指的法向量计算得到

        for (var f = 0, fl = sphere.geometry.faces.length; f < fl; f++) {var face = sphere.geometry.faces[f];var centroid = new THREE.Vector3(0, 0, 0);centroid.add(sphere.geometry.vertices[face.a]);centroid.add(sphere.geometry.vertices[face.b]);centroid.add(sphere.geometry.vertices[face.c]);centroid.divideScalar(3);var arrow = new THREE.ArrowHelper(face.normal,centroid,2,0x3333FF,0.5,0.5);sphere.add(arrow);}

对于每个THREE.Face3的对象来说，把构成该面的顶点相加再除以3来计算质心

单几何体上使用多种材质

        // 多材质联合var group = new THREE.Mesh();var mats = [];mats.push(new THREE.MeshBasicMaterial({color: 0x009e60}));mats.push(new THREE.MeshBasicMaterial({color: 0x019e60}));mats.push(new THREE.MeshBasicMaterial({color: 0x029e60}));mats.push(new THREE.MeshBasicMaterial({color: 0x039e60}));mats.push(new THREE.MeshBasicMaterial({color: 0x049e60}));mats.push(new THREE.MeshBasicMaterial({color: 0x059e60}));for (var i = 0; i < 6; i++) {for (var j = 0; j < 6; j++) {for (var k = 0; k < 6; k++) {var cubeGeom = new THREE.BoxGeometry(2.9, 2.9, 2.9);var cube = new THREE.Mesh(cubeGeom, mats);cube.position.set(i * 3 - 3, j * 3 - 3, k * 3 - 3);group.add(cube);}}}

高级材质：

THREE.MeshLambertMaterial

可以用来创建暗淡的并不光亮的表面，材质易用，对光源有反应,支持线框绘制属性

emissive（自发光）该属性不使其成为光源，而是不受光源影响，default color Black

看起来较为暗淡。

THREE.MeshPhongMaterial

Phong(冯氏（明暗处理算法的一种名称）)

可以创建一种光亮材质，可以模拟塑料质感和金属质感

emissive的作用影响geometry的color属性

THREE.MeshStandardMaterial

更加正确的物理计算物体表面和光源的互动，更好表现塑料和金属材质

THREE.MeshPhysicalMaterial

提供更多对反光度的控制

THREE.ShaderMaterial

可以自定义着色器，直接再webgl环境下运行，将three.js中js像素转换为屏幕上的像素，且可以明确覆盖或修改或指定Three.js中的默认值

前两个即webgl中渲染基础，vertexShader顶点着色器，fragmentShader片元着色器

<!DOCTYPE html><html><head><title>Example 04.08 - Shader material - http://glsl.heroku.com/</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}</style>
</head>
<body><script id="vertex-shader" type="x-shader/x-vertex">uniform float time;varying vec2 vUv;void main(){vec3 posChanged = position;posChanged.x = posChanged.x*(abs(sin(time*1.0)));posChanged.y = posChanged.y*(abs(cos(time*1.0)));posChanged.z = posChanged.z*(abs(sin(time*1.0)));//gl_Position = projectionMatrix * modelViewMatrix * vec4(position*(abs(sin(time)/2.0)+0.5),1.0);gl_Position = projectionMatrix * modelViewMatrix * vec4(posChanged,1.0);}</script><script id="fragment-shader-1" type="x-shader/x-fragment">precision highp float;uniform float time;uniform float alpha;uniform vec2 resolution;varying vec2 vUv;void main2(void){vec2 position = vUv;float red = 1.0;float green = 0.25 + sin(time) * 0.25;float blue = 0.0;vec3 rgb = vec3(red, green, blue);vec4 color = vec4(rgb, alpha);gl_FragColor = color;}#define PI 3.14159#define TWO_PI (PI*2.0)#define N 68.5void main(void){vec2 center = (gl_FragCoord.xy);center.x=-10.12*sin(time/200.0);center.y=-10.12*cos(time/200.0);vec2 v = (gl_FragCoord.xy - resolution/20.0) / min(resolution.y,resolution.x) * 15.0;v.x=v.x-10.0;v.y=v.y-200.0;float col = 0.0;for(float i = 0.0; i < N; i++){float a = i * (TWO_PI/N) * 61.95;col += cos(TWO_PI*(v.y * cos(a) + v.x * sin(a) + sin(time*0.004)*100.0 ));}col /= 5.0;gl_FragColor = vec4(col*1.0, -col*1.0,-col*4.0, 1.0);}</script><script id="fragment-shader-2" type="x-shader/x-fragment">// from http://glsl.heroku.com/e#7906.0uniform float time;uniform vec2 resolution;// 2013-03-30 by @hintz#define CGFloat float#define M_PI 3.14159265359vec3 hsvtorgb(float h, float s, float v){float c = v * s;h = mod((h * 6.0), 6.0);float x = c * (1.0 - abs(mod(h, 2.0) - 1.0));vec3 color;if (0.0 <= h && h < 1.0){color = vec3(c, x, 0.0);}else if (1.0 <= h && h < 2.0){color = vec3(x, c, 0.0);}else if (2.0 <= h && h < 3.0){color = vec3(0.0, c, x);}else if (3.0 <= h && h < 4.0){color = vec3(0.0, x, c);}else if (4.0 <= h && h < 5.0){color = vec3(x, 0.0, c);}else if (5.0 <= h && h < 6.0){color = vec3(c, 0.0, x);}else{color = vec3(0.0);}color += v - c;return color;}void main(void){vec2 position = (gl_FragCoord.xy - 0.5 * resolution) / resolution.y;float x = position.x;float y = position.y;CGFloat a = atan(x, y);CGFloat d = sqrt(x*x+y*y);CGFloat d0 = 0.5*(sin(d-time)+1.5)*d;CGFloat d1 = 5.0;CGFloat u = mod(a*d1+sin(d*10.0+time), M_PI*2.0)/M_PI*0.5 - 0.5;CGFloat v = mod(pow(d0*4.0, 0.75),1.0) - 0.5;CGFloat dd = sqrt(u*u+v*v);CGFloat aa = atan(u, v);CGFloat uu = mod(aa*3.0+3.0*cos(dd*30.0-time), M_PI*2.0)/M_PI*0.5 - 0.5;// CGFloat vv = mod(dd*4.0,1.0) - 0.5;CGFloat d2 = sqrt(uu*uu+v*v)*1.5;gl_FragColor = vec4( hsvtorgb(dd+time*0.5/d1, sin(dd*time), d2), 1.0 );}</script><script id="fragment-shader-3" type="x-shader/x-fragment">uniform vec2 resolution;uniform float time;vec2 rand(vec2 pos){return fract( 0.00005 * (pow(pos+2.0, pos.yx + 1.0) * 22222.0));}vec2 rand2(vec2 pos){return rand(rand(pos));}float softnoise(vec2 pos, float scale){vec2 smplpos = pos * scale;float c0 = rand2((floor(smplpos) + vec2(0.0, 0.0)) / scale).x;float c1 = rand2((floor(smplpos) + vec2(1.0, 0.0)) / scale).x;float c2 = rand2((floor(smplpos) + vec2(0.0, 1.0)) / scale).x;float c3 = rand2((floor(smplpos) + vec2(1.0, 1.0)) / scale).x;vec2 a = fract(smplpos);return mix(mix(c0, c1, smoothstep(0.0, 1.0, a.x)),mix(c2, c3, smoothstep(0.0, 1.0, a.x)),smoothstep(0.0, 1.0, a.y));}void main(void){vec2 pos = gl_FragCoord.xy / resolution.y;pos.x += time * 0.1;float color = 0.0;float s = 1.0;for(int i = 0; i < 8; i++){color += softnoise(pos+vec2(i)*0.02, s * 4.0) / s / 2.0;s *= 2.0;}gl_FragColor = vec4(color);}</script><script id="fragment-shader-4" type="x-shader/x-fragment">uniform float time;uniform vec2 resolution;vec2 rand(vec2 pos){returnfract((pow(pos+2.0,pos.yx+2.0)*555555.0));}vec2 rand2(vec2 pos){return rand(rand(pos));}float softnoise(vec2 pos, float scale) {vec2 smplpos = pos * scale;float c0 = rand2((floor(smplpos) + vec2(0.0, 0.0)) / scale).x;float c1 = rand2((floor(smplpos) + vec2(1.0, 0.0)) / scale).x;float c2 = rand2((floor(smplpos) + vec2(0.0, 1.0)) / scale).x;float c3 = rand2((floor(smplpos) + vec2(1.0, 1.0)) / scale).x;vec2 a = fract(smplpos);return mix(mix(c0, c1, smoothstep(0.0, 1.0, a.x)),mix(c2, c3, smoothstep(0.0, 1.0, a.x)),smoothstep(0.0, 1.0, a.x));}void main( void ) {vec2 pos = gl_FragCoord.xy / resolution.y - time * 0.4;float color = 0.0;float s = 1.0;for (int i = 0; i < 6; ++i) {color += softnoise(pos + vec2(0.01 * float(i)), s * 4.0) / s / 2.0;s *= 2.0;}gl_FragColor = vec4(color,mix(color,cos(color),sin(color)),color,1);}</script><script id="fragment-shader-5" type="x-shader/x-fragment">uniform float time;uniform vec2 resolution;// tie nd die by Snoep Games.void main( void ) {vec3 color = vec3(1.0, 0., 0.);vec2 pos = (( 1.4 * gl_FragCoord.xy - resolution.xy) / resolution.xx)*1.5;float r=sqrt(pos.x*pos.x+pos.y*pos.y)/15.0;float size1=2.0*cos(time/60.0);float size2=2.5*sin(time/12.1);float rot1=13.00; //82.0+16.0*sin(time/4.0);float rot2=-50.00; //82.0+16.0*sin(time/8.0);float t=sin(time);float a = (60.0)*sin(rot1*atan(pos.x-size1*pos.y/r,pos.y+size1*pos.x/r)+time);a += 200.0*acos(pos.x*2.0+cos(time/2.0))+asin(pos.y*5.0+sin(time/2.0));a=a*(r/50.0);a=200.0*sin(a*5.0)*(r/30.0);if(a>5.0) a=a/200.0;if(a<0.5) a=a*22.5;gl_FragColor = vec4( cos(a/20.0),a*cos(a/200.0),sin(a/8.0), 1.0 );}</script><script id="fragment-shader-6" type="x-shader/x-fragment">uniform float time;uniform vec2 resolution;void main( void ){vec2 uPos = ( gl_FragCoord.xy / resolution.xy );//normalize wrt y axis//suPos -= vec2((resolution.x/resolution.y)/2.0, 0.0);//shift origin to centeruPos.x -= 1.0;uPos.y -= 0.5;vec3 color = vec3(0.0);float vertColor = 2.0;for( float i = 0.0; i < 15.0; ++i ){float t = time * (0.9);uPos.y += sin( uPos.x*i + t+i/2.0 ) * 0.1;float fTemp = abs(1.0 / uPos.y / 100.0);vertColor += fTemp;color += vec3( fTemp*(10.0-i)/10.0, fTemp*i/10.0, pow(fTemp,1.5)*1.5 );}vec4 color_final = vec4(color, 1.0);gl_FragColor = color_final;}</script>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">// once everything is loaded, we run our Three.js stuff.function init() {var stats = initStats();// create a scene, that will hold all our elements such as objects, cameras and lights.var scene = new THREE.Scene();// create a camera, which defines where we're looking at.var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// create a render and set the sizevar renderer = new THREE.WebGLRenderer();renderer.setClearColor(new THREE.Color(0x000000, 1.0));renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMapEnabled = true;var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);var meshMaterial1 = createMaterial("vertex-shader", "fragment-shader-1");var meshMaterial2 = createMaterial("vertex-shader", "fragment-shader-2");var meshMaterial3 = createMaterial("vertex-shader", "fragment-shader-3");var meshMaterial4 = createMaterial("vertex-shader", "fragment-shader-4");var meshMaterial5 = createMaterial("vertex-shader", "fragment-shader-5");var meshMaterial6 = createMaterial("vertex-shader", "fragment-shader-6");var material = new THREE.MeshFaceMaterial([meshMaterial1,meshMaterial2,meshMaterial3,meshMaterial4,meshMaterial5,meshMaterial6]);
//        var material = new THREE.MeshFaceMaterial([meshMaterial2, meshMaterial2, meshMaterial1, meshMaterial1, meshMaterial1, meshMaterial1]);var cube = new THREE.Mesh(cubeGeometry, material);// add the sphere to the scenescene.add(cube);// position and point the camera to the center of the scenecamera.position.x = 30;camera.position.y = 30;camera.position.z = 30;camera.lookAt(new THREE.Vector3(0, 0, 0));// add subtle ambient lightingvar ambientLight = new THREE.AmbientLight(0x0c0c0c);scene.add(ambientLight);// add spotlight for the shadowsvar spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-40, 60, -10);spotLight.castShadow = true;scene.add(spotLight);// add the output of the renderer to the html elementdocument.getElementById("WebGL-output").appendChild(renderer.domElement);// call the render functionvar step = 0;var oldContext = null;var controls = new function () {this.rotationSpeed = 0.02;this.bouncingSpeed = 0.03;this.opacity = meshMaterial1.opacity;this.transparent = meshMaterial1.transparent;this.visible = meshMaterial1.visible;this.side = "front";this.wireframe = meshMaterial1.wireframe;this.wireframeLinewidth = meshMaterial1.wireframeLinewidth;this.selectedMesh = "cube";this.shadow = "flat";};render();function render() {stats.update();cube.rotation.y = step += 0.01;cube.rotation.x = step;cube.rotation.z = step;cube.material.materials.forEach(function (e) {e.uniforms.time.value += 0.01;});// render using requestAnimationFramerequestAnimationFrame(render);renderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0); // 0: fps, 1: ms// Align top-leftstats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}function createMaterial(vertexShader, fragmentShader) {var vertShader = document.getElementById(vertexShader).innerHTML;var fragShader = document.getElementById(fragmentShader).innerHTML;var attributes = {};var uniforms = {time: {type: 'f', value: 0.2},scale: {type: 'f', value: 0.2},alpha: {type: 'f', value: 0.6},resolution: {type: "v2", value: new THREE.Vector2()}};uniforms.resolution.value.x = window.innerWidth;uniforms.resolution.value.y = window.innerHeight;var meshMaterial = new THREE.ShaderMaterial({uniforms: uniforms,attributes: attributes,vertexShader: vertShader,fragmentShader: fragShader,transparent: true});return meshMaterial;}}window.onload = init;
</script>
</body>
</html>

线性几何体材质：

THREE.LineBasicMaterial

// 调用gosper函数生成一个4阶，长度为60的Gosper曲线的点集
var points = gosper(4, 60);// 创建一个新的THREE.BufferGeometry对象，用于存储线条段的几何数据
var lineWidth = new THREE.BufferGeometry();// 创建一个空数组来存储颜色值
var colors = [];// 初始化一个计数器变量i，用于跟踪当前处理的点的索引
var i = 0;// 遍历points数组中的每个点
points.forEach(function(e){// 将每个点的坐标添加到LineSegments的顶点数组中LineSegments.vertices.push(new THREE.Vector3(e.x, e.y, e.z));// 为每个点设置一个颜色值，这里使用白色作为基础颜色colors[i] = new THREE.Color(0xffffff);// 根据点的x和y坐标计算HSL颜色值，并设置颜色// x坐标除以100后加上0.5作为色相，y坐标乘以20后除以300再加上0.5作为饱和度，亮度固定为0.8colors[i].setHSL(e.x / 100 + 0.5, (e.y * 20) / 300 + 0.5, 0.8);// 增加计数器i，以便为下一个点设置颜色i++;
});
// 定义一个基本的线条材质，其中包含不透明度、线宽和顶点颜色的设置
var material = new THREE.LineBasicMaterial({opacity: 1.0, // 设置线条的不透明度为1.0（完全不透明）linewidth: 1, // 设置线条的宽度为1vertexColors: THREE.VertexColors // 启用顶点颜色，这意味着每个顶点可以有自己的颜色
});// 将计算出的颜色数组赋值给LineSegments对象的colors属性
LineSegments.colors = colors;

THREE.LineDashMaterial

在LineBasicMaterial的基础上有：scale（缩放dashSize和gapSize,scale < 1 dashSize和gapSize增大）；dashSize 虚线端的长度； gapSize虚线间隔的宽度

const material = new THREE.LineDashedMaterial( {color: 0xffffff,linewidth: 1,scale: 1,dashSize: 3,gapSize: 1,
} );

《Learn Three.js》学习（4）材质

前言： 材质为scene中物体的皮肤，有着不同的特性和视觉效果。材质的共有属性： 基础属性： 融合属性： 融合决定了我们渲染的颜色如何与它们后面的颜色交互高级属性： 与WebGL内部有关简单材质&#xff1…...

编程日记 2025/5/15 1:08:02

【QNX+Android虚拟化方案】128 - QNX 侧触摸屏驱动解析

【QNX+Android虚拟化方案】128 - QNX 侧触摸屏驱动解析一、QNX 侧触摸屏配置基于原生纯净代码，自学总结纯技术分享，不会也不敢涉项目、不泄密、不传播代码文档！！！本文禁止转载分享！！！汇总链接：《【QNX+Android虚拟化方案】00 - 系列文章链接汇总》本文链接：《【…...

编程日记 2025/5/13 17:01:36

Oracle SCN与时间戳的映射关系

目录一、基本概述二、相关操作三、参考文档一、基本概述 Oracle 数据库中的 SYS.SMON_SCN_TIME 表是一个关键的内部表，主要用于记录过去时间段中SCN与具体的时间戳之间的映射关系。这种映射关系可以帮助用户将 SCN 值转换为可读性更强的时间戳，从而…...

编程日记 2025/4/23 6:39:28

量化交易系统开发-实时行情自动化交易-8.2.发明者FMZ平台

19年创业做过一年的量化交易但没有成功，作为交易系统的开发人员积累了一些经验，最近想重新研究交易系统，一边整理一边写出来一些思考供大家参考，也希望跟做量化的朋友有更多的交流和合作。接下来会对于发明者FMZ平台介绍。发明…...

编程日记 2025/5/12 6:52:04

1. 实现SRN （1）使用Numpy实现SRN import numpy as npinputs np.array([[1., 1.],[1., 1.],[2., 2.]]) # 初始化输入序列 print(inputs is , inputs)state_t np.zeros(2, ) # 初始化存储器 print(state_t is , state_t)w1, w2, w3, w4, w5, w6, w7, …...

编程日记 2025/5/12 3:02:43

关于otter监控告警使用

一、背景近期在使用otter完成单机房单向同步时，常常遇到channel假死的情况，导致Pipeline同步停止，系统表数据同步停止，影响生产环境用户数据查询相关的功能，虽然事后能够通过停channel后再启用channel重新启用…...

编程日记 2025/5/12 4:20:11

复合查询和内外连接

文章目录 1. 简单查询2. 多表查询2.1 显示雇员名、雇员工资以及所在部门的名字2.2 显示部门号为10的部门名，员工名和工资2.3 显示各个员工的姓名，工资，及工资级别 3. 自连接4. 子查询4.1 where后的子查询4.1.1 单行子查询4.1.2 多行子查询 (i…...

编程日记 2025/5/13 9:30:31

动态规划【C++优质版】

（本文未经作者书面允许，禁止以任何形式传播（包括但不限于转载，翻译……）如需引用请标注原作者） Intro： 动态规划是一种用于解决优化问题的算法策略。在 C 中，它主要用于处理那些具…...

编程日记 2025/5/15 1:01:01

柔性芯片：实现万物互联的催化剂

物联网 (IoT) 市场已经非常成熟，麦肯锡预测，物联网将再创高峰，到 2030 年将达到 12.5 万亿美元的估值。然而，万物互联 (IoE) 的愿景尚未实现，即由数十亿台智能互联设备组成，提供大规模洞察和效率。究竟是…...

编程日记 2025/5/14 5:44:50

【分布式】分布式事务

目录 1、事务的发展 2、本地事务 （1）如何保障原子性和持久性？ （2）如何保障隔离性？ 2、全局事务 （1）XA事务的两段式提交 （2）XA事务的三段式提交…...

编程日记 2025/5/14 7:07:52

nacos安装部署

nacos安装部署 1.安装nacos 1.安装nacos nacos的安装很简单下载后解压启动即可，但是在启动前请确保jdk环境正常； 1.首先我们要下载nacos安装包：可以到官网下载，注意我这里使用的是2.1.0版本； 2.下载完成后&#xff0…...

编程日记 2025/4/28 18:04:06

git 上传代码时报错

在上传代码时，显示无法上传 PS E:\JavaWeb\vue3-project> git push To https://gitee.com/evening-breeze-2003/vue3.git! [rejected] master -> master (non-fast-forward) error: failed to push some refs to https://gitee.com/evening-breeze-20…...

编程日记 2025/5/12 1:43:13

【C++】数字位数提取：从个位到十位的深入分析与理论拓展

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯第一题：提取个位数解法代码解法分析代码优化拓展思考：取模运算的普适性 💯第二题：提取十位数题目解读与思路分析方法一&…...

编程日记 2025/5/14 10:34:35

数据结构--二叉树的创建和遍历

目录引入定义性质二叉树的创建迭代法注意事项： 递归法注意事项： 二叉树的遍历深度优先广度优先先序遍历（前序遍历） 中序遍历后序遍历层序遍历查找树结构中是否存在某数值方法一： 方法…...

编程日记 2025/5/8 14:46:31

CEF127 编译指南 Linux篇 - 安装Git和Python(三)

1. 引言在前面的文章中，我们已经完成了基础开发工具的安装和配置。接下来，我们需要安装两个同样重要的工具：Git 和 Python。这两个工具在 CEF 的编译过程中扮演着关键角色。Git 负责管理和获取源代码，而 Python 则用于运行各种编…...

编程日记 2025/5/10 18:24:02

计算机网络的类型

目录按覆盖范围分类个人区域网（PAN） 局域网（LAN） 城域网（MAN） 4. 广域网（WAN） 按使用场景和性质分类公网（全球网络） 外网内网（私有网…...

编程日记 2025/5/3 12:28:39

Web入门(学习笔记)

Web入门文章目录 Web入门SpringSpringBootWeb入门HTTP协议HTTP-概述HTTP特点 HTTP-请求协议HTTP-请求数据格式 HTTP-响应协议响应状态码 HTTP-协议解析 Web服务器-TomcatWeb服务器简介基本使用Tomcat文件夹目录解析常见问题Tomcat部署项目入门程序解析**内嵌的Tomcat服务器**…...

编程日记 2025/5/14 0:25:47

mind+自定义库编写注意事项

在mind图形化命令编写中，main.ts 文件是通过图形化编程工具生成 C 代码，然后将生成的 C 代码上传到 Arduino Uno 上执行。这些由main.ts定义的图形化代码通过生成的代码，需要包含调用arduinoc/libraries文件夹的*.h和*.cpp文件&#…...

编程日记 2025/5/12 10:50:32

jQuery零基础入门速通（上）

大家好，我是小黄。在前端开发的世界里，jQuery以其简洁的语法和强大的功能，一直是许多开发者手中的利器。它不仅简化了HTML文档遍历和操作、事件处理、动画以及Ajax交互，还极大地提高了开发效率。本文将带你走进jQuery的世界&…...

编程日记 2025/5/9 18:09:40

计算机网络-Wireshark探索IPv4

使用工具 Wiresharkcurl(MacOS)traceroute: This lab uses “traceroute” to find the router level path from your computer to a remote Internet host. traceroute is a standard command-line utility for discovering the Internet paths that your computer uses. It i…...

编程日记 2025/5/14 13:13:31

【05】Selenium+Python 两种文件上传方式（AutoIt）

上传文件的两种方式一、input标签上传文件可以用send_keys方法直接上传文件示例代码 input标签上传文件import time from selenium import webdriver from chromedriver_py import binary_path # this will get you the path variable from selenium.webdriver.common.by i…...

编程日记 2025/4/30 8:20:56

《构建 C++分布式计算框架：赋能人工智能模型并行训练》

在人工智能迅猛发展的今天，模型训练所需的计算资源呈指数级增长。为了高效地支持人工智能模型在多节点、多 GPU/CPU 集群上的并行训练，基于 C构建分布式计算框架成为了关键之举。一、分布式计算框架的核心意义随着人工智能模型复杂度的不断攀升&…...

编程日记 2025/5/14 18:19:23

分支定价算法Branch and price

分支定价算法是进阶版的列生成算法，是用来专门求解整数规划问题的。目录 1.整数规划与线性规划的关系 2.限制主问题（RLMP）求得整数解 3.B&P用法：以VRPTW为例列生成是求解线性规划问题的算法，通过不断往限制主…...

编程日记 2025/5/11 15:52:58

【信息系统项目管理师】第5章：信息系统工程考点梳理

文章目录 5.1 软件工程5.1.1 架构设计1、软件架构风格2、软件架构评估 5.1.2 需求分析1、需求的层次2、需求过程（重点）3、UML事务、关系和视图4、面向对象分析 5.1.3 软件设计1、结构化设计2、面向对象设计3、设计模式 5.1.4 软件实现1、软件配置管理2、…...

编程日记 2025/5/10 7:36:31

kdump调试分析（适用于麒麟，ubuntu等OS）

1. kdump基本原理 1.1 内核崩溃处理机制当 Linux 系统内核发生崩溃时，通常会触发 panic，系统停止正常运行。Kdump 在这种情况下：使用一个备用的内核（称为 crash kernel）来启动最小化的环境。从崩溃的主内核中复制内存内容（转储文件）。将转储文件保存到预定义的存储位…...

编程日记 2025/5/10 3:13:16

Ubuntu在NVME硬盘使用Systemback安装记录

问题使用Systemback重装系统找不到NVME硬盘。 0.使用Systemback制作iso后，制作启动盘 1.插入启动盘进入live mode模式 2.安装gparted sudo apt-get update sudo apt-get install gparted3.使用gparted对待分区硬盘进行分区 gparted按照你希望的分区方式分区即…...

编程日记 2025/5/11 20:17:26

C++多态的实现原理

【欢迎关注编码小哥，学习更多实用的编程方法和技巧】 1、类的继承子类对象在创建时会首先调用父类的构造函数父类构造函数执行结束后，执行子类的构造函数当父类的构造函数有参数时，需要在子类的初始化列表中显式调用 Child(int i) : …...

编程日记 2025/5/6 4:20:03

com.github.gavlyukovskiy依赖是做什么的呢？

p6spy-spring-boot-starter 是一个Spring Boot的starter，用于集成P6Spy库。P6Spy是一个开源的数据库连接池代理工具，它可以拦截和记录所有的SQL语句及其执行时间，从而帮助开发者进行SQL性能分析和调试。功能概述 SQL日志记录： P…...

编程日记 2025/5/9 20:08:23

QChart数据可视化

目录一、QChart基本介绍 1.1 QChart基本概念与用途 1.2 主要类的介绍 1.2.1 QChartView类 1.2.2 QChart类 1.2.3QAbstractSeries类 1.2.4 QAbstractAxis类 1.2.5 QLegendMarker 二、与图表交互 1. 动态绘制数据 2. 深入数据 3. 缩放和滚动 4. 鼠标悬停三、主题 …...

编程日记 2025/5/10 17:19:03

离线安装 Docker-IO：详细步骤指南

离线安装 Docker-IO：详细步骤指南一、准备工作1.1 下载 Docker 离线安装包1.2 准备安装环境1.3 配置防火墙和 SELinux（可选）二、上传和解压离线安装包2.1 上传安装包2.2 解压安装包三、安装 Docker-IO3.1 移动 Docker 文件到系统目录3.2 配置 Docker 服务3.3 赋予服务文件执…...

编程日记 2025/5/15 0:14:54

梯度爆炸与消失

梯度爆炸和梯度消失一、概念解析 （一）梯度爆炸定义在深度神经网络训练的反向传播过程中，梯度爆炸是指梯度的值过大的现象。这会使模型的参数更新出现异常。产生原因深层网络与链式法则：深度神经网络按链式法则计算某层权重…...

编程日记 2025/4/25 6:23:26

动捕动作捕捉学习笔记

2024.11.28 实时动作捕捉 ThreeDPoseTracker VRMLiveViewer 实现虚拟主播跳舞自由_哔哩哔哩_bilibili blender 手工操作，不能渲染到原视频【快速有效】三分钟学会，通过blender把网上视频武术动作捕捉绑定到3D角色上,需要使用Auto-rig Pro(ARP&#xf…...

编程日记 2025/5/12 11:37:03

spark3.x之后时间格式数据偶发报错org.apache.spark.SparkUpgradeException

3.x之后如果你去处理2.x生成的时间字符串数据，很容易遇到一个问题 Error operating ExecuteStatement: org.apache.spark.SparkUpgradeException: You may get a different result due to the upgrading of Spark 3.0: Fail to parse 20200725__cb90fcc3_8006_46…...

编程日记 2025/5/10 4:27:14

计算机网络（二）

ip地址：11010010：01011110:00100100:00010100 子网掩码:11111111:11111111:11111111:11000000 and ：11010010：01011110：00100100：00000000 210.94.36.0的下一站为R1 因为255为11111111 192为&#xff…...

编程日记 2025/5/10 20:14:09

如何在Spark中使用gbdt模型分布式预测

这目录 1 训练gbdt模型2 第三方包python环境打包3 Spark中使用gbdt模型3.1 spark配置文件3.2 主函数main.py 4 spark任务提交 1 训练gbdt模型我们可以基于lightgbm快速的训练一个gbdt模型，训练相对比较简单，只要把训练样本处理好，几行代码可…...

编程日记 2025/5/10 4:00:31

llamaindex实战-ChatEngine-ReAct Agent模式

概述 ReAct 是一种基于Agent的聊天模式，构建在数据查询引擎之上。对于每次聊天交互，代理都会进入一个 ReAct 循环： 首先决定是否使用查询引擎工具并提出适当的输入 （可选）使用查询引擎工具并观察其输出决定是否重复…...

编程日记 2025/5/12 12:57:40

关于音频 DSP 的接口种类以及其应用场景介绍

在音频系统中，DSP（数字信号处理器）扮演着重要角色，通常会通过不同的接口与音频系统中的其他组件（如功放、扬声器、音频源等）进行连接。以汽车应用场景为例，以下是一些常见的接口类型分类及其介绍…...

编程日记 2025/5/14 10:08:30

DLL中的inline static成员变量：Windows开发中的常见陷阱

在Windows平台进行C开发时，DLL（动态链接库）是一个非常重要的概念。它让我们能够实现代码的模块化和动态加载，提高了程序的灵活性和维护性。然而，当我们在DLL中使用C17引入的inline static成员变量时，可能会…...

编程日记 2025/5/10 1:21:19

7. 现代卷积神经网络

文章目录 7.1. 深度卷积神经网络（AlexNet）7.2. 使用块的网络（VGG）7.3. 网络中的网络（NiN）7.4. 含并行连结的网络（GoogLeNet）7.5. 批量规范化7.5.1. 训练深层网络7.5.2. 批量规范化层…...

编程日记 2025/5/4 9:27:49

软件测试丨Pytest生命周期与数据驱动

Pytest的生命周期概述 Pytest 是一个强大的测试框架，提供了丰富的特性来简化测试执行。它的生命周期包括多个阶段，涉及从准备测试、执行测试到报告结果的完整流程。因此，理解Pytest的生命周期将帮助我们更好地设计和管理测试用例。开始阶段…...

编程日记 2025/5/11 22:20:56

Python 网页控制自动化 getEdgeDriver

透过python 使用 edge 执行自动化时，原来的代码出现报错了执行报错啦：message info 如下显示 HTTPSConnectionPool(hostmsedgedriver.azureedge.net, port443): Max retries exceeded with url: /130.0.2849/edgedriver_win64.zip (Caused by NewConn…...

编程日记 2025/5/10 0:51:18

白鹿 Hands-on：消除冷启动——基于 Amazon Lambda SnapStart 轻松打造 Serverless Web 应用（二）

文章目录前言一、前文回顾二、在 Lambda 上运行2.1、查看 Amazon SAM template2.2、编译和部署到 Amazon Lambda2.3、功能测试与验证三、对比 Snapstart 效果四、资源清理五、实验总结总结前言在这个环节中，我们将延续《白鹿 Hands-on：消除冷启动——…...

编程日记 2025/5/12 2:13:16

pandas read_csv读取中文内容文件报错UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte

先用如下代码检查编码格式 import chardet# 检测文件编码 with open("data.csv", "rb") as f:result chardet.detect(f.read())print(result["encoding"]) # 打印检测到的编码我检查后我的文件编码格式是ISO-8859-1，因此读取文件时…...

编程日记 2025/5/12 23:24:23

LoRA微调原理代码实践

LoRA（Low-Rank Adaptation）作为一种用于微调 LLM（大语言模型）的流行技术，最初由来自微软的研究人员在论文《 LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS 》中提出。不同于其他技术，LoRA 不是调整…...

编程日记 2025/5/14 2:28:12

数据结构--树二叉树顺序结构存储的二叉树（堆）

前言前面我们学习了顺序表、链表、栈和队列，这些都是线性的数据结构。今天我们要来学习一种非线性的数据结构——树。树的概念及结构树的概念树是一种非线性的数据结构，是由n（n≥0）个有效结点组成的一个具有层次关系的集合…...

编程日记 2025/5/13 3:11:45

mongodb shard 分片集群基础概念

目录一、shard 集群二、Config Server 1、config.shards 2、config.database 3、config.collection 4、config.chunks 5、config.settings 6、其他三、shard机制 1、Primary Shard 2、Shard Key 2.1 范围分片 2.2 哈希分片 2.3 Shard Key重定义 2.4 版本约束…...

编程日记 2025/5/14 1:00:52

Streamlit 应用从本地部署到服务器并进行访问

目录 1 部署 Streamlit 应用到服务器2 配置服务器允许远程访问3 使用反向代理4 使用 HTTPS5 总结 1 部署 Streamlit 应用到服务器 1 选择一个服务器平台首先，你需要选择一个服务器平台来部署你的 Streamlit 应用。常见的选择包括： 云服务器&#xff1a…...

编程日记 2025/5/12 13:01:12