three.js官方案例webgpu_reflection.html学习记录

目录

​1 判断浏览器是否支持

2 THREE.DirectionalLight

2.1DirectionalLightShadow

3 Texture

3.1 .wrapS

3.2 .wrapT

3.3  .colorSpace

4 创建地面

5 WebGPURenderer

6 OrbitControls 控制器

7 屏幕后处理

	import * as THREE from 'three';import { MeshPhongNodeMaterial, color, pass, reflector, normalWorld, texture, uv, viewportTopLeft } from 'three/nodes';//引入一些类import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';//引入加载器import WebGPU from 'three/addons/capabilities/WebGPU.js';//引入WebGPUimport WebGL from 'three/addons/capabilities/WebGL.js';//引入WebGLimport WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';//WebGPU渲染import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';//后处理import { OrbitControls } from 'three/addons/controls/OrbitControls.js';//控制器import Stats from 'three/addons/libs/stats.module.js';//性能检测let camera, scene, renderer;//相机 场景 渲染器let model, mixer, clock;//模型 动画混合器  时钟let postProcessing;//后期处理let controls;//控制器let stats;//性能检测

1 判断浏览器是否支持

if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {document.body.appendChild( WebGPU.getErrorMessage() );throw new Error( 'No WebGPU or WebGL2 support' );//不支持}

2 THREE.DirectionalLight

.shadow : DirectionalLightShadow

DirectionalLightShadow 对象，用于计算该平行光产生的阴影。

2.1DirectionalLightShadow

        这是用于在DirectionalLights内部计算阴影
与其他阴影类不同，它是使用OrthographicCamera来计算阴影，而不是PerspectiveCamera。这是因为来自DirectionalLight的光线是平行的。

 //模拟太阳const sunLight = new THREE.DirectionalLight( 0xFFE499, 5 );//.castShadow : Boolean  此属性设置为 true 灯光将投射阴影。注意：这样做的代价比较高，需要通过调整让阴影看起来正确。 查看 DirectionalLightShadow 了解详细信息。 默认值为 false。sunLight.castShadow = true;//.shadow DirectionalLightShadow 对象，用于计算该平行光产生的阴影//.camera : Camera  在光的世界里。这用于生成场景的深度图;从光的角度来看，其他物体背后的物体将处于阴影中sunLight.shadow.camera.near = .1;//摄像机视锥体近端面sunLight.shadow.camera.far = 5;//摄像机视锥体远端面sunLight.shadow.camera.right = 2;sunLight.shadow.camera.left = - 2;//摄像机视锥体左侧面sunLight.shadow.camera.top = 2;//摄像机视锥体上侧面sunLight.shadow.camera.bottom = - 2;// .mapSize : Vector2 一个Vector2定义阴影贴图的宽度和高度。
//较高的值会以计算时间为代价提供更好的阴影质量。值必须是2的幂，直到给定设备的WebGLRenderer.capabilities.maxTextureSize， 虽然宽度和高度不必相同（例如，（512,1024）有效）。 默认值为（512,512）。sunLight.shadow.mapSize.width = 2048;sunLight.shadow.mapSize.height = 2048;//.bias : Float
//阴影贴图偏差，在确定曲面是否在阴影中时，从标准化深度添加或减去多少。
//默认值为0.此处非常小的调整（大约0.0001）可能有助于减少阴影中的伪影sunLight.shadow.bias = - 0.001;//.position : Vector3   假如这个值设置为 Object3D.DEFAULT_UP (0, 1, 0)，光线将会从上往下照射sunLight.position.set( .5, 3, .5 );

半球光（HemisphereLight）

光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。半球光不能投射阴影。

3 Texture

包裹模式

THREE.RepeatWrapping THREE.ClampToEdgeWrapping THREE.MirroredRepeatWrapping

这些常量定义了纹理贴图的 wrapS 和 wrapT 属性，定义了水平和垂直方向上纹理的包裹方式。

使用RepeatWrapping，纹理将简单地重复到无穷大。 With RepeatWrapping the texture will simply repeat to infinity.

ClampToEdgeWrapping是默认值，纹理中的最后一个像素将延伸到网格的边缘。

使用MirroredRepeatWrapping， 纹理将重复到无穷大，在每次重复时将进行镜像。

.colorSpace

默认值为THREE.NoColorSpace。 请参阅texture constants来了解其他格式的详细信息

3.1 .wrapS

        这个值定义了纹理贴图在水平方向上将如何包裹，在UV映射中对应于U。

默认值是THREE.ClampToEdgeWrapping，即纹理边缘将被推到外部边缘的纹素。 其它的两个选项分别是THREE.RepeatWrapping和THREE.MirroredRepeatWrapping。 请参阅texture constants来了解详细信息。

3.2 .wrapT

        这个值定义了纹理贴图在垂直方向上将如何包裹，在UV映射中对应于V。

可以使用与 .wrapS : number相同的选项。

请注意：纹理中图像的平铺，仅有当图像大小（以像素为单位）为2的幂（2、4、8、16、32、64、128、256、512、1024、2048、……）时才起作用。 宽度、高度无需相等，但每个维度的长度必须都是2的幂。 这是WebGL中的限制，不是由three.js所限制的。

使用RepeatWrapping，纹理将简单地重复到无穷大  使用MirroredRepeatWrapping， 纹理将重复到无穷大，在每次重复时

3.3  .colorSpace

 色彩空间

THREE.NoColorSpace = "" THREE.SRGBColorSpace = "srgb" THREE.LinearSRGBColorSpace = "srgb-linear"

      用于定义纹理的色彩空间（以及渲染器的输出色彩空间）。
如果在材质已使用纹理后更改了颜色空间类型， 您需要将 Material.needsUpdate 设置为使材料重新编译。true

	const textureLoader = new THREE.TextureLoader();//图片下载const floorColor = textureLoader.load( '../three.js-r163/examples/textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );//地面//这个值定义了纹理贴图在水平方向上将如何包裹，在UV映射中对应于U。
//默认值是THREE.ClampToEdgeWrapping，即纹理边缘将被推到外部边缘的纹素。 其它的两个选项分别是THREE.RepeatWrapping和THREE.MirroredRepeatWrapping。 请参阅texture constants来了解详细信息。floorColor.wrapS = THREE.RepeatWrapping;//这个值定义了纹理贴图在垂直方向上将如何包裹，在UV映射中对应于V。
//可以使用与 .wrapS : number相同的选项。
//请注意：纹理中图像的平铺，仅有当图像大小（以像素为单位）为2的幂（2、4、8、16、32、64、128、256、512、1024、2048、……）时才起作用。 宽度、高度无需相等，但每个维度的长度必须都是2的幂。 这是WebGL中的限制，不是由three.js所限制的。floorColor.wrapT = THREE.RepeatWrapping;//使用RepeatWrapping，纹理将简单地重复到无穷大  使用MirroredRepeatWrapping， 纹理将重复到无穷大，在每次重复时将进行镜像//色彩空间//默认值为THREE.NoColorSpace。 请参阅texture constants来了解其他格式的详细信息floorColor.colorSpace = THREE.SRGBColorSpace;

4 创建地面

这部分没看太懂，后面再补充吧，先就这么跟着用吧。

MeshPhongNodeMaterial

uv

   texture

TextureNode.js

5 WebGPURenderer

antialias - 是否执行抗锯齿。默认为false

.setAnimationLoop ( callback : Function ) : undefined

callback — 每个可用帧都会调用的函数。 如果传入‘null’,所有正在进行的动画都会停止。

可用来代替requestAnimationFrame的内置函数. 对于WebXR项目，必须使用此函数。

renderer = new WebGPURenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );//setPixelRatio 设置设备像素比。通常用于避免HiDPI设备上绘图模糊//setSize 将输出canvas的大小调整为(width, height)并考虑设备像素比，且将视口从(0, 0)开始调整到适合大小 将updateStyle设置为false以阻止对canvas的样式做任何改变。renderer.setSize( window.innerWidth, window.innerHeight );renderer.setAnimationLoop( animate );document.body.appendChild( renderer.domElement );

6 OrbitControls 控制器

  //控制器controls = new OrbitControls( camera, renderer.domElement );controls.minDistance = 1;//你能够将相机向内移动多少controls.maxDistance = 10;//你能够将相机向外移动多少controls.maxPolarAngle = Math.PI / 2;//你能够垂直旋转的角度的下限，范围是0到Math.PI，其默认值为0controls.autoRotate = true;//将其设为true，以自动围绕目标旋转。请注意，如果它被启用，你必须在你的动画循环里调用.update()controls.autoRotateSpeed = 1;//当.autoRotate为true时，围绕目标旋转的速度将有多快，默认值为2.0，相当于在60fps时每旋转一周需要30秒controls.target.set( 0, .5, 0 );//控制器的焦点，.object的轨道围绕它运行。 它可以在任何时候被手动更新，以更改控制器的焦点controls.update();//更新控制器。必须在摄像机的变换发生任何手动改变后调用

7 屏幕后处理

这部分没看太懂，后面再补充吧，先就这么跟着用吧。

后处理的脚本注掉，整个屏幕变黑。

	// post-processing 屏幕后处理const scenePass = pass( scene, camera );const scenePassColor = scenePass.getTextureNode();//颜色const scenePassDepth = scenePass.getDepthNode().remapClamp( .3, .5 ); //深度const scenePassColorBlurred = scenePassColor.gaussianBlur();scenePassColorBlurred.directionNode = scenePassDepth;const vignet = viewportTopLeft.distance( .5 ).mul( 1.35 ).clamp().oneMinus();postProcessing = new PostProcessing( renderer );//后处理postProcessing.outputNode = scenePassColorBlurred.mul( vignet );

7 全部脚本

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgpu - reflection</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="../three.js-r163/examples/main.css"></head><body><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - reflection</div><script type="importmap">{"imports": {"three": "../three.js-r163/build/three.module.js","three/addons/": "../three.js-r163/examples/jsm/","three/nodes": "../three.js-r163/examples/jsm/nodes/Nodes.js"}}</script><script type="module">import * as THREE from 'three';import { MeshPhongNodeMaterial, color, pass, reflector, normalWorld, texture, uv, viewportTopLeft } from 'three/nodes';//引入一些类import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';//引入加载器import WebGPU from 'three/addons/capabilities/WebGPU.js';//引入WebGPUimport WebGL from 'three/addons/capabilities/WebGL.js';//引入WebGLimport WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';//WebGPU渲染import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';//后处理import { OrbitControls } from 'three/addons/controls/OrbitControls.js';//控制器import Stats from 'three/addons/libs/stats.module.js';//性能检测let camera, scene, renderer;//相机 场景 渲染器let model, mixer, clock;//模型 动画混合器  时钟let postProcessing;//后期处理let controls;//控制器let stats;//性能检测init();function init() {if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {document.body.appendChild( WebGPU.getErrorMessage() );throw new Error( 'No WebGPU or WebGL2 support' );//不支持}//创建相机camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 30 );camera.position.set( 2, 2.5, 3 );//场景scene = new THREE.Scene();scene.fog = new THREE.Fog( 0x0487e2, 7, 25 );//雾scene.backgroundNode = normalWorld.y.mix( color( 0x0487e2 ), color( 0x0066ff ) );camera.lookAt( 0, 1, 0 );//模拟太阳const sunLight = new THREE.DirectionalLight( 0xFFE499, 5 );//.castShadow : Boolean  此属性设置为 true 灯光将投射阴影。注意：这样做的代价比较高，需要通过调整让阴影看起来正确。 查看 DirectionalLightShadow 了解详细信息。 默认值为 false。sunLight.castShadow = true;//.shadow DirectionalLightShadow 对象，用于计算该平行光产生的阴影//.camera : Camera  在光的世界里。这用于生成场景的深度图;从光的角度来看，其他物体背后的物体将处于阴影中sunLight.shadow.camera.near = .1;//摄像机视锥体近端面sunLight.shadow.camera.far = 5;//摄像机视锥体远端面sunLight.shadow.camera.right = 2;sunLight.shadow.camera.left = - 2;//摄像机视锥体左侧面sunLight.shadow.camera.top = 2;//摄像机视锥体上侧面sunLight.shadow.camera.bottom = - 2;// .mapSize : Vector2 一个Vector2定义阴影贴图的宽度和高度。
//较高的值会以计算时间为代价提供更好的阴影质量。值必须是2的幂，直到给定设备的WebGLRenderer.capabilities.maxTextureSize， 虽然宽度和高度不必相同（例如，（512,1024）有效）。 默认值为（512,512）。sunLight.shadow.mapSize.width = 2048;sunLight.shadow.mapSize.height = 2048;//.bias : Float
//阴影贴图偏差，在确定曲面是否在阴影中时，从标准化深度添加或减去多少。
//默认值为0.此处非常小的调整（大约0.0001）可能有助于减少阴影中的伪影sunLight.shadow.bias = - 0.001;//.position : Vector3   假如这个值设置为 Object3D.DEFAULT_UP (0, 1, 0)，光线将会从上往下照射sunLight.position.set( .5, 3, .5 );//半球光const waterAmbientLight = new THREE.HemisphereLight( 0x333366, 0x74ccf4, 5 );const skyAmbientLight = new THREE.HemisphereLight( 0x74ccf4, 0, 1 );scene.add( sunLight );scene.add( skyAmbientLight );scene.add( waterAmbientLight );clock = new THREE.Clock();//// animated modelconst loader = new GLTFLoader();loader.load( '../three.js-r163/examples/models/gltf/Michelle.glb', function ( gltf ) {model = gltf.scene;model.children[ 0 ].children[ 0 ].castShadow = true;//mixer = new THREE.AnimationMixer( model );//动画混合器console.log(gltf.animations);const action = mixer.clipAction( gltf.animations[ 0 ] );action.play();scene.add( model );} );// texturesconst textureLoader = new THREE.TextureLoader();//图片下载const floorColor = textureLoader.load( '../three.js-r163/examples/textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );//地面//这个值定义了纹理贴图在水平方向上将如何包裹，在UV映射中对应于U。
//默认值是THREE.ClampToEdgeWrapping，即纹理边缘将被推到外部边缘的纹素。 其它的两个选项分别是THREE.RepeatWrapping和THREE.MirroredRepeatWrapping。 请参阅texture constants来了解详细信息。floorColor.wrapS = THREE.RepeatWrapping;//这个值定义了纹理贴图在垂直方向上将如何包裹，在UV映射中对应于V。
//可以使用与 .wrapS : number相同的选项。
//请注意：纹理中图像的平铺，仅有当图像大小（以像素为单位）为2的幂（2、4、8、16、32、64、128、256、512、1024、2048、……）时才起作用。 宽度、高度无需相等，但每个维度的长度必须都是2的幂。 这是WebGL中的限制，不是由three.js所限制的。floorColor.wrapT = THREE.RepeatWrapping;//使用RepeatWrapping，纹理将简单地重复到无穷大  使用MirroredRepeatWrapping， 纹理将重复到无穷大，在每次重复时将进行镜像//色彩空间//默认值为THREE.NoColorSpace。 请参阅texture constants来了解其他格式的详细信息floorColor.colorSpace = THREE.SRGBColorSpace;const floorNormal = textureLoader.load( '../three.js-r163/examples/textures/floors/FloorsCheckerboard_S_Normal.jpg' );floorNormal.wrapS = THREE.RepeatWrapping;floorNormal.wrapT = THREE.RepeatWrapping;// floorconsole.log(uv());//UVNodeconst floorUV = uv().mul( 15 );console.log(floorUV);//OperatorNodeconst floorNormalOffset = texture( floorNormal, floorUV ).xy.mul( 2 ).sub( 1 ).mul( .02 );//反射 const reflection = reflector( { resolution: 0.5 } ); // 0.5 is half of the rendering view  0.5是渲染视图的一半reflection.target.rotateX( - Math.PI / 2 );reflection.uvNode = reflection.uvNode.add( floorNormalOffset );scene.add( reflection.target );//地面材质const floorMaterial = new MeshPhongNodeMaterial();floorMaterial.colorNode = texture( floorColor, floorUV ).add( reflection );const floor = new THREE.Mesh( new THREE.BoxGeometry( 50, .001, 50 ), floorMaterial );floor.position.set( 0, 0, 0 );scene.add( floor );// renderer  渲染器renderer = new WebGPURenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );//setPixelRatio 设置设备像素比。通常用于避免HiDPI设备上绘图模糊//setSize 将输出canvas的大小调整为(width, height)并考虑设备像素比，且将视口从(0, 0)开始调整到适合大小 将updateStyle设置为false以阻止对canvas的样式做任何改变。renderer.setSize( window.innerWidth, window.innerHeight );renderer.setAnimationLoop( animate );document.body.appendChild( renderer.domElement );//性能检测stats = new Stats();document.body.appendChild( stats.dom );//控制器controls = new OrbitControls( camera, renderer.domElement );controls.minDistance = 1;//你能够将相机向内移动多少controls.maxDistance = 10;//你能够将相机向外移动多少controls.maxPolarAngle = Math.PI / 2;//你能够垂直旋转的角度的下限，范围是0到Math.PI，其默认值为0controls.autoRotate = true;//将其设为true，以自动围绕目标旋转。请注意，如果它被启用，你必须在你的动画循环里调用.update()controls.autoRotateSpeed = 1;//当.autoRotate为true时，围绕目标旋转的速度将有多快，默认值为2.0，相当于在60fps时每旋转一周需要30秒controls.target.set( 0, .5, 0 );//控制器的焦点，.object的轨道围绕它运行。 它可以在任何时候被手动更新，以更改控制器的焦点controls.update();//更新控制器。必须在摄像机的变换发生任何手动改变后调用// post-processing 屏幕后处理const scenePass = pass( scene, camera );const scenePassColor = scenePass.getTextureNode();//颜色const scenePassDepth = scenePass.getDepthNode().remapClamp( .3, .5 ); //深度const scenePassColorBlurred = scenePassColor.gaussianBlur();scenePassColorBlurred.directionNode = scenePassDepth;const vignet = viewportTopLeft.distance( .5 ).mul( 1.35 ).clamp().oneMinus();postProcessing = new PostProcessing( renderer );//后处理postProcessing.outputNode = scenePassColorBlurred.mul( vignet );//window.addEventListener( 'resize', onWindowResize );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {stats.update();controls.update();const delta = clock.getDelta();if ( model ) {mixer.update( delta );//动画更新}postProcessing.render();//后期渲染}</script></body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Ubuntu使用Nginx部署uniapp打包的项目

Ubuntu使用Nginx部署uniapp打包的项目

使用uniapp导出web项目&#xff1a; 安装&#xff1a; sudo apt install nginx解压web.zip unzip web.zip移动到/var/www/html目录下&#xff1a; sudo cp -r ~/web/h5/ /var/www/html/重启Nginx&#xff1a; sudo service nginx restart浏览器访问&#xff1a;http://19…
阅读更多...
基于FPGA的千兆以太网设计（1）----大白话解释什么是以太网

基于FPGA的千兆以太网设计（1）----大白话解释什么是以太网

1、什么是以太网？ 还记得初学以太网的时候，我就被一大堆专业名词给整懵了：什么以太网，互联网，MAC，IP，局域网，万维网，网络分层模型等等等等。慢着！我学的不是以太网吗？怎么出来这么一大堆东西？ 啊！以太网究竟是什么？别急，我接下来就尽量用通俗的大白话来给你解释…
阅读更多...
AURORA仿真

AURORA仿真

AURORA 仿真验证 定义&#xff1a;AURORA是一种高速串行通信协议&#xff0c;通常用于在数字信号处理系统和其他电子设备之间传输数据。它提供了一种高效的方式来传输大量数据&#xff0c;通常用于需要高带宽和低延迟的应用中。AURORA协议通常由Xilinx公司的FPGA器件支持&#…
阅读更多...
Linux C | 管道open打开方式

Linux C | 管道open打开方式

Linux C | 管道open打开方式 1.参考 1. 管道 2.现象 是的&#xff0c;这段代码在调用 open(AUDIOIN_FIFO, O_RDONLY) 时可能会被阻塞。原因是 FIFO&#xff08;命名管道&#xff09;在以只读模式打开时&#xff0c;如果没有其他进程以写模式打开该 FIFO&#xff0c;open 调用将…
阅读更多...
Argo CD入门、实战指南

Argo CD入门、实战指南

1. Argo CD概述 1.1 什么是 Argo CD Argo CD 是针对 Kubernetes 的声明式 GitOps 持续交付工具。 1.2 为什么选择 Argo CD 应用程序定义、配置和环境应具有声明性并受版本控制。应用程序部署和生命周期管理应自动化、可审计且易于理解。 2. Argo CD基础知识 在有效使用 Ar…
阅读更多...
MySQL-对数据库和表的DDL命令

MySQL-对数据库和表的DDL命令

文章目录 一、什么是DDL操作二、数据库编码集和数据库校验集三、使用步骤对数据库的增删查改1.创建数据库2.进入数据库3.显示数据库4.修改数据库mysqldump 5.删除数据库 对表的增删查改1.添加/创建表2.插入表内容3.查看表查看所有表查看表结构查看表内容 4.修改表修改表的名字修…
阅读更多...
299k stars利用Public APIs提升开发效率：探索APILayer提供的开源资源

299k stars利用Public APIs提升开发效率：探索APILayer提供的开源资源

299k stars利用Public APIs提升开发效率&#xff1a;探索APILayer提供的开源资源 在现代软件开发中&#xff0c;API&#xff08;应用程序接口&#xff09;是实现应用间通信和功能扩展的关键工具。公共API&#xff08;Public APIs&#xff09;则为开发者提供了宝贵的资源&#…
阅读更多...
微积分-导数7（关联变化率）

微积分-导数7（关联变化率）

例一 空气被充入一个球形气球中&#xff0c;使其体积以每秒100立方厘米的速度增加。当气球的直径为50厘米时&#xff0c;气球半径的增加速度是多少&#xff1f; 解答&#xff1a;球体的体积公式为 V 4 3 π r 3 V \frac{4}{3}\pi r^3 V34​πr3 为了使用给定的信息&#x…
阅读更多...
网络（二）——套接字编程

网络（二）——套接字编程

文章目录 理解源IP地址和目的IP地址认识端口号认识TCP/UDP协议网络字节序socket编程接口socket 常见APIsockaddr结构 理解源IP地址和目的IP地址 在IP数据包头部中, 有两个IP地址, 分别叫做源IP地址, 和目的IP地址&#xff1b; 源IP即发送方的地址&#xff0c;目的IP即接受方的…
阅读更多...
通信协议 | 一文玩转UART协议就够了

通信协议 | 一文玩转UART协议就够了

文章目录 协议基础1、UART简介2、UART特性3、UART协议帧3.1、起始位3.2、数据位3.3、奇偶校验位3.4、停止位 4、UART通信步骤 最详细的UART通讯协议分析Verilog代码实现UART接口模块驱动 协议基础 1、UART简介 UART&#xff08;Universal Asynchronous Receiver/Transmitter&…
阅读更多...
express

express

文章目录 🟢 Express⭐️ 1.初始Express✨安装✨使用Express 搭建一台服务器⭐️2.Express-基本路由✨1.使用字符串模式的路由路径示例：✨2.使用正则表达式的路由路径示例：✨3.中间件浅试(demo)⭐️3.Express-中间件✨1.应用级中间件✨2.路由级中间件✨3.错误处理中间件✨4…
阅读更多...
【pytorch】手写数字识别

【pytorch】手写数字识别

https://blog.csdn.net/qq_45588019/article/details/120935828 基本均参考该博客 《深度学习原理Pytorch实战》 初步处理 导包 import torch import numpy as np from matplotlib import pyplot as plt from torch.utils.data import DataLoader from torchvision import tr…
阅读更多...
同时用到，网页，java程序，数据库的web小应用

同时用到，网页，java程序，数据库的web小应用

具体实现功能&#xff1a;通过网页传输添加用户的请求&#xff0c;需要通过JDBC来向 MySql 添加一个用户数据 第一步&#xff0c;部署所有需要用到的工具 IDEA(2021.1),Tomcat(9),谷歌浏览器&#xff0c;MySql,jdk(17) 第二步&#xff0c;创建java项目&#xff0c;提前部署数…
阅读更多...
《梦醒蝶飞：释放Excel函数与公式的力量》12.2 DAVERAGE函数

《梦醒蝶飞：释放Excel函数与公式的力量》12.2 DAVERAGE函数

第12章&#xff1a;数据库函数 第二节 12.2 DAVERAGE函数 12.2.1 简介 DAVERAGE函数是Excel中的一个数据库函数&#xff0c;用于计算数据库或数据表中特定条件下某字段的平均值。DAVERAGE函数在处理大规模数据、数据筛选和分析时非常有用。 12.2.2 语法 DAVERAGE(database…
阅读更多...
Kithara与OpenCV （一）

Kithara与OpenCV （一）

Kithara使用 OpenCV 库 目录 Kithara使用 OpenCV 库简介需求和支持的环境构建 OpenCV 库使用 CMake 进行配置以与 Kithara 一起工作 使用 OpenCV 库设置项目运行 OpenCV 代码图像采集和 OpenCV自动并行化限制和局限性1.系统建议2.实时限制3.不支持的功能和缺失的功能4.显示 Ope…
阅读更多...
排序-java（详解）

排序-java（详解）

一&#xff0c;分类 主要的排序大致分为以下几类&#xff1a; 1&#xff0c;插入排序&#xff0c;又分为直接插入排序和希尔排序 2&#xff0c;选择排序&#xff0c;又分为选择排序和堆排序 3&#xff0c;交换排序&#xff0c;又分为冒泡排序和快速排序 4&#xff0c;归并…
阅读更多...
219.贪心算法：柠檬水找零（力扣）

219.贪心算法：柠檬水找零（力扣）

代码解决 class Solution { public:bool lemonadeChange(vector<int>& bills) {int num50, num100; // 初始化5美元和10美元的计数器for(int i0; i < bills.size(); i) // 遍历所有账单{if(bills[i]5) // 如果账单是5美元{num5; // 增加5美元的计数continue; // …
阅读更多...
手撸俄罗斯方块（五）——游戏主题

手撸俄罗斯方块（五）——游戏主题

手撸俄罗斯方块&#xff08;五&#xff09;——游戏主题 当确定游戏载体&#xff08;如控制台&#xff09;后&#xff0c;界面将呈现出来。但是游戏的背景色、方块的颜色、方框颜色都应该支持扩展。 当前游戏也是如此&#xff0c;引入了 Theme 的概念&#xff0c;支持主题的扩…
阅读更多...
ubuntu使用kubeadm搭建k8s集群

ubuntu使用kubeadm搭建k8s集群

一、卸载k8s kubeadm reset -f modprobe -r ipip lsmod rm -rf ~/.kube/# 自己选择性删除 坑点哦 rm -rf /etc/kubernetes/ rm -rf /etc/systemd/system/kubelet.service.d rm -rf /etc/systemd/system/kubelet.service rm -rf /usr/bin/kube* rm -rf /etc/cni rm -rf /opt/cn…
阅读更多...
【常见开源库的二次开发】一文学懂CJSON

【常见开源库的二次开发】一文学懂CJSON

简介&#xff1a; JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式。它基于JavaScript的一个子集&#xff0c;但是JSON是独立于语言的&#xff0c;这意味着尽管JSON是由JavaScript语法衍生出来的&#xff0c;它可以被任何编程语言读取和生成…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发