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

news2024/11/26 8:58:56

文章目录

  • 参考
  • 描述
  • 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.coloradmin.cn/o/333132.html

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

相关文章

Python基础及函数解读(深度学习)

Python基础及函数解读(深度学习)

一、语句1.加注释单行注释&#xff1a;&#xff08;1&#xff09;在代码上面加注释&#xff1a; # 后面跟一个空格&#xff08;2&#xff09;在代码后面加注释&#xff1a;和代码相距两个空格&#xff0c; # 后面再跟一个空格多行注释&#xff1a;按住shift 点击三次"&am…
阅读更多...
蓝桥杯刷题023——机器人塔（DFS）

蓝桥杯刷题023——机器人塔（DFS）

2016国赛 题目描述 X 星球的机器人表演拉拉队有两种服装&#xff0c;A 和 B。 他们这次表演的是搭机器人塔。 类似&#xff1a; A B B A B A A A B B B B B A B A B A B B A 队内的组塔规则是&#xff1a; A 只能站在 AA 或 BB 的肩上。 B 只能站在 AB 或 BA 的肩上。 你的任务…
阅读更多...
擎创动态 | 定了！建设银行首批生态合作伙伴

擎创动态 | 定了！建设银行首批生态合作伙伴

1月31日&#xff0c;建设银行以“云行金融之道&#xff0c;建可信未来”为主题在北京举办“建行云”发布会&#xff0c;首批推出三大类10个云服务套餐&#xff0c;为行业提供一站式解决方案。发布会上&#xff0c;建设银行推出“云霄”生态合作计划并公布首批39家“建行云”生态…
阅读更多...
基于vue-admin-element开发后台管理系统【技术点整理】

基于vue-admin-element开发后台管理系统【技术点整理】

一、Vue点击跳转外部链接 点击重新打开一个页面窗口&#xff0c;不覆盖当前的页面 window.open(https://www.baidu.com,"_blank")"_blank" 新打开一个窗口"_self" 覆盖当前的窗口例如&#xff1a;导入用户模板下载 templateDownload() {wi…
阅读更多...
化繁为简｜中信建投基于StarRocks构建统一查询服务平台

化繁为简｜中信建投基于StarRocks构建统一查询服务平台

近年来&#xff0c;在证券服务逐渐互联网化&#xff0c;以及券商牌照红利逐渐消退的行业背景下&#xff0c;中信建投不断加大对数字化的投入&#xff0c;尤其重视数据基础设施的建设&#xff0c;期望在客户服务、经营管理等多方面由经验依赖向数据驱动转变&#xff0c;从而提高…
阅读更多...
面试阿里测开岗，面试官说我不配24K，当场拍桌子翻脸....

面试阿里测开岗，面试官说我不配24K，当场拍桌子翻脸....

好家伙&#xff0c;这奇葩事可真是多&#xff0c;前两天和粉丝聊天&#xff0c;他说前段时间面试阿里的测开岗&#xff0c;最后和面试官干起来了。 我问他为什么&#xff0c;他说没啥&#xff0c;就觉得面试官太装了&#xff0c;我说要24K&#xff0c;他说太高了&#xff0c;说…
阅读更多...
中国区注册OpenAI账号试用ChatGPT指南

中国区注册OpenAI账号试用ChatGPT指南

OpenAI最近推出ChatGPT&#xff0c;但国内&#xff08;包括香港&#xff09;并不支持OpenAI账号注册&#xff0c;多数会提示&#xff1a; OpenAI’s services are not available in your country. 前期准备 科学上网&#xff0c;最好是美国IP&#xff08;可以购买v屁n&#xf…
阅读更多...
章鱼哥听歌

章鱼哥听歌

uboot环境变量 以下所有的命令&#xff0c;都在串口工具进行执行 ubifsmount- mount UBIFS volume ubifsumount- unmount UBIFS volume ums - Use the UMS [USB Mass Storage] usb - USB sub-system usbboot - boot from USB device version - print monit…
阅读更多...
EasyX精准帧率控制打气球小游戏

EasyX精准帧率控制打气球小游戏

&#x1f386;音乐分享 New Boy —— 房东的猫 之前都用Sleep&#xff08;&#xff09;来控制画面帧率&#xff0c;忽略了绘制画面的时间 如果绘制画面需要很长的时间&#xff0c;那么就不能忽略了。 并且Sleep&#xff08;&#xff09;函数也不是特别准确&#xff0c;那么就…
阅读更多...
day3——有关java运算符的笔记

day3——有关java运算符的笔记

今天主要学习的内容有java的运算符 赋值运算符算数运算符关系运算符逻辑运算符位运算符&#xff08;专门写一篇笔记&#xff09;条件运算符运算符的优先级流程控制 赋值运算符 赋值运算符&#xff08;&#xff09;主要用于给变量赋值&#xff0c;可以跟算数运算符相结合&…
阅读更多...
【✨十五天搞定电工基础】基本放大电路

【✨十五天搞定电工基础】基本放大电路

本章要求1. 理解放大电路的放大作用和共发射极放大电路的性能特点&#xff1b; 2. 掌握静态工作点的估算方法和放大电路的微变等效电路分析法&#xff1b; 3. 了解放大电路输入、输出电阻和电压放大倍数的计算方法&#xff0c;了解放大电路的频率特性、 互补功率放大…
阅读更多...
八、STM32串口通信

八、STM32串口通信

目录 一、串口通信 1.1串口通信物理层 1.2USB转串口模块 1.3串口通信的其他应用 1.4串口数据包的基本组成 二、串口的结构体与函数讲解 2.1串口讲解 2.2结构体讲解 2.3串口初始化函数讲解 三、串口发送字符 3.1如何配置串口的发送 3.2项目实战 四、串口的中断接收 …
阅读更多...
一文搞懂 什么是CPU上下文？为什么要切换？如何减少切换？

一文搞懂 什么是CPU上下文？为什么要切换？如何减少切换？

最近经常有小伙伴问到的一些问题&#xff0c;比较集中的是关于CPU切换. 实际用C/C&#xff0c;go开发&#xff0c;你会特别注意内存和CPU的使用情况&#xff0c;那些对于CPU使用情况特别关注&#xff0c;或者性能特别关注的朋友可以看看这篇文章&#xff0c;相信看完结尾的示例…
阅读更多...
二、Linux文件 - Open函数讲解实战

二、Linux文件 - Open函数讲解实战

目录 1.Open函数讲解 2.open函数实战 2.1 man 1 ls 查询Shell命令 2.2 man 2 open 查看系统调用函数 2.3项目实战 2.3.1O_RDWR和O_CREAT 2.3.2O_APPEND的用法 1.Open函数讲解 高频使用的Linux系统调用&#xff1a;open write read close Linux自带的工具&#xf…
阅读更多...
C语言实现五子棋(n子棋)

C语言实现五子棋(n子棋)

五子棋的历史背景&#xff1a; 五子棋起源于中国&#xff0c;是全国智力运动会竞技项目之一&#xff0c;是一种两人对弈的纯策略型棋类游戏。双方分别使用黑白两色的棋子&#xff0c;下在棋盘直线与横线的交叉点上&#xff0c;先形成五子连珠者获胜。五子棋容易上手&#xff0c…
阅读更多...
c/c++开发，无可避免的文件访问开发案例

c/c++开发，无可避免的文件访问开发案例

一、缓存文件系统 ANSI C标准中的C语言库提供了fopen, fclose, fread, fwrite, fgetc, fgets, fputc, fputs, freopen, fseek, ftell, rewind等标准函数&#xff0c;这些函数在不同的操作系统中应该调用不同的内核API&#xff0c;从而支持开发者跨平台实现对文件的访问。 在Lin…
阅读更多...
【九宫格坐标排列 Objective-C语言】

【九宫格坐标排列 Objective-C语言】

一、这个案例做好之后的效果如图： 1.这个下载是可以点击的，当你点击之后，弹出一个框，过一会儿，框框自动消失，这里变成“已安装” 2.那么，我现在先问大家一句话：大家认为在这一个应用里面，它包含几个控件， 3个，哪3个：一个是图片框，一个是Label，一个是按钮， 这…
阅读更多...
python学习笔记-查看数据结构、均值、中位数、分位数、众数、离中趋势（标准差、方差、求和、偏态系数、风险系数）正态分布pdf、cdf、ppf

python学习笔记-查看数据结构、均值、中位数、分位数、众数、离中趋势（标准差、方差、求和、偏态系数、风险系数）正态分布pdf、cdf、ppf

①引入pandas包&#xff0c;命名为pd。 import pandas as pd ②读入HR.csv数据 dfpd.read_csv(“./data/HR.csv”) ③查看是什么结构 type(df) ④查看单个类别satisfaction_level的数据结构 type(df[“satisfaction_level”]) ⑤查看均值的数据结构 type(df.mean()) …
阅读更多...
运行Whisper笔记（1）

运行Whisper笔记（1）

最近chatGPT很火&#xff0c;就去逛了一下openai的github项目。发现了这个项目。 这个项目可以识别视频中的音频&#xff0c;转换出字幕。 带着一颗好奇的心就尝试自己去部署玩一玩 跟着这篇文章一步步来进行安装&#xff0c;并且跟着这篇文章解决途中遇到的问题。 途中还会遇…
阅读更多...
男，26岁，做了一年多的自动化测试，最近在纠结要不要转行，求指点。？

男，26岁，做了一年多的自动化测试，最近在纠结要不要转行，求指点。？

最近一个粉丝在后台问我&#xff0c;啊大佬我现在26了&#xff0c;做了做了一年多的自动化测试&#xff0c;最近在纠结要不要转行&#xff0c;求指点。首选做IT这条路&#xff0c;就是很普通的技术蓝领。对于大部分来说干一辈子问题不大&#xff0c;但是发不了什么财。如果你在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023