当前位置：首页 > news >正文

【小沐学Web3D】three.js 加载三维模型（React Three Fiber）

news 来源：原创 2025/9/2 1:18:08

文章目录

1、简介
- 1.1 Three.js
- 1.2 React Three Fiber
2、测试
- 2.1 初始化环境
- 2.2 app.js修改（显示内置立方体）
- 2.3 app.js修改（显示内置球体）
- 2.4 app.js修改（显示自定义立方体）
- 2.5 app.js修改（显示多个模型）
- 2.6 app.js修改（加载obj模型）
- 2.7 app.js修改（物理效果）
结语

1、简介

1.1 Three.js

Three.js 是一个功能强大的 3D 图形库，用于在网页上创建和显示交互式 3D 图形。它基于 WebGL，提供了简单易用的 API，帮助开发者快速构建复杂的 3D 场景。

npm install three

1.2 React Three Fiber

React Three Fiber 是一个 React 的绑定库，用于在 React 应用中创建和管理 3D 场景。它基于 Three.js，提供了声明式的 API，使 3D 开发更加直观和高效。

npm install three @react-three/fiber

2、测试

2.1 初始化环境

创建应用:

npx create-react-app@latest my-app

在这里插入图片描述
运行一下react初始环境:

cd my-app
npm start

在这里插入图片描述

安装依赖:

npm install three @react-three/fiber

在这里插入图片描述

npm install @react-three/drei

在这里插入图片描述
修改index.css:

body {margin: 0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}code {font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',monospace;
}
* {box-sizing: border-box;
}html,
body,
#root {width: 100%;height: 100%;margin: 0;padding: 0;
}body {background: #f0f0f0;
}

2.2 app.js修改（显示内置立方体）

修改App.js代码：

import {useState,useRef} from "react"
import {Canvas, useFrame} from "@react-three/fiber"function App() {return (<Canvas><ambientLight intensity={0.1} /><directionalLight color="red" position={[0, 0, 3]} /><mesh><boxGeometry /><meshStandardMaterial /></mesh>
</Canvas>);
}export default App;

运行如下：
在这里插入图片描述

2.3 app.js修改（显示内置球体）

修改App.js代码：

import {useState,useRef} from "react"
import { Canvas, useFrame} from "@react-three/fiber"function App() {return (<Canvas><ambientLight intensity={0.1} /><directionalLight color="red" position={[0, 0, 5]} /><mesh visible userData={{ hello: 'world' }} position={[1, 0, 3]} rotation={[Math.PI / 2, 0, 0]}><sphereGeometry args={[1, 16, 16]} /><meshStandardMaterial color="hotpink" transparent /></mesh></Canvas>);
}export default App;

运行如下：
在这里插入图片描述

2.4 app.js修改（显示自定义立方体）

修改App.js代码：

import React, { Suspense } from 'react'
import { BoxGeometry, MeshStandardMaterial } from 'three'
import { Canvas } from '@react-three/fiber'
import { ContactShadows, OrbitControls } from '@react-three/drei'const ball = new BoxGeometry()
const mtl1 = new MeshStandardMaterial({ color: '#f00' })export default function Demo () {return (<Canvas style={{ height: 800 }} camera={{ fov: 75, near: 0.1, far: 1000, position: [2, 1, 2] }}><Suspense fallback={null}><ambientLight intensity={0.1} /><directionalLight color={'#fff'} intensity={1} position={[-3, 5, 5]} /><mesh geometry={ball} material={mtl1} /><OrbitControls makeDefault /><ContactShadows rotation-x={Math.PI / 2} position={[0, -1.4, 0]} opacity={0.75} width={10} height={10} blur={2.6} far={2} /><color attach='background' args={['#aaa']} /></Suspense></Canvas>)
}

运行如下：
在这里插入图片描述

2.5 app.js修改（显示多个模型）

修改App.js代码：

import { useRef, useState, useEffect } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'function Box(props) {// This reference gives us direct access to the THREE.Mesh objectconst ref = useRef()// Hold state for hovered and clicked eventsconst [hovered, hover] = useState(false)const [clicked, click] = useState(false)// Subscribe this component to the render-loop, rotate the mesh every frameuseFrame((state, delta) => (ref.current.rotation.x += delta))// Return the view, these are regular Threejs elements expressed in JSXreturn (<mesh{...props}ref={ref}scale={clicked ? 1.5 : 1}onClick={(event) => click(!clicked)}onPointerOver={(event) => (event.stopPropagation(), hover(true))}onPointerOut={(event) => hover(false)}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} /></mesh>)
}export default function App() {return (<Canvascamera={{ position: [0, 0, 2] }} // 初始相机位置><ambientLight intensity={Math.PI / 2} /><spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} /><pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} /><Box position={[-1.2, 0, 0]} /><Box position={[1.2, 0, 0]} /><Box position={[3.2, 0, 0]} /><OrbitControls /></Canvas>)
}

在这里插入图片描述

2.6 app.js修改（加载obj模型）

修改App.js代码：

import React, { Suspense, useRef } from 'react'
import { AxesHelper } from 'three'
import { Canvas, useLoader } from '@react-three/fiber'
import { Environment, OrbitControls, Stats } from '@react-three/drei'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'function MyMesh () {const src = '/obj/cow.obj'const object = useLoader(OBJLoader, src)console.log(object)return (<primitive object={object} />)
}export default function Demo () {const statRef = useRef(null)return (<div ref={statRef}><Stats showPanel={0} parent={statRef} style={{ top: 'auto', bottom: 0 }} /><Canvas style={{ height: 800 }} camera={{ fov: 75, near: 0.1, far: 1000, position: [2, 1, 2] }}><Suspense fallback={null}><directionalLight color={'#fff'} intensity={1} position={[-3, 5, 5]} /><primitive object={new AxesHelper(100)} /><MyMesh /><OrbitControls makeDefault /><color attach='background' args={['#aaa']} /><Environmentbackground={false} preset={null} scene={undefined}path={'/skybox/'}files={['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']}/></Suspense></Canvas></div>)
}

运行如下：
在这里插入图片描述

2.7 app.js修改（物理效果）

npm install @react-three/cannon

在这里插入图片描述

import { useEffect, useState } from 'react'
import { Canvas } from '@react-three/fiber'
import { Physics, usePlane, useBox } from '@react-three/cannon'function Plane(props) {const [ref] = usePlane(() => ({ rotation: [-Math.PI / 2, 0, 0], ...props }))return (<mesh receiveShadow ref={ref}><planeGeometry args={[1000, 1000]} /><meshStandardMaterial color="#f0f0f0" /></mesh>)
}function Cube(props) {const [ref] = useBox(() => ({ mass: 1, ...props }))return (<mesh castShadow ref={ref}><boxGeometry /><meshStandardMaterial color="orange" /></mesh>)
}export default function App() {const [ready, set] = useState(false)useEffect(() => {const timeout = setTimeout(() => set(true), 1000)return () => clearTimeout(timeout)}, [])return (<Canvas dpr={[1, 2]} shadows camera={{ position: [-5, 5, 5], fov: 50 }}><ambientLight intensity={Math.PI / 2} /><spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} /><pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} /><spotLight angle={0.25} penumbra={0.5} position={[10, 10, 5]} castShadow /><Physics><Plane /><Cube position={[0, 5, 0]} /><Cube position={[0.45, 7, -0.25]} /><Cube position={[-0.45, 9, 0.25]} />{ready && <Cube position={[-0.45, 10, 0.25]} />}</Physics></Canvas>)
}

在这里插入图片描述

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！

【小沐学Web3D】three.js 加载三维模型（React Three Fiber）

文章目录 1、简介1.1 Three.js1.2 React Three Fiber 2、测试2.1 初始化环境2.2 app.js修改（显示内置立方体）2.3 app.js修改（显示内置球体）2.4 app.js修改（显示自定义立方体）2.5 app.js修改（显示…...

编程日记 2025/9/2 1:18:08

HTTP查询参数示例（XMLHttpRequest查询参数）（带查询参数的HTTP接口示例——以python flask接口为例）flask查询接口

文章目录 HTTP查询参数请求示例接口文档——获取城市列表代码示例效果带查询参数的HTTP接口示例——以python flask接口为例app.pyREADME.md运行应用API示例客户端示例关键实现说明：运行方法： HTTP查询参数请求示例接口文档——获取城市列表代码示例…...

编程日记 2025/9/1 1:55:00

【玩泰山派】1、mac上使用串口连接泰山派

文章目录前言picocom工具连接泰山派安装picocom工具安装ch340的驱动串口工具接线使用picocom连接泰山派参考前言 windows上面有xshell这个好用的工具可以使用串口连接板子，在mac上好像没找到太好的工具，只能使用命令行工具去搞了。之前查找说mac上…...

编程日记 2025/8/31 18:07:54

【玩泰山派】0、mac utm安装windows10

文章目录前言安装过程utm安装下载windows ios镜像安装windows系统解决共享文件夹拷贝受限问题参考前言使用mac开发泰山派，但是买的泰山派没有emmc，只有sd卡，要使用瑞芯微的sd卡烧录工具，这个工具好像只支持windows&#xff0…...

编程日记 2025/9/1 17:00:22

效果图： <div class"separator">文本 </div>.separator {width: 40%;border-style: dashed;display: flex;align-items: center;color: #e2e2e2;font-size: 14px;line-height: 20px;border-color: #e2e2e2;border-width: 0; }.separator::bef…...

编程日记 2025/9/2 1:15:42

Android学习总结之应用启动流程（从点击图标到界面显示）

一、用户交互触发：Launcher 到 AMS 的跨进程通信 1. Launcher 处理点击事件（应用层） 当用户点击手机桌面上的应用图标时，Launcher（桌面应用）首先捕获点击事件。每个图标对应一个启动 Intent（通…...

编程日记 2025/8/31 23:02:52

Vue2与Vue3不同

Vue3 设计思想与核心变化详解一、Vue3 设计思想与 Vue2 差异对比响应式系统重构Vue2 实现（基于 Object.defineProperty） // 在 Vue2 中，通过 data 选项返回一个对象，对象中的属性会被 Object.defineProperty 转换为响应式数据…...

编程日记 2025/8/28 17:56:56

《Java实战：素数检测算法优化全解析——从暴力枚举到筛法进阶》

文章目录摘要一、需求分析二、基础实现代码与问题原始代码（暴力枚举法）问题分析三、优化版代码与解析优化1：平方根范围剪枝优化2：偶数快速跳过完整优化代码四、性能对比五、高阶优化：埃拉托斯特尼筛法算法思想代码实…...

编程日记 2025/9/1 11:24:20

解决报错：node:internal/errors:496 ErrorCaptureStackTrace(err)；

报错信息我使用npm init vuelatest创建项目时出现如下报错 node:internal/errors:496 ErrorCaptureStackTrace(err); ^ TypeError [ERR_IMPORT_ASSERTION_TYPE_MISSING]: Module “file:///D:/develop/nodejs/node_cache/_npx/2f7e7bff16d1c534/node_modules/create-vue/loc…...

编程日记 2025/9/1 1:45:25

【Linux笔记】进程管理章节笔记

一、进程与线程的概念 1、进程 1）概念进程是程序的执行实例，拥有独立的资源（如内存、文件描述符等）。每个进程在创建时会被分配唯一的进程ID，即为PID，也叫进程编号。 2）特点资源隔离&#…...

编程日记 2025/9/1 11:36:33

使用Webpack搭建React项目：从零开始

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…...

编程日记 2025/9/1 20:09:47

使用Cusor 生成 Figma UI 设计稿

一、开发环境系统：MacOS 软件版本： Figma（网页或APP版） 注：最好是app版，网页版figma 没有选项 import from manifest app下载地址：Figma Downloads | Web Design App for Desktops & …...

编程日记 2025/8/31 15:16:48

前端 vs 后端：技术分工详解——从用户界面到系统逻辑的全解析

前端（Frontend） 和后端（Backend） 是软件开发中两个核心概念，分别对应用户直接交互的部分和系统背后的逻辑处理部分。它们共同构成完整的应用程序，但分工不同。目录一、前端（Frontend&#xf…...

编程日记 2025/8/29 19:15:29

CentOS 7上配置SQL Server链接其他SQL Server服务器

概述本文介绍在CentOS 7系统上运行的SQL Server如何链接访问其他SQL Server服务器的详细步骤，包括驱动安装、配置和连接测试。安装必要组件 1. 安装ODBC驱动 # 安装基础ODBC组件 sudo yum install unixODBC unixODBC-devel# 添加Microsoft仓库 curl https://p…...

编程日记 2025/9/1 7:34:42

Scade One - 将MBD技术从少数高安全领域向更广泛的安全嵌入式软件普及

Scade One是继Scade Suite version 6自2008年起发展近20年后的首次主要改进版本。在Scade One发布的同时，Scade团队发布了一系列介绍Scade One的博客。本篇Scade One - Democratizing model-based development是其中的一部分。在后面的内容中，将复述博客…...

编程日记 2025/9/1 3:55:44

第十二章:容器间网络_《凤凰架构：构建可靠的大型分布式系统》

第十二章容器间网络一、Linux网络虚拟化基础 1. 网络命名空间（Network Namespace） 隔离网络栈：每个网络命名空间拥有独立的IP地址、路由表、防火墙规则等网络配置。实现方式：通过ip netns命令管理，容器启动时自动创…...

编程日记 2025/9/1 18:58:10

详解七大排序

目录一.直接插入排序 （1）基本思想 （2）算法步骤 （3）代码实现 （4）算法特性 （5）算法优化 （6）示例演示二.希尔排序 &#xff08…...

编程日记 2025/9/1 22:36:01

第八章 Python基础进阶-数据可视化（终）

此章节练习主要分为：折线图、地图、柱状图，若用户只是学习Python的基础语法知识，可以不看此章节。主要是讲解第三方包PyEcharts技术，Python数据的可视化操作。一.json数据格式 json的概念： （1&#x…...

编程日记 2025/8/31 22:41:00

【Hadoop3.1.4】完全分布式集群搭建

一、虚拟机的建立与连接 1.建立虚拟机详情见【Linux】虚拟机的安装把上面三个参数改掉 2.连接虚拟机具体见【Linux】远程连接虚拟机防火墙二、修改主机名在Centos7中直接使用root用户执行hostnamectl命令修改，重启（reboot）后永久生…...

编程日记 2025/9/1 1:29:43

NLP简介及其发展历史

自然语言处理（Natural Language Processing，简称NLP）是人工智能和计算机科学领域中的一个重要分支，致力于实现人与计算机之间自然、高效的语言交流。本文将介绍NLP的基本概念以及其发展历史。一、什么是自然语言处理&#xff1f…...

编程日记 2025/9/1 18:22:38

Java异步编程中的CompletableFuture介绍、常见错误及最佳实践

一、Future接口的局限性 Java 5引入的Future接口为异步编程提供了基础支持，但其设计存在明显局限性，导致复杂场景下难以满足需求： 阻塞获取结果必须通过future.get()阻塞线程等待结果，无法实现真正的非阻塞： Executo…...

编程日记 2025/9/1 14:26:14

基于FLask的共享单车需求数据可视化分析系统

【FLask】基于FLask的共享单车需求数据可视化分析系统 （完整系统源码开发笔记详细部署教程）✅ 目录一、项目简介二、项目界面展示三、项目视频展示一、项目简介该系统能够整合并处理大量共享单车使用数据，通过直观的可视化手段&#xff0…...

编程日记 2025/9/1 17:26:42

vue2项目中，多个固定的请求域名和通过url动态获取到的ip域名封装 axios

vue2 使用场景：项目中，有固定的请求域名，而有某些接口是其他域名 /utils/request.js 固定请求域名 import axios from axios import Vue from vuelet baseURL switch (window.location.hostname) {case localhost: // 本地case 127.0.0.1…...

编程日记 2025/8/31 7:29:43

【嵌入式学习3】基于python的tcp客户端、服务器

目录 1、tcp客户端 2、tcp服务器 3、服务器多次连接客户端、多次接收信息 1、tcp客户端 """ tcp:客户端 1. 导入socket模块 2. 创建socket套接字 3. 建立tcp连接(和服务端建立连接) 4. 开始发送数据(到服务端) 5. 关闭套接字 """ import soc…...

编程日记 2025/8/31 16:42:24

tomcat构建源码环境

一. IDEA运行Tomcat8源码参考网址：https://blog.csdn.net/yekong1225/article/details/81000446 Tomcat作为J2EE的开源实现，其代码具有很高的参考价值，我们可以从中汲取很多的知识。作为Java后端程序员，相信有很多人很想了解…...

编程日记 2025/9/1 1:22:09

你用的是Bing吗？！

🔥【深度解析】微软Bing革命性升级！Copilot Search上线：从此搜索≠找链接，而是直接生成答案！ 💡 你是否厌倦了这样的搜索体验？ 搜索「Python处理JSON」，在10个网页间反复跳转想对比…...

编程日记 2025/9/1 15:07:38

拍摄的婚庆视频有些DAT的视频文件打不开怎么办

3-12 现在的婚庆公司大多提供结婚的拍摄服务，或者有一些第三方公司做这方面业务，对于视频拍摄来说，有时候会遇到这样一种问题，就是拍摄下来的视频文件，然后会有一两个视频文件是损坏的，播放不了&#xff0…...

编程日记 2025/8/30 20:22:14

Oracle Cloud (OCI) 服务器最新控制台启用 IPv6 超详细图文指南（2025最新实践）

本文为原作者发布到第三方平台，更多内容参考： 🚀 Oracle Cloud (OCI) 服务器最新控制台启用 IPv6 超详细图文指南（2025最新实践）随着 IPv6 的普及，IPv6的优秀特性能为你的 OCI 云服务器提升网络性能和路由效率，并提升兼容性。本指南将引导你在 Oracle Cloud Infrast…...

编程日记 2025/9/2 0:42:35

YOLO环境搭建，win11+wsl2+ubuntu24+cuda12.6+idea

提示：环境搭建文章目录前言一、 win11 gpu 驱动更新1.1 下载驱动3. 验证， 二、配置子系统 ubuntu2.1 安装 cuda 三、配置 anaconda四、idea 配置使用 wsl ubuntu conda 环境前言提示：版本 win11 wsl2 ubuntu24 idea 2024 子系统跳过&…...

编程日记 2025/8/31 4:17:29

类和对象的介绍

对象的本质是一种新的数据类型。类是一个模型，对象是类的一个具体化实例。为类创建实例也就是创建对象。一、类（class） 类决定一个对象将是什么样的（有什么属性、功能）。类和变量一样，有名字。 1.创建类 …...

编程日记 2025/8/30 15:09:53

机器学习（1）—线性回归

文章目录 1. 算法定义2. 模型形式2.1. 简单线性回归（单变量）：2.2. 多元线性回归（多变量）： 3. 基本原理3.1. 误差函数：3.2. 求解回归系数 4. 假设条件5. 模型评估6. 优缺点7. 扩展方法8. 应用场景…...

编程日记 2025/9/1 21:47:22

macOS下SourceInsight的替代品

macOS 推荐的几款开源、轻量级、且功能类似于 SourceInsight 的源码阅读工具（排除 VS Code）： 1. Zeal（离线文档简单代码导航） 官网/GitHub: https://zealdocs.org/特点： 轻量级离线文档浏览器&#xff0…...

编程日记 2025/9/1 21:35:15

form实现pdf文件转换成jpg文件

说明： 我希望将pdf文件转换成jpg文件请去下载并安装 Ghostscript，gs10050w64.exe 配置环境变量：D:\Program Files\gs\gs10.05.0\bin 本地pdf路径：C:\Users\wangrusheng\Documents\name.pdf 输出文件目录：C:\Users\wan…...

编程日记 2025/8/31 21:29:00

聊天室项目之http知识

一.http的核心组成部分（都分成请求的和响应的） 1.起始行：请求------------------------ 方法（Method）：GET、POST、PUT、DELETE 等。请求目标（Request Target）：URL 路径…...

编程日记 2025/8/30 1:00:53

kubeadm部署 Kubernetes(k8s) 高可用集群 V1.28.2

1. 安装要求在开始之前，部署Kubernetes集群机器需要满足以下几个条件： 10台机器，操作系统Openeuler22.03 LTS SP4硬件配置：2GB或更多RAM，2个CPU或更多CPU，硬盘30GB或更多，docker 数据卷单独挂…...

编程日记 2025/9/1 17:22:00

BUUCTF-web刷题篇(12)

21.easy_tornado Tornado大致可以分为四个主要组成部分： 一个web框架（包括RequestHandler创建Web应用程序的子类，以及各种支持类）。 HTTPServerHTTP（和AsyncHTTPClient）的客户端和服务器端实现。一个异…...

编程日记 2025/9/1 21:35:19

基于 Netty 框架的 Java TCP 服务器端实现，用于启动一个 TCP 服务器来处理客户端的连接和数据传输

代码： package com.example.tpson_tcp;import io.netty.bootstrap.ServerBootstrap; import io.netty.channel.ChannelFuture; import io.netty.channel.ChannelInitializer; import io.netty.channel.ChannelOption; import io.netty.channel.EventLoopGroup; imp…...

编程日记 2025/8/31 6:40:51

【Kafka基础】Kafka配置文件关键参数解析与单机生产环境配置指南

1 Kafka配置文件概述 Apache Kafka的配置文件是控制其行为的关键所在，合理的配置能够显著提升性能、可靠性和可维护性。Kafka主要涉及两个核心配置文件： server.properties：Broker主配置文件zookeeper.properties：ZooKeeper配置文…...

编程日记 2025/9/1 22:38:15

Kafka 漏消费和重复消费问题

Kafka 虽然是一个高可靠、高吞吐的消息系统，但如果使用不当，**“漏消费”和“重复消费”**问题是非常容易发生的，尤其在业务系统中会造成数据丢失、重复写库等严重问题。 🎯 一句话理解： Kafka 本身提供 “至多一次”…...

编程日记 2025/8/31 21:57:59

Mysql慢查询设置和建立索引

1 .mysql慢查询的设置 slow_query_log ON //或 slow_query_log_file /usr/local/mysql/data/slow.log long_query_time 2 修改后重启动mysql 1.1 查看设置后的参数 mysql> show variables like slow_query%; --------------------------------------------------…...

编程日记 2025/9/1 18:55:48

Windows程序中计时器WM_TIMER消息的使用

本文章是对《Windows程序设计》这本书第八章计时器的总结，如果有时间，可以去看书里的讲解，如果时间不充裕，想马上知道计时器该如何使用，欢迎阅读本文，本文已经将计时器的干货整理完毕！ 什么是计…...

编程日记 2025/9/1 20:27:56

关于apple ios苹果mdm监管锁的漏洞与修复

前言本人从2020年开始接触苹果mdm管理系统的开发起初只是接触如何利用mdm进行app分发 23年开始开发mdm监管锁业务随着手机租赁的市场兴起 mdm监管锁系统随即而生注意本人只是分享工作过程中遇到的一些问题不接受苹果手机屏蔽以及解锁的业务此文章仅做分享使用 MDM监…...

编程日记 2025/9/1 6:18:55

使用Geotools中的原始方法来操作PostGIS空间数据库

目录前言一、原生PostGIS连接介绍 1、连接参数说明 2、创建DataStore 二、工程实战 1、Maven Pom.xml定义 2、空间数据库表 3、读取空间表的数据三、总结前言在当今数字化与信息化飞速发展的时代，空间数据的处理与分析已成为众多领域不可或缺的一环。从…...

编程日记 2025/9/1 18:25:49

C-S模式之实现一对一聊天

天天开心！！！ 文章目录一、如何实现一对一聊天？1. 服务器设计2. 客户端设计3. 服务端代码实现4. 客户端代码实现5. 实现说明6.实验结果二、改进常见的服务器高并发方案1. 多线程/多进程模型2. I/O多路复用3. 异步I/O（…...

编程日记 2025/9/1 9:24:02

Kafka Consumer Group

Kafka 消费者组（Consumer Group） 是 Kafka 的核心机制之一！理解它对你掌握 Kafka 的高可用、高吞吐、负载均衡等能力非常关键。下面我来给你完整讲一讲👇 🧠 什么是 Kafka 消费者组（Consumer Group&#x…...

编程日记 2025/9/1 9:06:57

LangChain vs LlamaIndex：大模型应用开发框架深度对比与实战指南

一、引言：大模型时代的应用开发挑战随着ChatGPT、LLaMA等大语言模型的爆发式发展，如何高效构建「大模型+垂直领域」的智能应用成为新课题。传统开发模式面临三大痛点：数据交互复杂：大模型与本地数据的融合缺乏标准化接口功能扩展困难：链式调用、工具集成需要重复造轮子…...

编程日记 2025/8/31 17:50:45

第二章:访问远程服务_《凤凰架构：构建可靠的大型分布式系统》

第二章访问远程服务 2.1 远程服务调用（RPC） 2.1.1 进程间通信机制核心方式： 管道（Pipe）：单向通信，用于父子进程信号（Signal）：异步事件通知，不…...

编程日记 2025/8/29 4:04:42

一键自动备份：数据安全的双重保障

随着数字化时代的到来，数据已成为企业和个人不可或缺的核心资产。在享受数据带来的便捷与高效的同时，数据丢失的风险也随之增加。因此，备份文件的重要性不言而喻。本文将深入探讨备份文件的重要性，并介绍两种实用的自动备份方法&a…...

编程日记 2025/9/1 19:54:03

C++11之std::is_convertible

目录 1.简介 2.实现原理 3.使用场景 4.总结 1.简介 std::is_convertible 是 C 标准库 <type_traits> 头文件中的一个类型特性（type trait），它用于在编译时检查一个类型是否可以隐式转换为另一个类型。下面的原型： temp…...

编程日记 2025/9/1 19:45:02

从零开始：在Qt中使用OpenGL绘制指南

从零开始：在Qt中使用OpenGL绘制指南本文只介绍基本的 QOpenGLWidget 和 QOpenGLFunctions 的使用，想要学习 OpenGL 的朋友，建议访问经典 OpenGL 学习网站：LearnOpenGL CN 本篇文章，我们将以绘制一个经典的三角形为例&…...

编程日记 2025/8/31 20:41:08

文章目录

1、简介

1.1 Three.js

1.2 React Three Fiber

2、测试

2.1 初始化环境

2.2 app.js修改（显示内置立方体）

2.3 app.js修改（显示内置球体）

2.4 app.js修改（显示自定义立方体）

2.5 app.js修改（显示多个模型）

2.6 app.js修改（加载obj模型）

2.7 app.js修改（物理效果）

结语

相关文章：