03-ArcGIS For JavaScript结合ThreeJS功能

ArcGIS For JavaScript结合ThreeJS功能

  • 概述
      • three.js中功能实现
      • externalRenderers（4.28及以下版本）
      • RenderNode（4.29版本）

概述

  ArcGIS For Javacript提供了一些对象可以支持加载webgl上下文信息，这里包括webgl编程的代码及webgl封装的threejs的代码。并且4.29版本之前，ArcGIS For Javacript提供了externalRenderers去实现这些功能，4.29版本则摒弃了externalRenderers对象，新增了RenderNode的对象去加载第三方的渲染平台。
  RenderNode相对于externalRenderers，功能上有了很大的提升。它不仅可以去加载第三方的三维渲染平台（ThreeJS）的功能，还可以对当前SceneView场景中的渲染内容进行后处理操作。
  今天这里只介绍一下externalRenderers和RenderNode如何加载ThreeJS的功能操作。

three.js中功能实现

对于ThreeJS而言，一般基础的元素包含了Scene、Camera、Renderer以及三维对象。
一般步骤如下：

  • 引入three.js
    	<script src="three.min.js">
  • 创建一个场景（Scene），用于放置3D元素。
    	const scene = new THREE.Scene();
  • 创建相机（Camera），通过相机将渲染的结果呈现给观察者。
    	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  • 创建渲染器（Renderer）,渲染器将3D场景呈现为二维的图像，使得屏幕显示3D更真实。
    	//定义一个渲染器Renderconst renderer = new THREE.WebGLRenderer();//设置render的渲染范围renderer.setSize(window.innerWidth, window.innerHeight);//将场景元素添加到body中document.body.appendChild(renderer.domElement);
  • 创建3D对象，这个时候就可以创建一些球、立方体等。
     //定义一个geometry，geometry定义了物体的形状，three有很多种geometryconst geometry = new THREE.BoxGeometry();const material= new THREE.MeshBasicMaterial({color: 0x00ffff});let mesh = new THREE.Mesh(geometry, material);scene.add(mesh);
  • 渲染场景，主要是将视图渲染到屏幕，这步主要为了调用我们前面创建的渲染器。
    	    //定义渲染的动画函数function animate() {//将animate函数添加到requestAnimationFrame，进行循环调用requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;//执行渲染器的渲染函数renderer.render(scene, camera);}//执行渲染函数animate();

完整代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ThreeJs基础知识_Scene</title><!-- <script src="./js/three.js"></script> --><script type="text/javascript" src="../js/threejs/r141/three.min.js"></script><style>body {margin: 0;}</style><!--three的场景主要包括了三个对象，场景Scene，相机Camera和渲染器Render，同时在正常应用的时候还需要包括物体 Object和控制器Contro以及灯光Light。--></head><body><script>const scene = new THREE.Scene();//创建一个场景Scene//定义一个相机Camera( 透视摄像机 )const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);scene.rotation.x = THREE.MathUtils.degToRad(-60);// camera.rotateZ(THREE.MathUtils.degToRad(30));//定义一个渲染器Renderconst renderer = new THREE.WebGLRenderer();//设置render的渲染范围renderer.setSize(window.innerWidth, window.innerHeight);//将场景元素添加到body中document.body.appendChild(renderer.domElement);let geometry = new THREE.CylinderBufferGeometry(1, 0, 2, 4);geometry.rotateX(Math.PI / 2);geometry.computeBoundingSphere();const material = new THREE.MeshBasicMaterial({color: 0x00ff00,transparent: true,opacity: 0.5,});//material定义了物体的材质，简单说就是外观// 长方体作为EdgesGeometry参数创建一个新的几何体const edges = new THREE.EdgesGeometry(geometry);const edgesMaterial = new THREE.LineBasicMaterial({color: 0x00ffff,})const line = new THREE.LineSegments(edges, edgesMaterial);let object3D = new THREE.Object3D();let mesh = new THREE.Mesh(geometry, material);mesh.add(line);object3D.add(mesh);scene.add(object3D);//然后将物体添加到场景中去//定义相机的z坐标，就是相机看的位置，此时要注意一下three中相机坐标系的概念，x横向，z纵向，y是竖直的，后期有兴趣可以慢慢研究three的坐标系camera.position.z = 4;let ambient = new THREE.AmbientLight(0xffffff, 0.5);scene.add(ambient);//定义渲染的动画函数function animate() {//将animate函数添加到requestAnimationFrame，进行循环调用requestAnimationFrame(animate);// cube.rotation.x += 0.01;// cube.rotation.y += 0.01;if (object3D) {let vec = new THREE.Vector3(0, 0, 1);object3D.rotateOnAxis(vec, Math.PI / 300);}//执行渲染器的渲染函数renderer.render(scene, camera);}//执行渲染函数animate();</script>
</body></html>

效果：
在这里插入图片描述

externalRenderers（4.28及以下版本）

  externalRenderer提供了add方法，该方法支持将外部渲染器添加到当前的视图中。外部渲染器由包含一些方法和属性的对象定义的。这样就可以将其他渲染器和ArcGIS的平台融合在一起使用。
在这里插入图片描述
renderer的内容，可以按照ExternalRenderer的对象去定义，ExternalRenderer定义如下：
在这里插入图片描述
我们实例化的时候，就可以按照上面的结构去定义ExternalRenderer对象：
在这里插入图片描述
完成代码如下：
externalRenderClass.js

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ThreeJS+ArcGIS</title><!-- <script type="text/javascript" src="./js/threejs/r109/three.min.js"></script><script type="text/javascript" src="./js/threejs/r109/GLTFLoader.js"></script> --><script type="text/javascript" src="./js/threejs/r141/three.min.js"></script><script src="./externalRenderClass.js"></script><link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.28/"></script><style>html,body,#viewDiv {height: 100%;width: 100%;margin: 0;padding: 0;}</style><script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script><script>window.THREE = THREE;window.GLTFLoader = THREE.GLTFLoader;require(["esri/views/SceneView","esri/Map","esri/layers/TileLayer","esri/views/3d/externalRenderers"], (SceneView, Map, TileLayer, externalRenderers) => {// const baselayer = new TileLayer({//     url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",// });let map = new Map({// layers:[scenelayer]basemap:"satellite"})// map.add(baselayer);let view = new SceneView({map: map,container: 'viewDiv',viewingMode: "local"});// let position = [13529536.50333642, 3626588.0048437016, 1000]view.when(function () {view.goTo({fov: 55,heading: 55.99495193816657,position: {x: 13513809.919879783,y: 3616346.75042186,z: 8574.5211164545,spatialReference: {wkid: 102100}},tilt: 69.0179407311609});})view.on("click",function(){console.log(view.camera);})let dynamicGLTFRender = new externalRenderClass({view,externalRenderers})externalRenderers.add(view, dynamicGLTFRender);window.view = view;// let myExternalRenderer = {//     setup: function (context) {//         // 在外部渲染器添加到视图后执行一次。//         // 你可以使用这个函数来分配所有的静态WebGL资源(着色器，缓冲区等)。//     },//     render: function (context) {//         // 在每一帧执行，绘制几何图形到画布。在这个函数中完成的任务://         // *更新动态资源的状态//         // *根据需要设置WebGL状态//         // *发出WebGL绘制调用//     }// }})</script>
</head><body><div id="viewDiv"></div>
</body></html>

index.html


class externalRenderClass {constructor(options) {this.opts = {externalRenderers: null,}this.opts.externalRenderers = options.externalRenderers;this.view = options.view;this.cube = null;this.mesh = null;}setParams() {this.isStop = !this.isStop;}setup(context) {let THREE = window.THREE;// this.mixer = new THREE.AnimationMixer();this.horseMixer = THREE.AnimationMixer;this.clock = new THREE.Clock();this.horseClock = new THREE.Clock();this.mixer = THREE.AnimationMixer;this.renderer = new THREE.WebGLRenderer({context: context.gl, // 可用于将渲染器附加到已有的渲染环境(RenderingContext)中premultipliedAlpha: false, // renderer是否假设颜色有 premultiplied alpha. 默认为true});this.renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比。通常用于避免HiDPI设备上绘图模糊this.renderer.setViewport(0, 0, this.view.width, this.view.height); // 视口大小设置this.renderer.autoClear = false;this.renderer.autoClearDepth = false;this.renderer.autoClearColor = false;// this.renderer.autoClearStencil = false;let originalSetRenderTarget = this.renderer.setRenderTarget.bind(this.renderer);this.renderer.setRenderTarget = function (target) {originalSetRenderTarget(target);if (target == null) {context.bindRenderTarget();}};this.scene = new THREE.Scene();// setup the cameralet cam = context.camera;this.camera = new THREE.PerspectiveCamera(cam.fovY, cam.aspect, cam.near, cam.far);// 添加坐标轴辅助工具const axesHelper = new THREE.AxesHelper(1);axesHelper.position.copy(1000000, 100000, 100000);this.scene.add(axesHelper);let grid = new THREE.GridHelper(30, 10, 0xf0f0f0, 0xffffff);this.scene.add(grid);// setup scene lightingthis.ambient = new THREE.AmbientLight(0xffffff, 0.5);this.scene.add(this.ambient);let geometry = new THREE.CylinderBufferGeometry(1500, 0, 2000, 4);geometry.rotateX(Math.PI / 2);geometry.computeBoundingSphere();const material = new THREE.MeshBasicMaterial({color: 0x00ff00,transparent: true,opacity: 0.5,});//material定义了物体的材质，简单说就是外观// 长方体作为EdgesGeometry参数创建一个新的几何体const edges = new THREE.EdgesGeometry(geometry);const edgesMaterial = new THREE.LineBasicMaterial({color: 0x00ffff,})const line = new THREE.LineSegments(edges, edgesMaterial);let object3D = new THREE.Object3D();let mesh = new THREE.Mesh(geometry, material);mesh.add(line);object3D.add(mesh);// object3D.position.set(cenP[0], cenP[1], cenP[2] + 2000 / 2);let position = [13529536.50333642, 3626588.0048437016, 1000];let cenP = [];this.opts.externalRenderers.toRenderCoordinates(this.view, [position[0], position[1], position[2]], 0, this.view.spatialReference, cenP, 0, 1);object3D.position.set(cenP[0], cenP[1], cenP[2] + 2000 / 2);this.scene.add(object3D);//然后将物体添加到场景中去this.mesh = object3D;// this.getCoords(context);context.resetWebGLState();}/*** 渲染器更新渲染* @memberof BuildingEffect* @method render* @param {Object} context 已有渲染器信息，无需传值*/render(context) {let THREE = window.THREE;let cam = context.camera;//需要调整相机的视角this.camera.position.set(cam.eye[0], cam.eye[1], cam.eye[2]);this.camera.up.set(cam.up[0], cam.up[1], cam.up[2]);this.camera.lookAt(new THREE.Vector3(cam.center[0], cam.center[1], cam.center[2]));// Projection matrix can be copied directlythis.camera.projectionMatrix.fromArray(cam.projectionMatrix);if (this.mesh) {let vec = new THREE.Vector3(0, 0, 1);this.mesh.rotateOnAxis(vec, Math.PI / 300);}// draw the scene/// this.renderer.resetGLState();this.renderer.state.reset();//Three.js r127版本重构了WebGLState,//this.renderer.state.reset(); 之后需要加一行 context.bindRenderTarget(); 否则渲染不出来context.bindRenderTarget();// this.renderer.setRenderTarget();this.renderer.render(this.scene, this.camera);// as we want to smoothly animate the ISS movement, immediately request a re-renderthis.opts.externalRenderers.requestRender(this.view);// cleanupcontext.resetWebGLState();}}

效果：
在这里插入图片描述

RenderNode（4.29版本）

RenderNode在加载ThreeJS模块的时候和externalRenderer有些不一样。

  • 调用的对象类型发生了变化。externalRenderer以class的形式调用，RenderNode必须以返回的对象类型调用。
  • 内部方法名发生了变化。externalRenderer初始化的方法名为setup，RenderNode初始化的方法名为initialize。
  • 调用方式不同。externalRenderer直接通过add的方式去添加并传参。RenderNode需要先通过RenderNode.createSubclass去创建子类，然后通过new一个子类对象，去传参数。

具体代码如下：


let RenderNodeClass = {constructor(options) {this.webgl = options.webgl;this.view = options.view;this.cube = null;this.mesh = null;this._camera = null;},setParams() {this.isStop = !this.isStop;},initialize() {let THREE = window.THREE;// this.mixer = new THREE.AnimationMixer();this.horseMixer = THREE.AnimationMixer;this.clock = new THREE.Clock();this.horseClock = new THREE.Clock();this.mixer = THREE.AnimationMixer;this.renderer = new THREE.WebGLRenderer({context: this.gl, // 可用于将渲染器附加到已有的渲染环境(RenderingContext)中premultipliedAlpha: false, // renderer是否假设颜色有 premultiplied alpha. 默认为true});this.renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比。通常用于避免HiDPI设备上绘图模糊this.renderer.setViewport(0, 0, this.view.width, this.view.height); // 视口大小设置this.renderer.autoClear = false;this.renderer.autoClearDepth = false;this.renderer.autoClearColor = false;// this.renderer.autoClearStencil = false;let originalSetRenderTarget = this.renderer.setRenderTarget.bind(this.renderer);this.renderer.setRenderTarget = function (target) {originalSetRenderTarget(target);if (target == null) {context.bindRenderTarget();}};this.scene = new THREE.Scene();// setup the cameralet cam = this.camera;this._camera = new THREE.PerspectiveCamera(cam.fovY, cam.aspect, cam.near, cam.far);// 添加坐标轴辅助工具const axesHelper = new THREE.AxesHelper(1);axesHelper.position.copy(1000000, 100000, 100000);this.scene.add(axesHelper);let grid = new THREE.GridHelper(30, 10, 0xf0f0f0, 0xffffff);this.scene.add(grid);// setup scene lightingthis.ambient = new THREE.AmbientLight(0xffffff, 0.5);this.scene.add(this.ambient);let geometry = new THREE.CylinderBufferGeometry(1500, 0, 2000, 4);geometry.rotateX(Math.PI / 2);geometry.computeBoundingSphere();const material = new THREE.MeshBasicMaterial({color: 0x00ff00,transparent: true,opacity: 0.5,});//material定义了物体的材质，简单说就是外观// 长方体作为EdgesGeometry参数创建一个新的几何体const edges = new THREE.EdgesGeometry(geometry);const edgesMaterial = new THREE.LineBasicMaterial({color: 0x00ffff,})const line = new THREE.LineSegments(edges, edgesMaterial);let object3D = new THREE.Object3D();let mesh = new THREE.Mesh(geometry, material);mesh.add(line);object3D.add(mesh);// object3D.position.set(cenP[0], cenP[1], cenP[2] + 2000 / 2);let position = [13529536.50333642, 3626588.0048437016, 1000];let cenP = [];this.webgl.toRenderCoordinates(this.view, [position[0], position[1], position[2]], 0, this.view.spatialReference, cenP, 0, 1);object3D.position.set(cenP[0], cenP[1], cenP[2] + 2000 / 2);this.scene.add(object3D);//然后将物体添加到场景中去this.mesh = object3D;// this.getCoords(context);this.resetWebGLState();},/*** 渲染器更新渲染* @memberof BuildingEffect* @method render* @param {Object} context 已有渲染器信息，无需传值*/render(context) {let THREE = window.THREE;let cam = this.camera;//需要调整相机的视角this._camera.position.set(cam.eye[0], cam.eye[1], cam.eye[2]);this._camera.up.set(cam.up[0], cam.up[1], cam.up[2]);this._camera.lookAt(new THREE.Vector3(cam.center[0], cam.center[1], cam.center[2]));// Projection matrix can be copied directlythis._camera.projectionMatrix.fromArray(cam.projectionMatrix);if (this.mesh) {let vec = new THREE.Vector3(0, 0, 1);this.mesh.rotateOnAxis(vec, Math.PI / 300);}this.renderer.state.reset();this.bindRenderTarget();this.renderer.render(this.scene, this._camera);// as we want to smoothly animate the ISS movement, immediately request a re-renderthis.requestRender();// cleanupthis.resetWebGLState();}}

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ThreeJS+ArcGIS</title><!-- <script type="text/javascript" src="./js/threejs/r109/three.min.js"></script><script type="text/javascript" src="./js/threejs/r109/GLTFLoader.js"></script> --><script type="text/javascript" src="./js/threejs/r141/three.min.js"></script><script src="./RenderNodeClass.js"></script><link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.29/"></script><style>html,body,#viewDiv {height: 100%;width: 100%;margin: 0;padding: 0;}</style><script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script><script>window.THREE = THREE;window.GLTFLoader = THREE.GLTFLoader;require(["esri/views/SceneView","esri/Map","esri/layers/TileLayer","esri/views/3d/webgl/RenderNode","esri/views/3d/webgl"], (SceneView, Map, TileLayer, RenderNode, webgl) => {let map = new Map({basemap:"satellite"})let view = new SceneView({map: map,container: 'viewDiv',viewingMode: "local"});view.when(function () {view.goTo({fov: 55,heading: 55.99495193816657,position: {x: 13513809.919879783,y: 3616346.75042186,z: 8574.5211164545,spatialReference: {wkid: 102100}},tilt: 69.0179407311609});})view.on("click",function(){console.log(view.camera);})let subRenderClass = RenderNode.createSubclass(RenderNodeClass);view.when(function(){new subRenderClass({view,webgl})})// let myExternalRenderer = {//     initialize: function (context) {//         // 在外部渲染器添加到视图后执行一次。//         // 你可以使用这个函数来分配所有的静态WebGL资源(着色器，缓冲区等)。//     },//     render: function (context) {//         // 在每一帧执行，绘制几何图形到画布。在这个函数中完成的任务://         // *更新动态资源的状态//         // *根据需要设置WebGL状态//         // *发出WebGL绘制调用//     }// }})</script>
</head><body><div id="viewDiv"></div>
</body></html>

结果：
在这里插入图片描述

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

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

相关文章

基于jeecgboot-vue3的Flowable增加流程支持组件与element-plus组件导入支持

基于jeecgboot-vue3的Flowable增加流程支持组件与element-plus组件导入支持

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、package.json文件需要增加相关流程组件&#xff0c;如下 "dependencies": {"element-plus/icons-vue": "^2.3.1","highlightjs/vue-plugin":…
阅读更多...
蔬菜水果店做配送分销小程序的作用是什么

蔬菜水果店做配送分销小程序的作用是什么

蔬菜水果是人们生活必需&#xff0c;传统为线下市场、超市、路边小摊等场景购买&#xff0c;如今快节奏时代&#xff0c;用户需要更快完成消费、商家也需要摆脱竞争获客转化以及提升自己的运营能力。 蔬菜水果隔三岔五或每天都会购买&#xff0c;老客粘性较高&#xff0c;还需…
阅读更多...
文字生成图像内容解决方案，享受创作的乐趣

文字生成图像内容解决方案，享受创作的乐趣

企业对于内容创新和视觉呈现的需求日益增强&#xff0c;美摄科技凭借其卓越的技术实力&#xff0c;推出了一款面向企业的文字生成图像内容解决方案。通过该方案&#xff0c;企业能够轻松将文字内容转化为高质量的图像&#xff0c;实现内容创作的全新突破。 一、车机语音交互&a…
阅读更多...
【漏洞复现】懒人网址导航页 search.html SQL注入漏洞

【漏洞复现】懒人网址导航页 search.html SQL注入漏洞

0x01 产品简介 赖人网址导航系统是一种智能化的网址导航平台&#xff0c;旨在帮助用户快速找到所需的网址和资源。该系统提供了智能化的网址搜索和推荐功能&#xff0c;能够根据用户的搜索习惯和偏好推荐相关的网址和资源。同时&#xff0c;系统还提供了网址分类、网址收藏和网…
阅读更多...
高仿百度网页（附带源码）

高仿百度网页（附带源码）

高仿百度网页 效果图部分源码及素材领取源码下期更新预报 效果图 部分源码及素材 <script language"javascript">function show_date_time() {window.setTimeout("show_date_time()", 1000);BirthDay new Date("1/20/2023 16:52:21");//…
阅读更多...
OpenMV学习笔记1——IDE安装与起步

OpenMV学习笔记1——IDE安装与起步

目录 一、OpenMV IDE下载 二、OpenMV界面 三、Hello World&#xff01; 四、将代码烧录到OpenMV实现脱机运行 五、插SD卡&#xff08;为什么买的时候没送&#xff1f;&#xff09; 一、OpenMV IDE下载 浏览器搜索OpenMV官网&#xff0c;进入后点击“立即下载”&#xff0…
阅读更多...
C++进阶：C++11(列表初始化、右值引用与移动构造移动赋值、可变参数模版...Args、lambda表达式、function包装器)

C++进阶：C++11(列表初始化、右值引用与移动构造移动赋值、可变参数模版...Args、lambda表达式、function包装器)

C进阶&#xff1a;C11(列表初始化、右值引用与移动构造移动赋值、可变参数模版…Args、lambda表达式、function包装器) 今天接着进行语法方面知识点的讲解 文章目录 1.统一的列表初始化1.1&#xff5b;&#xff5d;初始化1.2 initializer_listpair的补充 2.声明相关关键字2.1a…
阅读更多...
python实现对应分析的随笔记

python实现对应分析的随笔记

文档来源&#xff1a; Correspondence analysis 1 对应分析 参考&#xff1a; SPSS&#xff08;十二&#xff09;SPSS对应分析&#xff08;图文数据集&#xff09;案例6&#xff1a;SPSS–对应分析10 对应分析 对应分析的实质&#xff08;理论很复杂&#xff0c;但是结果很明…
阅读更多...
创新指南｜利用电商产品视频进行渠道营销的最佳策略，不断提升销售额

创新指南｜利用电商产品视频进行渠道营销的最佳策略，不断提升销售额

无论企业的利基市场如何&#xff0c;电商产品视频都已被证明是非常可靠的资产&#xff0c;可以让目标受众了解您所提供的产品——关键功能、展示重要的差异化优势甚至改变大多数营销活动的游戏规则。阅读本文&#xff0c;全面了解电商产品视频如何融入营销推广&#xff0c;以最…
阅读更多...
基于python向量机算法的数据分析与预测

基于python向量机算法的数据分析与预测

3.1 数据来源信息 该数据集来源于Kaggle网站&#xff0c;数据集中包含了罗平菜籽油的销售数据&#xff0c;每行数据对应一条记录&#xff0c;记录了罗平菜籽油销售数据。其中&#xff0c;菜籽产量、菜籽价格和菜籽油价格是数值型数据&#xff0c;共2486条数据。 通过读取Exce…
阅读更多...
SpringBootWeb 篇-深入了解 Mybatis 概念、数据库连接池、环境配置和 Lombok 工具包

SpringBootWeb 篇-深入了解 Mybatis 概念、数据库连接池、环境配置和 Lombok 工具包

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文件目录 1.0 Mybatis 概述 2.0 数据库连接池 2.1 数据库连接池的主要作用包括 2.2 如何切换数据库连接池&#xff1f; 3.0 配置环境 4.0 Lombok 工具包 4.1 如何导入到项目中呢…
阅读更多...
Transformer详解(3)-多头自注意力机制

Transformer详解(3)-多头自注意力机制

attention multi-head attention pytorch代码实现 import math import torch from torch import nn import torch.nn.functional as Fclass MultiHeadAttention(nn.Module):def __init__(self, heads8, d_model128, droput0.1):super().__init__()self.d_model d_model # 12…
阅读更多...
力扣HOT100 - 31. 下一个排列

力扣HOT100 - 31. 下一个排列

解题思路&#xff1a; 数字是逐步增大的 步骤如下&#xff1a; class Solution {public void nextPermutation(int[] nums) {int i nums.length - 2;while (i > 0 && nums[i] > nums[i 1]) i--;if (i > 0) {int j nums.length - 1;while (j > 0 &&…
阅读更多...
Tina-Linux -- 5. 网络通信(有线网络，无线网络，SSH链接)

Tina-Linux -- 5. 网络通信(有线网络，无线网络，SSH链接)

有线网络 bash 指令 ifconfig eth0 192.168.2.222 netmask 255.255.255.0 up route add default gw 192.168.2.1开机自启 修改网络设置文件 /etc/init.d/S40network #!/bin/sh # # Start the network.... ## Debian ifupdown needs the /run/network lock directory mkdir …
阅读更多...
视频码流分析工具

视频码流分析工具

一、VQ Analyzer 在线使用说明&#xff1a; https://vicuesoft.com/vq-analyzer/userguide/ ref&#xff1a; Video Analyzer and Streaming Tester Software – VQ Analyzer HEVC 分析工具 - 懒人李冰 推荐一个开源且跨平台的免费码流分析软件YUView - 知乎
阅读更多...
企业管理咨询在当前市场环境下的基本现状

企业管理咨询在当前市场环境下的基本现状

随着全球经济的深度融合和数字化转型的加速推进&#xff0c;企业对于高效、专业的管理咨询服务的需求日益旺盛。那么&#xff0c;企业管理咨询在当前市场环境下究竟呈现出了怎样的基本现状呢&#xff1f; 首先&#xff0c;从市场规模来看&#xff0c;企业管理咨询行业正在持续扩…
阅读更多...
寻找峰值 ---- 二分查找

寻找峰值 ---- 二分查找

题目链接 题目: 分析: 因为题目中要找的是任意一个峰值即可, 所以和<山脉数组的峰值索引>这道题差不多因为峰值左右都小于峰值, 所以具有"二段性", 可以使用二分查找算法如果nums[mid] < nums[mid 1], mid一定不是峰值, 所以left mid 1如果nums[mid] &…
阅读更多...
自主创新助力科技强军，麒麟信安闪耀第九届军博会

自主创新助力科技强军，麒麟信安闪耀第九届军博会

由中国指挥与控制学会主办的中国指挥控制大会暨第九届北京军博会于5月17日-19日在北京国家会议中心盛大开展&#xff0c;政府、军队、武警、公安、交通、人防、航天、航空、兵器、船舶、电科集团等从事国防军工技术与产业领域的30000多名代表到场参加。 麒麟信安作为国产化方案…
阅读更多...
重学java 42.多线程 等待唤醒机制案例分析

重学java 42.多线程 等待唤醒机制案例分析

Strength is built under a heavy load,I am expecting to pick up all of my loads and travel on. —— 24.5.24 章节重点 1.会用wait和notify两个方法 2.会使用Lock锁对象 3.会利用Cal1able接口实现多线程 4.会使用线程池完成多线程 等待唤醒案例分析&#xff08;线程之间的…
阅读更多...
C++ TCP发送Socket数据

C++ TCP发送Socket数据

DEVC需要加入ws2_32库 #include <iostream> #include <winsock2.h>#pragma comment(lib, "ws2_32.lib")void sendData(const char* ip, int port, const char* data) {WSADATA wsaData;SOCKET sockfd;struct sockaddr_in server_addr;// 初始化Winsock…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023