Three——四、几何体、高光网络材质、锯齿模糊以及GUI库的使用

news2024/11/20 15:21:54

文章：

  1. Three.js——一、初识Three以及基础的前端场景搭建(结尾含源码)
  2. Three——二、加强对三维空间的认识
  3. Three——三、动画执行、画布大小、渲染帧率和相机适配体验
  4. Three——四、几何体、高光网络材质、锯齿模糊以及GUI库的使用

Threejs 常见几何体简介

Three.js 常见的几何体：
请添加图片描述

常见的几何体：

//BoxGeometry：长方体
const geometry = new THREE.BoxGeometry(100, 100, 100);
// SphereGeometry：球体
const geometry = new THREE.SphereGeometry(50);
// CylinderGeometry：圆柱
const geometry = new THREE.CylinderGeometry(50, 50, 100);
// PlaneGeometry：矩形平面
const geometry = new THREE.PlaneGeometry(100, 50);
// CircleGeometry：圆形平面
const geometry = new THREE.CircleGeometry(50);

这里拿平面做示例：
请添加图片描述

双面可见

Three.js 的材质默认正面可见，反面不可见,对于矩形平面PlaneGeometry、圆形平面如果你想看到两面，可以设置side: THREE.DoubleSide。

new THREE.MeshBasicMaterial({
  side: THREE.FrontSide, //默认只有正面可见
});

new THREE.MeshBasicMaterial({
  side: THREE.DoubleSide, //两面可见
});

请添加图片描述

高光网络材质

高光网格材质MeshPhongMaterial和基础网格材质MeshBasicMaterial、漫反射网格材质MeshLambertMaterial一样都是网格模型的 Mesh 的材质。

注意：高光网格材质MeshPhongMaterial和漫反射网格材质MeshLambertMaterial一样会受到光照的影响。

MeshPhongMaterial 对光照反射特点

MeshPhongMaterial和MeshLambertMaterial都会收到光照的影响区别在于，对光线反射方式有差异。

MeshPhongMaterial可以实现高光反射效果，而MeshLamberMaterial恰恰相反。所谓的高光，就比如你在一个太阳下方去看一个小汽车，你会在特定的角度及位置看到玻璃表面某个位置特别亮。

镜面反射与漫反射

MeshPhongMaterial可以提供一个镜面的反射效果，可以类比你生活中拿一面镜子，放在太阳光下，调整角度，可以把太阳光反射到其它地方，如果反射光对着眼睛，也就是反射光线和视线平行的时候，会非常刺眼。

MeshLambertMaterial对应的 Mesh 受到光线照射，没有镜面反射的效果，只是一个漫反射，也就是光线向四周反射。
请添加图片描述

高光亮度属性shininess

通过MeshPhongMaterial的高光亮度shininess属性，可以控制高光反射效果

// 模拟镜面反射，产生一个高光效果
const material = new THREE.MeshPhongMaterial({
  color: 0x00ffff,
  shininess: 500, //高光部分的亮度，默认30
});

数字越大，光越亮
对比效果:
请添加图片描述

下面是使用MeshLambertMaterial材质的效果：
请添加图片描述

WebGL 渲染器设置(锯齿模糊)

设置渲染器锯齿属性：antialias

const renderer = new THREE.WebGLRenderer({
  antialias: true,
});

对比：
请添加图片描述

请添加图片描述

设置背景的两种方式

scene.background = new THREE.Color(0xaaaaaa);
// or
// renderer.setClearColor(0xffffff, 1); //设置背景颜色

gui.js 库

简介

借助gui.js可以快速创建控制三维场景的UI交互界面

gihtub地址：https://github.com/dataarts/dat.gui
npm地址：https://www.npmjs.com/package/dat.gui

three中自带了gui库

import { GUI } from "three/addons/libs/lil-gui.module.min.js";

创建 GUI 对象

const gui = new GUI();

通过domElement改变 GUI 界面默认的 style 属性

尝试改变他的位置和长度

const gui = new GUI();
gui.domElement.style.right = "0px";
gui.domElement.style.width = "300px";

请添加图片描述

请添加图片描述

add()方法

add()方法可以创建一个交互界面，例如滚动条，从而改变 js 对象属性的属性值

.add(控制对象，对象具体属性，其它参数)

其他参数，可以一个或多个，数据类型也可以不同，gui 会自动根据参数形式，自动生成对应的交互界面。

参数 3 和参数 4，分别是一个数字，交互界面是一个鼠标可以拖动的拖动条，可以在一个区间改变属性的值

const obj = {
  x: 30,
};
gui.add(obj, "x", 0, 100);

请添加图片描述

gui 改变 js 对象多个属性

const obj = {
  x: 30,
  y: 60,
  z: 300,
};
// gui界面上增加交互界面，改变obj对应属性
gui.add(obj, "x", 0, 100);
gui.add(obj, "y", 0, 50);
gui.add(obj, "z", 0, 60);

通过 gui 改变 threejs 光照强度测试

给光源绑定intensity属性，通过 gui 的拖动条来改变光源属性

// 需要光源和光源位置信息
// const pointLight = new THREE.PointLight(0xffffff, 1.0);
// pointLight.position.set(100, 60, 50);

gui.add(pointLight, "intensity", 0, 2.0);
scene.add(pointLight);

// 光源辅助观察
// const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
// scene.add(pointLightHelper);

效果：会将下方绑定模型位置同时进行演示

gui 绑定模型位置

mesh.position是 JavaScript 对象，具有 x、y、z 属性,这三个属性分别表示模型的 xyz 坐标，这就是说，gui 改变mesh.position的 x、y、z 属性，就可以可视化改变 mesh 的位置。

function guiFun() {
  gui.add(mesh.position, "x", 0, 100);
  gui.add(mesh.position, "y", 0, 50);
  gui.add(mesh.position, "z", 0, 60);
}

效果演示：
请添加图片描述

name()

name 属性可以将默认值改成所需文字

gui.add(pointLight, "intensity", 0, 2.0).name("光源");

请添加图片描述

step()步长

每次拖动的间隔

gui.add(pointLight, "intensity", 0, 2.0).name("光源").step(0.1);

onChange()方法

当 gui 界面某个值的时候，.onChange()方法就会执行，这时候你可以根据需要通过.onChange()执行某些代码。就是可以将老值被新值替换。

let obj = {
  x: 30,
  y: 30,
  z: 30,
};
gui.add(obj, "x", 0, 180).onChange(function (value) {
  mesh.position.x = value;
});

gui 改变材质颜色

const obj = {
  color: 0x00ffff,
};
// .addColor()生成颜色值改变的交互界面
gui.addColor(obj, "color").onChange(function (value) {
  mesh.material.color.set(value);
});

请添加图片描述

gui 下拉菜单

通过.add()方法创建新的 UI 交互界面，下拉框、单选框

1、 .add()方法参数 3 和 4 数据类型：数字

此方法如上

add(控制对象，对象具体属性，其他参数)

其他参数，可以一个或多个，数据类型也可以不同，gui 会自动根据参数形式，自动生成对应的交互界面。

2、.add()方法参数 3 数据类型：数组

参数 3 如果是一个数组的话，那么他的交互界面是下拉菜单
例如：

const obj = {
  scale: 0,
};
gui
  .add(obj, "scale", [-100, 0, 100])
  .name("x轴坐标")
  .onChange(function (value) {
    mesh.position.x = value;
  });

请添加图片描述

3、 .add()方法参数 3 数据类型：对象

参数 3 如果为对象，那么生成的交互界面也会是下拉菜单
例如：

const obj = {
  scale: 0,
};
// 参数3数据类型：对象(下拉菜单)
gui
  .add(obj, "scale", {
    left: -100,
    center: 0,
    right: 100,
    // 左: -100,//可以用中文
    // 中: 0,
    // 右: 100
  })
  .name("位置选择")
  .onChange(function (value) {
    mesh.position.x = value;
  });

请添加图片描述

4、.add()方法对应属性的数据类型：布尔值

如果.add()改变属性的数据类型如果是布尔值，那么交互界面就是一个单选按钮
例如：

const obj = {
  bool: false,
};
// 改变的obj属性数据类型是布尔值，交互界面是单选框
gui.add(obj, "bool").name("是否旋转");

gui.add(obj, "bool").onChange(function (value) {
  // 点击单选框，控制台打印obj.bool变化
  console.log("obj.bool", value);
});

案例：控制旋转模型

const obj = {
  bool: false,
};
gui.add(obj, "bool").name("旋转动画");
const render = () => {
  if (obj.bool) mesh.rotateY(0.01);
  renderer.render(scene, camera);
  requestAnimationFrame(render);
};
render();

效果：
请添加图片描述

gui.js 库(分组)

如果页面出现控制的属性较多时，为了避免混合，可以适当进行分组管理
例如：

const gui = new GUI(); //创建GUI对象
//创建一个对象，对象属性的值可以被GUI库创建的交互界面改变
const obj = {
  color: 0x00ffff, // 材质颜色
  specular: 0x111111, // 材质高光颜色
};

// 材质颜色color
gui.addColor(obj, "color").onChange(function (value) {
  material.color.set(value);
});
// 材质高光颜色specular
gui.addColor(obj, "specular").onChange(function (value) {
  material.specular.set(value);
});

// 环境光强度
gui.add(ambient, "intensity", 0, 2);
// 平行光强度
gui.add(directionalLight, "intensity", 0, 2);
// 平行光位置
gui.add(directionalLight.position, "x", -400, 400);
gui.add(directionalLight.position, "y", -400, 400);
gui.add(directionalLight.position, "z", -400, 400);

使用.addFolder()分组

环境光子菜单部分

const gui = new GUI();
let obj = {
  color: 0x00ffff, // 材质颜色
  specular: 0xff0000,
};
const matFolder = gui.addFolder("材质");

// 材质子菜单部分
matFolder.close();
matFolder.addColor(obj, "color").onChange(function (value) {
  material.color.set(value);
  console.log(material.specular.set(value));
});
matFolder.addColor(obj, "specular").onChange(function (value) {
  material.specular.set(value);
});

环境光子菜单部分

const ambientFolder = gui.addFolder("环境光");
ambientFolder.add(pointLight, "intensity", 0, 2);

平行光

const dirFolder = gui.addFolder("平行光强度");

// 光源辅助观察
// const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
// scene.add(pointLightHelper);
// const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
// directionalLight.position.set(100, 0, 0);

// // 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
// directionalLight.target = mesh;
// // 辅助观察
// const dirLightHelper = new THREE.DirectionalLightHelper(
//   directionalLight,
//   5,
//   0xff0000
// );
// // 添加辅助标识
// scene.add(dirLightHelper);
// // 添加平行光到场景中
// scene.add(directionalLight);
// 平行光强度
dirFolder.add(directionalLight, "intensity", 0, 2);
// 平行光位置
dirFolder.add(directionalLight.position, "x", -400, 400);
dirFolder.add(directionalLight.position, "y", -400, 400);
dirFolder.add(directionalLight.position, "z", -400, 400);

显示效果如下：
请添加图片描述

关闭.close()和展开.open()交互界面

用.close()和.open()方法可以设置默认是否折叠还是展开，默认状态为open()

// 菜单名称.close();
dirFolder.close();
matFolder.close();

效果如下：
请添加图片描述

.addFolder()子菜单嵌套

通过 addFolder 可以再次进行 addFolder 完成子菜单嵌套

const dirFolder2 = dirFolder.addFolder("位置"); //子菜单的子菜单

dirFolder.add(directionalLight, "intensity", 0, 2);
const dirFolder2 = dirFolder.addFolder("位置"); //子菜单的子菜单
dirFolder2.close(); //关闭菜单
// 平行光位置
dirFolder2.add(directionalLight.position, "x", -400, 400);
dirFolder2.add(directionalLight.position, "y", -400, 400);
dirFolder2.add(directionalLight.position, "z", -400, 400);

// 平行光位置
dirFolder.add(directionalLight.position, "x", -400, 400);
dirFolder.add(directionalLight.position, "y", -400, 400);
dirFolder.add(directionalLight.position, "z", -400, 400);
dirFolder.close();

请添加图片描述

至此可以基本的掌握了 three.js 中基本的用法，本专栏只用来学习交流，最后附上示例代码，详情可参考郭老师的电子书:http://www.webgl3d.cn/

<!-- author: Mr.J -->
<!-- date: 2023-04-12 11:43:45 -->
<!-- description: Vue3+JS代码块模板 -->
<template>
  <div class="container" ref="container"></div>
</template>

<script setup>
  import * as THREE from "three";
  // 轨道
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  import { ref, reactive, onMounted } from "vue";
  import { GUI } from "three/addons/libs/lil-gui.module.min.js";
  // 三个必备的参数
  let scene, camera, renderer, controls, mesh, stats, material;
  import Stats from "three/addons/libs/stats.module.js";
  // gui
  const gui = new GUI();
  // 旋转控制
  let obj = {
    color: 0x00ffff, // 材质颜色
    specular: 0xff0000,
  };
  const matFolder = gui.addFolder("材质");
  const ambientFolder = gui.addFolder("环境光");
  const dirFolder = gui.addFolder("平行光强度");
  onMounted(() => {
    // 外层需要获取到dom元素以及浏览器宽高，来对画布设置长宽
    // clientWidth等同于container.value.clientWidth
    let container = document.querySelector(".container");
    const { clientWidth, clientHeight } = container;
    console.log(clientHeight);
    init();
    render();

    // 首先需要获取场景，这里公共方法放在init函数中
    function init() {
      scene = new THREE.Scene();
      // 给相机设置一个背景
      scene.background = new THREE.Color(0xaaaaaa);
      // 透视投影相机PerspectiveCamera
      // 支持的参数：fov, aspect, near, far
      camera = new THREE.PerspectiveCamera(
        60,
        clientWidth / clientHeight,
        0.001,
        6000
      );
      // 相机坐标
      camera.position.set(300, 300, 300);
      // 相机观察目标
      camera.lookAt(scene.position);
      // 渲染器
      renderer = new THREE.WebGLRenderer({
        antialias: true,
      });
      // 渲染多大的地方
      renderer.setSize(clientWidth, clientHeight);

      container.appendChild(renderer.domElement);
      stats = new Stats();
      container.appendChild(stats.domElement);
      addBox();
      console.log("查看当前屏幕设备像素比", window.devicePixelRatio);
    }

    function addBox() {
      // 模型部分
      // 几何体
      const geometry = new THREE.BoxGeometry(100, 100, 100);
      // 材质
      material = new THREE.MeshPhongMaterial({
        color: 0x00ffff,
        transparent: true, //开启透明
        // opacity: 0.5, //设置透明度
        // side: THREE.DoubleSide, //两面可见
        shininess: 500,
        specular: 0xff0000, //高光部分的颜色
      });
      mesh = new THREE.Mesh(geometry, material);
      mesh.position.set(0, 0, 0);
      scene.add(mesh);
      guiFun();
    }

    function guiFun() {
      matFolder.close();
      matFolder.addColor(obj, "color").onChange(function (value) {
        material.color.set(value);
        console.log(material.specular.set(value));
      });
      matFolder.addColor(obj, "specular").onChange(function (value) {
        material.specular.set(value);
      });
      /*     const obj = {
      scale: 0,
    };
    // 参数3数据类型：对象(下拉菜单)
    gui.add(obj, "scale", {
        left: -100,
        center: 0,
        right: 100,
        // 左: -100,//可以用中文
        // 中: 0,
        // 右: 100
      })
      .name("位置选择")
      .onChange(function (value) {
        mesh.position.x = value;
      }); */
      /*     const obj = {
      bool: false,
    };
    // 改变的obj属性数据类型是布尔值，交互界面是单选框
    gui
      .add(obj, "bool")
      .name("是否旋转")
      .onChange(function (value) {
        // 点击单选框，控制台打印obj.bool变化
        console.log("obj.bool", value);
      }); */
    }

    // 相机控件
    const control = () => {
      controls = new OrbitControls(camera, renderer.domElement);
      controls.addEventListener("change", function () {
        // 浏览器控制台查看相机位置变化
        // console.log("camera.position", camera.position);
      });
    };
    control();

    // 光源
    const linght = () => {
      const pointLight = new THREE.PointLight(0xffffff, 1.0);
      pointLight.position.set(100, 60, 50);
      ambientFolder.add(pointLight, "intensity", 0, 2);
      scene.add(pointLight);

      // 光源辅助观察
      const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
      scene.add(pointLightHelper);
      const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
      directionalLight.position.set(100, 0, 0);

      // 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
      directionalLight.target = mesh;
      // 辅助观察
      const dirLightHelper = new THREE.DirectionalLightHelper(
        directionalLight,
        5,
        0xff0000
      );
      // 添加辅助标识
      scene.add(dirLightHelper);
      // 添加平行光到场景中
      scene.add(directionalLight);
      // 平行光强度
      dirFolder.add(directionalLight, "intensity", 0, 2);
      const dirFolder2 = dirFolder.addFolder("位置"); //子菜单的子菜单
      dirFolder2.close(); //关闭菜单
      // 平行光位置
      dirFolder2.add(directionalLight.position, "x", -400, 400);
      dirFolder2.add(directionalLight.position, "y", -400, 400);
      dirFolder2.add(directionalLight.position, "z", -400, 400);

      // 平行光位置
      dirFolder.add(directionalLight.position, "x", -400, 400);     b
      dirFolder.add(directionalLight.position, "y", -400, 400);
      dirFolder.add(directionalLight.position, "z", -400, 400);
      dirFolder.close();
    };
    linght();

    // gui.add(obj, "bool").name("旋转动画");
    function render() {
      // if (obj.bool) mesh.rotateY(0.01);
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
    window.addEventListener("resize", () => {
      // 更新摄像头
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
    /*   const obj = {
    bool: false,
  };
  gui.add(obj, "bool").name("旋转动画");
  const render = () => {
    if (obj.bool) mesh.rotateY(0.01);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  };
  render(); */
  });
</script>

<style>
  .container {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 1;
  }
</style>

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

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

相关文章

为什么我们要使用向量化运算

为什么我们要使用向量化运算

问题背景 如果你是matlab用户&#xff0c;你一般都会使用向量化运算进行编程。原因也许很简单&#xff0c;因为matlab针对向量化运算在底层做了深度优化&#xff0c;尤其是针对矩阵乘法调用了MKL之类的高度优化的第三库来加速。所以我们在推演算法的阶段&#xff0c;尽量的以向…
阅读更多...
管理后台项目-08-首页使用echarts展示图表数据

管理后台项目-08-首页使用echarts展示图表数据

目录 1-需求页面 2-头部需求分析 3-中间部分需求分析 3.1-mock数据 3.2-动态渲染数据 4-底部需求分析 1-需求页面 2-头部需求分析 上面头部有四个card&#xff0c;card分为上中下三部分&#xff0c;其中上都是文字描述和一个小图标&#xff1b;中间部分有文字&#xff0c;折…
阅读更多...
达梦数据库管理系统 DM8

达梦数据库管理系统 DM8

检查数据库版本及服务状态 //查看达梦数据库运行状态 SELECT status$ as 状态 FROM v$instance; //查看达梦数据库版本 SELECT banner as 版本信息 FROM v$version;创建用户 //创建用户 CREATE USER DM IDENTIFIED BY "dameng123";授予用户基本权限 使用 GRANT 语…
阅读更多...
重大问题，Windows11出现重大BUG（开始菜单掉帧，卡顿）

重大问题，Windows11出现重大BUG（开始菜单掉帧，卡顿）

重大问题&#xff0c;Windows11出现重大BUG 这种Windows11操作系统出现BUG已经可以说是非常常见的&#xff0c;但是&#xff0c;今天我将代表所有微软用户&#xff0c;解决一个关于UI设计非常不舒服的功能 关闭多平面覆盖 事情叙述问题 微软社区解决方案自己发现的解决方案解决…
阅读更多...
[链表OJ题 2] 链表的中间结点 -- 快慢指针找链表的中间节点

[链表OJ题 2] 链表的中间结点 -- 快慢指针找链表的中间节点

目录 题目来源&#xff1a; 代码实现 思路分析&#xff1a; 1.当链表个数为奇数 2.当链表个数为偶数 总结&#xff1a; 题目来源&#xff1a; 876. 链表的中间结点 - 力扣&#xff08;LeetCode&#xff09; (leetcode-cn.com) 题目描述&#xff1a; 代码实现 struct Li…
阅读更多...
Dart中的factory关键字用法

Dart中的factory关键字用法

factory简介 在Dart中,factory关键字用于定义工厂构造函数。它与普通的构造函数有以下几个区别: factory构造函数的调用可以返回子类型或其它类型的实例。普通构造函数总是返回其包含的类型的实例。factory构造函数可以有返回值。普通构造函数的返回值永远是其包含的类型的实…
阅读更多...
服务器中了勒索病毒，malox勒索病毒的加密方式及如何应对勒索病毒攻击

服务器中了勒索病毒，malox勒索病毒的加密方式及如何应对勒索病毒攻击

随着计算机技术的发展&#xff0c;计算机成为现代人工作和生活中必不可少的电子产品。但随着很多企业和个人用户的信息化建设不断升级&#xff0c;也经常会出现许多恶意软件。其中包括malox勒索病毒&#xff0c;malox勒索病毒是mallox勒索病毒新升级的加密程序&#xff0c;下面…
阅读更多...
使用 NutUI 搭建「自定义业务风格」的组件库 | 京东云技术团队

使用 NutUI 搭建「自定义业务风格」的组件库 | 京东云技术团队

作者&#xff1a;京东零售 佟恩 本文介绍&#xff0c;如何使用 NutUI 组件库&#xff0c;搭建一套为专属业务风格的业务组件库。 NutUI 是一款京东风格的移动端组件库。NutUI 目前支持 Vue 和 React技术栈&#xff0c;支持Taro多端适配。 当下的实现方式 一般组件库&#xff…
阅读更多...
Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么

Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么

Pinia从了解到实际运用——彻底搞懂什么是Pinia 知识回调&#xff08;不懂就看这儿&#xff01;&#xff09;场景复现什么是piniapinia相比vuex的优势为什么要使用pinia&#xff1f;基本示例 知识回调&#xff08;不懂就看这儿&#xff01;&#xff09; 知识专栏专栏链接Vuex知…
阅读更多...
Nginx 静态文件、反向代理、负载均衡、缓存、SSL/TLS 加密、gzip 压缩 等等

Nginx 静态文件、反向代理、负载均衡、缓存、SSL/TLS 加密、gzip 压缩 等等

Nginx的功能 1. 静态文件服务器2. 反向代理服务器3. 负载均衡4. 缓存5. SSL/TLS 加密6. URL 重写7. HTTP/28. WebSocket9. 反向代理缓存10. 安全限制11. gzip 压缩12. 请求限速13. 日志记录14. SSL 证书续订 Nginx 是一个高性能的开源 Web 服务器和反向代理服务器&#xff0c;它…
阅读更多...
ASEMI代理ADI亚德诺LTC3309AEV#TRMPBF车规级芯片

ASEMI代理ADI亚德诺LTC3309AEV#TRMPBF车规级芯片

编辑-Z LTC3309AEV#TRMPBF特点&#xff1a; 与 LTC3307(3A) 和 LTC3308(4A) 引脚兼容 高效率&#xff1a;8mΩ NMOS、31mΩ PMOS 可编程频率 1MHz 至 3MHz 微型电感器和电容器 峰值电流模式控制 22ns 最短接通时间 宽带宽&#xff0c;快速瞬态响应 Silent Switcher 架…
阅读更多...
虹科荣誉 | 虹科工业物联网产品荣获中国自动化产业年会用户信赖产品奖！

虹科荣誉 | 虹科工业物联网产品荣获中国自动化产业年会用户信赖产品奖！

2023 虹科荣获2021年度中国自动化产业年会用户信赖产品奖 近日&#xff0c;2023中国自动化产业年会于北京隆重举行。虹科工业物联网的产品“OPC UA Tunneller软件”凭借其产品优势和市场美誉度&#xff0c;通过层层选拔&#xff0c;在本次大会中荣获2021年度用户信赖产品奖。…
阅读更多...
【c语言】字符串计算长度 | API仿真

【c语言】字符串计算长度 | API仿真

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ …
阅读更多...
AB跳转轮询，让支付收款更加安全

AB跳转轮询，让支付收款更加安全

伴随跨境电商行业对出海用户运营精细化的要求愈发严格&#xff0c;移动支付作为一个快速发展的领域&#xff0c;很快就进入了“高台期”&#xff0c;这也意味着市场对于支付环节提出了更多新的要求——不只是能收款&#xff0c;还要收款更智能、服务更全面。 但事实上&#xff…
阅读更多...
数据链路层的重点协议

数据链路层的重点协议

数据链路层的重点协议 &#x1f50e;认识以太网以太网帧格式 &#x1f50e;认识MTU&#x1f50e;结尾 &#x1f50e;认识以太网 “以太网” 不是一种具体的网络, 而是一种技术标准. 既包含了数据链路层的内容, 也包含了一些物理层的内容(例如规定了网络拓扑结构, 访问控制方式…
阅读更多...
Windows平台下把Julia语言的程序编译打包为.exe可执行文件

Windows平台下把Julia语言的程序编译打包为.exe可执行文件

一、创建工程 1.在D盘(其它盘亦可)目录新建一个工程文件&#xff1a;Julia Projects&#xff08;自定义名称&#xff09; 目录即 D:\Julia Projects 2.打开Atom IDE编辑器 --->File--->Add Project Folder...--->选择刚刚新建的文件夹Julia Projects 3.右键Julia P…
阅读更多...
评判需求优先级5大规则和方法（纯干货）：

评判需求优先级5大规则和方法（纯干货）：

在划分用户需求时&#xff0c;需秉承需求任务紧跟核心业务指标&#xff0c;按照一定的规则和方法进行优先级的划分。 常见评判需求优先级规则有&#xff1a;四象限法则、KANO模型、二八原则、产品生命周期法、ROI评估法。 一、四象限法则 四象限法则是以【重要】和【紧急】程度…
阅读更多...
OPC UA/DA协议库open62541的win10下，cmake+MinGW/VC编译

OPC UA/DA协议库open62541的win10下，cmake+MinGW/VC编译

目录 一、下载源码 二、编译源码 三、案例编译 3.1 工程目录 3.2 server端 3.3 client端 3.4 程序运行 一、下载源码 win10系统&#xff0c;安装git工具 下载open62541库源码&#xff0c;该源码是MPLv2的License git clone --recursive https://github.com/open62541/open6…
阅读更多...
MobileNet（V1、V2、V3）入门

MobileNet（V1、V2、V3）入门

MobileNet 良好的移植性 可以很好的使用在移动设备上做分类、检测、分割等任务 深度可分离卷积&#xff08;v1核心&#xff09; 经典卷积算法中&#xff0c;输入的通道数要和过滤器的保持一致&#xff0c;这样很耗费参数 深度可分离卷积 第一步&#xff1a;有多少个输入&a…
阅读更多...
Linux学习记录——이십이 进程信号（1）

Linux学习记录——이십이 进程信号（1）

文章目录 1、了解信号2、了解信号处理3、信号产生1、键盘按键产生2、系统接口产生3、软件条件产生4、硬件异常 4、Core和Term的区别5、信号保存1、在系统中的表现形式2、信号集操作函数1、sigprocmask2、sigpending 6、重谈地址空间7、信号处理与捕捉sigaction 1、了解信号 信…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023