使用 ThreeJS 实现第一个三维场景（详）

news/2024/4/29 12:21:19/文章来源:https://blog.csdn.net/qq_44879989/article/details/128953025

文章目录

  • 参考
  • 描述
  • index.html
  • 三维场景的基本实现
      • 导入 ThreeJS
      • 准备工作
          • 场景
          • 摄像机
            • 视锥体
            • 正交摄像机
            • 透视摄像机
          • 渲染器
          • 后续处理
            • 将摄像机添加至场景中
            • 移动摄像机
            • 设置画布尺寸
            • 将渲染器创建的画布添加到 HTML 元素中
      • 渲染
      • 物体
          • 结构
          • 材质
          • 合成
            • 将物体添加至场景中
      • 代码总汇
      • 执行效果
  • 动画
      • requestAnimationFrame()
      • 使用 requestAnimationFrame() 而不是 setInterval()
      • 立方体旋转动画
  • 轨道控制器
      • 导入
      • OrbitControls
      • 代码总汇
      • 执行效果
  • 坐标轴辅助器
      • 代码总汇
      • 执行效果

参考

项目描述
ThreeJS官方文档
搜索引擎Google
哔哩哔哩老陈打码
Three.js开发指南：基于WebGL和HTML5在网页上渲染3D图形和动画（原书第3版）[美] 乔斯·德克森(Jos Dirksen) / 周翀，张薇 译

描述

项目描述
npm8.19.3
nodev18.13.0
ThreeJS148
操作系统Windows 10 专业版
Google109.0.5414.120（正式版本）（64 位）

注：

在观察本篇博客后续内容前请先搭建 ThreeJS 运行的相关环境，如还未搭建相关环境，请移步至我的另一篇博客 初识 ThreeJS （ThreeJS 相关环境搭建）。

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>使用 ThreeJS 实现第一个三维场景</title><style>*{/* 避免运行程序时浏览器中出现滚动条 */margin: 0px;}</style></head><body><!-- Vite 脚手架构建的 Vue 项目 --><!-- Vue 将会把 JavaScript 文件编译到 #app 元素中 --><div id="app"></div><!-- 导入 main.js 文件 --><!-- 本篇博客后续的 JavaScript 代码都将放置于该文件中 --><script type="module" src="/src/main.js"></script></body>
</html>

注：

请将 HTML 元素的 margin 默认样式设置为 0px ，否则你将在浏览器中观察到不必要的滚动条。

效果

三维场景的基本实现

导入 ThreeJS

import * as three from 'three';

准备工作

场景

场景是 ThreeJS 中所有内容（摄像机、物体等）的容器。你可以使用如下代码创建一个场景：

const scene = new three.Scene();
摄像机

摄像机的角度、所处的位置等属性都将影响你能观察到的内容。在 ThreeJS 中，最常使用的摄像机有正交摄像机及正交摄像机。

视锥体

在三维计算机图形学中，视体（英语：viewing frustum）又称视景体、视锥，是三维世界中在屏幕上可见的区域，即虚拟摄像机的视野。

该区域的实际形状依所模拟的摄像机镜头而定，但顾名思义，其常见的形状是方平截头体。将四棱锥截为平截头体的两个平面称作近平面 和远平面。如果某个物体到摄像机的距离比近平面近或比远平面远，那么这个物体不会被显示。

视锥体

上述内容引用自 维基百科

正交摄像机

使用正交摄像机后，相同的物体并不会因为摄像机的远近而呈现不同的大小。这对于渲染2D场景或者UI元素是非常有用的。

效果

正交摄像机拍摄的画面并不会存在透视效果，这与我们平常所见到的事务不同，所以你在观察正交摄像机拍摄的画面时可能会感到不适。

在 ThreeJS 中，你可以使用如下代码创建正交摄像机：

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number );

其中：

项目描述
left规定视锥体左侧面距离视锥体中心的距离。
right规定视锥体右侧面距离视锥体中心的距离。
top规定视锥体上侧面距离视锥体中心的距离。
bottom规定视锥体下侧面距离视锥体中心的距离。
near规定视锥体近端面与摄像机之间的距离，默认值为 0.1。
far规定视锥体远端面与摄像机之间的距离，默认值为 2000。

注：

  1. near 的值需要在 0~far 范围之间。
  2. 和透视摄像机不同的是，0 对于正交摄像机的近端面来说是一个有效值。
透视摄像机

使用透视摄像机后，相同的物体会因为摄像机的远近而呈现不同的大小。该摄像机对人眼进行了模拟，使用透视摄像机可以更有效的模拟人眼中的现实世界。

效果

在 ThreeJS 中，你可以使用如下代码创建透视摄像机：

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number );

其中：

项目描述
fov视锥体垂直视野角度，默认值为 50。
aspect视锥体的宽高比，默认值为 1。
near规定视锥体近端面与摄像机之间的距离，默认值为 0.1。
far规定视锥体远端面与摄像机之间的距离，默认值为 2000。

注：

透视摄像机中的 near 的参数值需要大于 0 且小于 far。

示例：

在本示例中，我们将使用 PerspectiveCamera 函数创建透视摄像机，具体代码如下：

const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

其中：

window 对象为浏览器提供的 JavaScript API。

项目描述
window.innerWidth该属性对应的值为浏览器的视口（可视区域）宽度。
window.innerHeight该属性对应的值为浏览器的视口（可视区域）高度。
渲染器

渲染器将会基于摄像机的角度来计算场景对象在浏览器中将会被渲染成什么样子。

在 ThreeJS 中，你可以使用如下代码创建渲染器：

const renderer = new three.WebGLRenderer();

注：

除了我们在这里用到的 WebGLRenderer 渲染器 之外，ThreeJS 还提供了其他几种渲染器。当用户所使用的浏览器过于老旧，或者由于其他原因不支持 WebGLRenderer 渲染器 时，可以使用这几种渲染器实现渲染器的降级处理。

后续处理
将摄像机添加至场景中

在创建摄像机后，你需要将摄像机添加到场景中以使其发挥作用。你可以使用如下代码将摄像机添加到场景中。

scene.add(camera);

注：

在你没有使用上述代码将摄像机添加至场景中时，ThreeJS 会在渲染过程中自动将摄像机添加至场景中。但是我们手动将摄像机添加至场景中是一个更好的方式，尤其是当你需要处理多个摄像机的时候。

移动摄像机

物体在添加至场景中后，均位于场景中心。你需要调整摄像机的位置，否则你将无法观察到场景中的其他物体（对所处位置进行初始化的物体除外）。

Camera 对象拥有一个 position 对象，该对象具有如下属性及方法，你可以通过这些属性或方法修改 Camera 在场景中所处的位置。

项目描述
x设置物体在场景中的 X 坐标。
y设置物体在场景中的 Y 坐标。
z设置物体在场景中的 Z 坐标。
set()该方法接收三个参数，分别用以指定物体在场景中的 X、Y 及 Z 轴坐标。

在本示例中，我们将使用如下代码调整摄像机在场景中的位置：

camera.position.z = 5;
设置画布尺寸

ThreeJS 在内部会使用到 HTML 5 元素 Canvas，ThreeJS 将在 Canvas 元素中绘制三维物体，故 Canvas 元素可以理解为 ThreeJS 的画布。
你可以通过渲染器对象的 setSize() 方法对画布进行设置。

在本示例中，我们将使用如下代码以创建同浏览器视口（可视区域）相同大小的画布。

renderer.setSize(window.innerWidth, window.innerHeight);

其中：

window 对象为浏览器提供的 JavaScript API。

项目描述
window.innerWidth该属性对应的值为浏览器的视口（可视区域）宽度。
window.innerHeight该属性对应的值为浏览器的视口（可视区域）高度。
将渲染器创建的画布添加到 HTML 元素中
document.body.appendChild(renderer.domElement);

其中：

  1. document.body.appendChild()

使用该函数你将在 HTML 中的 body 元素的末尾添加一个指定的元素。

  1. renderer.domElement

该属性包含了 渲染器对象 创建的 Canvas 元素。你可以使用如下代码将 renderer.domElement 打印至控制台中。

console.log(renderer.domElement);

打印结果：

renderer.domElement

渲染

在准备工作结束后，在浏览器中观察运行结果，你将观察到白茫茫的一片，这是由于你还没有对构建的三维世界进行渲染。添加如下代码以对我们构建的三维世界进行渲染：

renderer.render(scene, camera);

执行效果：

在添加上述代码后，执行代码并前往浏览器中观察执行结果，你将观察到黑漆漆的一片，这是由于我们还为向场景中添加处摄像机以外的其他物体。

其中：

renderer.render() 接收两个实参，第一个实参用于指定渲染器需要渲染的场景，第二个参数则用于指定渲染器需要处理的摄像机。

物体

结构

在 ThreeJS 中创建物体时，你需要为该物体指定结构。ThreeJS 中提供了
很多可以直接使用的几何体，你可以使用 BoxGeometry() 函数创建一个长方体。

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

其中：

项目描述
width长方体在 X 轴方向上的长度，默认值为 1。
height长方体在 Y 轴方向上的长度，默认值为 1。
depth长方体在 Z 轴方向上的长度，默认值为 1。
widthSegments该参数为可选参数，用于指定长方体在 X 轴方向上的分段数，默认值为 1。
heightSegments该参数为可选参数，用于指定长方体在 Y 轴方向上的分段数，默认值为 1。
depthSegments该参数为可选参数，用于指定长方体在 Z 轴方向上的分段数，默认值为 1。

示例：

在本示例中，我们将使用 BoxGeometry() 函数创建一个立方体（立方体是特殊的长方体）。

const geometry = new three.BoxGeometry();
材质

3D材质本质上就是覆盖在3D对象表面上的东西，其控制了在渲染（光线与表面相互作用的方式、颜色、纹理、透明度和反射等属性）时带给人们的感知。

示例：

在本示例中我们将使用 MeshBasicMaterial() 构造函数来创建不受光照影响的基本材质。你可以向该函数提交一个对象以对材质进行配置。

const material = new three.MeshBasicMaterial({ color: '#0ff' });

使用上述代码后将创建一个 水绿色 的基础网格材质。

合成

在有了结构和材质后，我们需要将两者合并以创建几何体，使用 Mesh() 函数可以达成这个目的。

Mesh() 函数接收两个实参，第一个实参用于指定几何体的结构，第二个参数用于指定几何体的材质。

示例：

const cube = new three.Mesh(geometry, material);
将物体添加至场景中
scene.add(cube);

代码总汇

// 导入 ThreeJS 模块
import * as three from 'three';// 常见场景
const scene = new three.Scene();
// 创建透视摄像机
const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new three.WebGLRenderer();
// 将摄像机添加至场景中
scene.add(camera);
// 移动摄像机
camera.position.z = 5;
// 设置画布尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器创建的画布添加到 HTML 元素中
document.body.appendChild(renderer.domElement);// 创建各方向长度为 1 的长方体 (即正方体)
const geometry = new three.BoxGeometry();
// 创建一个 水绿色 的基础网格材质
const material = new three.MeshBasicMaterial({ color: '#0ff' });
// 将结构与材质合并以创建需要的几何体
const cube = new three.Mesh(geometry, material);
// 将几何体添加至场景中
scene.add(cube);// 渲染
renderer.render(scene, camera);

执行效果

执行效果

动画

我们可以使用 ThreeJS 实现 3D 动画的创建。

requestAnimationFrame()

现代浏览器通过 requestAnimationFrame() 函数为稳定而连续的渲染场景提供了良好的解决方案。通过 requestAnimationFrame() 函数，你可以向浏览器提供一个回调函数。你无需定义回调间隔，浏览器将自行决定最佳回调时机。你需要做的是在这个回调函数中完成每一帧的需要进行的绘制操作，然后将剩下的工作交由浏览器处理，浏览器将赋值使场景绘制尽量高效和平顺的进行。

使用 requestAnimationFrame() 而不是 setInterval()

在浏览器提供 requestAnimationFrame() API 前，这类工作是通过 setInterval() 函数来进行的，但并不推荐使用 setInterval() 来代替 requestAnimationFrame()，原因如下：

  1. requestAnimationFrame() 能提供更适合的回调间隔，而通过 setInterval() 函数指定的时间间隔并不一定适合所有的场景。

  2. requestAnimationFrame() 能在切换至其他标签页时停止绘制，能够更合理的利用计算机的资源计算机的资源。

立方体旋转动画

// 导入 ThreeJS 模块
import * as three from 'three';// 常见场景
const scene = new three.Scene();
// 创建透视摄像机
const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new three.WebGLRenderer();
// 将摄像机添加至场景中
scene.add(camera);
// 移动摄像机
camera.position.z = 5;
// 设置画布尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器创建的画布添加到 HTML 元素中
document.body.appendChild(renderer.domElement);// 创建各方向长度为 1 的长方体 (即正方体)
const geometry = new three.BoxGeometry();
// 创建一个 水绿色 的基础网格材质
const material = new three.MeshBasicMaterial({ color: '#0ff' });
// 将结构与材质合并以创建需要的几何体
const cube = new three.Mesh(geometry, material);
// 将几何体添加至场景中
scene.add(cube);// 指定 3D 动画每一帧需要执行的操作
function animate(){requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染renderer.render(scene, camera);
}animate();

执行效果：

效果

轨道控制器

在 ThreeJS 中使用轨道控制器后，你可以通过长按鼠标左键并拖动鼠标来控制摄像头所处的位置。

导入

你可以使用如下代码来对轨道控制器进行导入：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

OrbitControls

OrbitControls( object : Camera, domElement : HTMLDOMElement )

你可以通过使用 OrbitControls() 函数来创建轨道控制器，该函数接受两个实参，具体如下：

项目描述
object需要控制的摄像机。
domElement用于监听事件的 HTML 元素。当鼠标在该元素中触发拖动事件后将影响被控制的摄像机所处的位置。

示例：

使用如下代码后，摄像头将仅监听发生在 Canvas 元素的拖动事件并据此影响被控制的摄像机所处的位置。

const orbitControls = new OrbitControls(camera, renderer.domElement);

代码总汇

// 导入 ThreeJS 模块
import * as three from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';// 常见场景
const scene = new three.Scene();
// 创建透视摄像机
const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new three.WebGLRenderer();
// 将摄像机添加至场景中
scene.add(camera);
// 移动摄像机
camera.position.z = 5;
// 设置画布尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器创建的画布添加到 HTML 元素中
document.body.appendChild(renderer.domElement);// 创建各方向长度为 1 的长方体 (即正方体)
const geometry = new three.BoxGeometry();
// 创建一个 水绿色 的基础网格材质
const material = new three.MeshBasicMaterial({ color: '#0ff' });
// 将结构与材质合并以创建需要的几何体
const cube = new three.Mesh(geometry, material);
// 将几何体添加至场景中
scene.add(cube);// 在 ThreeJS 中使用轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement);// 指定 3D 动画每一帧需要执行的操作
function animate(){requestAnimationFrame(animate);// 渲染renderer.render(scene, camera);
}animate();

执行效果

执行效果

坐标轴辅助器

在 ThreeJS 中，我们可以添加坐标轴辅助器以在场景中显示三维坐标轴。

你可以使用 AxesHelper() 函数来创建三维坐标轴。

AxesHelper( size : Number )

其中：

项目描述
size用于指定三维坐标轴的轴线长度，默认值为 1。

示例：

在本示例中，你可以使用如下代码进行三维坐标轴的创建：

const axesHelper = new three.AxesHelper(5);

注：

在创建坐标辅助器后，你需要将其添加到场景中，否则你将无法在场景中观察到坐标轴。

代码总汇

// 导入 ThreeJS 模块
import * as three from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';// 常见场景
const scene = new three.Scene();
// 创建透视摄像机
const camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new three.WebGLRenderer();
// 将摄像机添加至场景中
scene.add(camera);
// 移动摄像机
camera.position.z = 5;
// 设置画布尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器创建的画布添加到 HTML 元素中
document.body.appendChild(renderer.domElement);// 创建各方向长度为 1 的长方体 (即正方体)
const geometry = new three.BoxGeometry();
// 创建一个 水绿色 的基础网格材质
const material = new three.MeshBasicMaterial({ color: '#0ff' });
// 将结构与材质合并以创建需要的几何体
const cube = new three.Mesh(geometry, material);
// 将几何体添加至场景中
scene.add(cube);// 在 ThreeJS 中使用轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement);// 在 ThreeJS 中创建坐标辅助器
const axesHelper = new three.AxesHelper(5);
// 将坐标辅助器添加到场景中
scene.add(axesHelper);// 指定 3D 动画每一帧需要执行的操作
function animate(){requestAnimationFrame(animate);// 渲染renderer.render(scene, camera);
}animate();

执行效果

效果

注：

在坐标辅助器中，红色代表 X 轴，绿色代表 Y 轴，蓝色代表 Z 轴。

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

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

相关文章

你的自动化框架如何设计的？为什么感觉面试官总是不满意，到底问题出在哪？

你的自动化框架如何设计的？为什么感觉面试官总是不满意，到底问题出在哪？

前言去面试自动化测试岗位&#xff0c;尤其是接口自动化岗位&#xff0c;面试官总会问&#xff1a;说下你的自动化框架如何设计的&#xff1f;为什么回答后&#xff0c;面试官对你的框架设计总是感觉不满意&#xff1f;自动化测试实现的几种方式对于不同的公司来说&#xff0c;…
阅读更多...
2023年地方两会政府工作报告汇总（各省市23年重点工作）

2023年地方两会政府工作报告汇总（各省市23年重点工作）

新年伊始&#xff0c;全国各地两会密集召开&#xff0c;各省、市、自治区2023年政府工作报告相继出炉&#xff0c;各地经济增长预期目标均已明确。相较于2022年&#xff0c;多地经济增长目标放缓&#xff0c;经济不断向“高质量”发展优化转型。今年是二十大后的开局之年&#…
阅读更多...
【参加CUDA线上训练营】零基础cuda,一文认识cuda基本概念

【参加CUDA线上训练营】零基础cuda,一文认识cuda基本概念

【参加CUDA线上训练营】零基础cuda,一文认识cuda基本概念1.术语2.线程层次2.1 Block、Warp与Thread之间的关系2.2 Thread index1.术语 \\%序号名称描述1HostCPU和内存&#xff08;host memory&#xff09;2DeviceGPU和显存&#xff08;device memory&#xff09;3SMStreaming M…
阅读更多...
101-并发编程详解（上篇）

101-并发编程详解（上篇）

并发编程详解在学习之前&#xff0c;如果多线程的理解足够&#xff0c;可以往下学习&#xff0c;否则的话&#xff0c;建议先看看26章博客&#xff08;只是建议&#xff09;&#xff0c;注意&#xff1a;可能有些字的字体不对&#xff0c;那么一般是复制粘贴来的&#xff0c;但…
阅读更多...
开关电源-一种方便快捷计算开关电源环路参数的方法及实例

开关电源-一种方便快捷计算开关电源环路参数的方法及实例

一种方便快捷计算开关电源环路参数的方法及实例 接上文《技术实例 | 开关电源环路测量时&#xff0c;注入信号的幅值对测量结果的影响》&#xff0c;得到电流环功率级的开环传递函数后&#xff0c;我们通过matlab的sisotool工具箱自动计算出了电流环路补偿器的传递函数C&#…
阅读更多...
三层交换机【实验】

三层交换机【实验】

目录 1、要求&#xff1a; 2、拓扑&#xff1a; 3、创建vlan和端口定义并划入vlan&#xff1a; 4、创建以太网中继Eth-Trunk使sw1和sw2的相互冗余并且不浪费链路&#xff1a; 5、使用mstp定义组和对应的根&#xff1a; 6、配置网关冗余&#xff1a; 7、核心层的路由的IP配…
阅读更多...
云仓仓储的运行模式是什么？

云仓仓储的运行模式是什么？

仓库能够简单地定义为一个规划空间&#xff0c;通常是一个用于处置和贮存货物的大型商业建筑。因而&#xff0c;仓储是指在这样一个规划空间中存储和处置货物所触及的一切过程。仓库中常见的货物包括&#xff1a;;机械零配件、建筑资料、废品农产品、家具和电子产品。仓库中的一…
阅读更多...
Fluid-数据缓存亲和性调度原理解析

Fluid-数据缓存亲和性调度原理解析

前言在Fluid中&#xff0c;Dataset资源对象中所定义的远程文件是可被调度的&#xff0c;这意味着你能够像管理你的Pod一样管理远程文件缓存在Kubernetes集群上的存放位置。另外&#xff0c;Fluid同样支持对于应用的数据缓存亲和性调度&#xff0c;这种调度方式将应用(e.g. 数据…
阅读更多...
二进制部署K8S集群

二进制部署K8S集群

目录 一、架构图 二、部署步骤 1、实验环境 2、操作系统初始化配置 3、部署 docker引擎 4、部署 etcd 集群 5、部署 Master 组件 一、架构图 二、部署步骤 1、实验环境 服务器类型IP地址master192.168.80.5node01192.168.80.8node02192.168.80.9 2、操作系统初始化配置…
阅读更多...
SpringBoot整合Mybatis的核心原理

SpringBoot整合Mybatis的核心原理

0. 前言&#xff1a;1. 自动配置类MybatisAutoConfiguration&#xff1a;1.1. SqlSessionFactory的生成&#xff1a;1.2. Mapper的扫描和代理生成&#xff1a;1.2.1. MapperScannerConfigurer1.2.2. MapperFactoryBean1.2.3. getMapper生成代理对象2. 小结&#xff1a;0. 前言&…
阅读更多...
3D模型深度生成网络【ShapeAssembly】

3D模型深度生成网络【ShapeAssembly】

推荐&#xff1a;使用 NSDT场景设计器 快速搭建 3D场景。 我们提出了一个深度生成模型&#xff0c;该模型学习在ShapeAssembly中编写新颖的程序&#xff0c;ShapeAssembly是一种用于建模3D形状结构的特定领域语言。 执行 ShapeAssembly 程序会生成一个由部件代理长方体的分层连…
阅读更多...
2023，考个软考中级证书稳妥深圳入户，5月考试8月办入户

2023，考个软考中级证书稳妥深圳入户，5月考试8月办入户

最新消息&#xff01;最新消息&#xff01;最新消息&#xff01; 2023年2月8日&#xff0c;深圳市发展和改革委员会深圳市公安局深圳市人力资源和社会保障局关于印发《深圳市积分入户办法》的最新通知↓ 来源《深圳市发展和改革委员会》 该积分入户将于2023年2月15日正式实施&…
阅读更多...
Prometheus监控Java-JMX

Prometheus监控Java-JMX

一、什么是 JMX Exporter ? JMX Exporter 利用 Java 的 JMX 机制来读取 JVM 运行时的一些监控数据&#xff0c;然后将其转换为 Prometheus 所认知的 metrics 格式&#xff0c;以便让 Prometheus 对其进行监控采集。 那么&#xff0c;JMX 又是什么呢&#xff1f;它的全称是&a…
阅读更多...
ChatGPT 支持的搜索引擎 Bing 究竟什么样？

ChatGPT 支持的搜索引擎 Bing 究竟什么样？

微软于2月8日北京时间凌晨在 Redmond 线下举办一场媒体活动&#xff0c;围绕微软的产品以及 AI&#xff0c;公布最新消息。这里我们先回顾一下微软在 AI 上的布局。 2019年&#xff0c;微软向 OpenAI 投资10亿美元&#xff0c;成为了 OpenAI 紧密的合作伙伴&#xff0c;而微软…
阅读更多...
Java中动态调用setter以及getter

Java中动态调用setter以及getter

0x00 前言 对于非专业程序员的安全人员来说&#xff0c;因为没有代码项目的积累&#xff0c;很多知识体系都不完善&#xff0c;所以有必要在一些常用的内容进行学习的总结。 在很多的调用链中都会用到**“动态调用setter以及getter”**这个知识点&#xff0c;比如经典的CB链&a…
阅读更多...
Python语言零基础入门教程（九）

Python语言零基础入门教程（九）

Python pass 语句 Python pass 是空语句&#xff0c;是为了保持程序结构的完整性。 pass 不做任何事情&#xff0c;一般用做占位语句。 Python 语言 pass 语句语法格式如下&#xff1a; pass测试实例&#xff1a; #!/usr/bin/python # -*- coding: UTF-8 -*- # 输出 Pytho…
阅读更多...
线程池小结

线程池小结

什么是线程池 线程池其实就是一种多线程处理形式&#xff0c;处理过程中可以将任务添加到队列中&#xff0c;然后在创建线程后自动启动这些任务。这里的线程就是我们前面学过的线程,这里的任务就是我们前面学过的实现了Runnable或Callable接口的实例对象; 为什么使用线程池 …
阅读更多...
leetcode刷题之背包问题（01背包）

leetcode刷题之背包问题（01背包）

01 背包 概念&#xff1a;有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]weight[i]weight[i]&#xff0c;得到的价值是value[i]value[i]value[i]。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 方法1&#xff1a;暴力回溯…
阅读更多...
FPGA时序约束与分析 --- 实例教程（1）

FPGA时序约束与分析 --- 实例教程（1）

注意&#xff1a; 时序约束辅助工具或者相关的TCL命令&#xff0c;都必须在 open synthesis design / open implemention design 后才能有效运行。 1、时序约束辅助工具 2、查看相关时序信息 3、一般的时序约束顺序 1、 时序约束辅助工具&#xff08;1&#xff09;时序约束编辑…
阅读更多...
微服务负载均衡器Ribbon

微服务负载均衡器Ribbon

目录 什么是Ribbon 客户端的负载均衡 服务端的负载均衡 常见负载均衡算法 Nacos使用Ribbon 添加LoadBalanced注解 修改controller Ribbon负载均衡策略 IRule AbstractLoadBalancerRule 修改默认负载均衡策略 自定义负载均衡策略 配置自定义的策略 饥饿加载 Ribbo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

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