joken1310 - 博客园

threejs 如何实现室内全景看房

摘要：在 Three.js 中实现全景看房功能，通常需要结合全景图像（Equirectangular 图像）和 First-Person 视角控制来模拟用户在房间内的自由浏览体验。以下是实现全景看房的主要步骤和关键概念。结论通过加载全景图作为场景的背景，并使用 OrbitControls 或自定阅读全文

posted @ 2025-03-03 20:54 joken1310 阅读(213) 评论(0) 推荐(1)

threejs 重要的概念、术语

摘要： Three.js 是一个功能强大的 JavaScript 库，用于创建和展示基于 WebGL 的三维图形。以下是 Three.js 中一些重要的概念和术语的介绍： 1. 场景（Scene）定义：场景是所有三维对象的容器，用于存储和管理几何体、光源、相机等元素。作用：场景是渲染的基础，所有需要显示阅读全文

posted @ 2025-03-03 20:49 joken1310 阅读(60) 评论(0) 推荐(0)

threejs 捕捉mesh几何体点击某个材料事件捕捉

摘要：在 Three.js 中，可以通过 Raycaster 和 Intersection 来实现对 Mesh 材质或几何体的点击事件捕捉。具体来说，当用户点击画布时，可以发射一条射线（Ray），检测射线与场景中对象的交点，从而判断是否点击到了某个 Mesh。结论使用 THREE.Raycaster 阅读全文

posted @ 2025-03-03 20:45 joken1310 阅读(131) 评论(0) 推荐(0)

threejs 如何替换不同区块的纹理图片demo

摘要：目标点击模型的某个区域时，弹出图片选择框。用户选择新图片后，替换该区域的纹理。实现步骤 1. 创建基础场景设置 Three.js 的场景、相机、渲染器和光源。 import * as THREE from 'three'; import { GLTFLoader } from 'three/ 阅读全文

posted @ 2025-02-27 23:30 joken1310 阅读(103) 评论(0) 推荐(0)

threejs GLTFLoader加载器

摘要： GLTFLoader 是 Three.js 提供的一个加载器（loader），专门用于加载 GLTF (GL Transmission Format) 和 GLB 格式的 3D 模型文件。明确指令确认 GLTFLoader 是否属于 Three.js 库的一部分。解释其作用和使用场景。解决方阅读全文

posted @ 2025-02-27 23:19 joken1310 阅读(816) 评论(0) 推荐(0)

Vue 3 项目中使用 Three.js 加载模型并添加纹理

摘要：在 Vue 3 项目中使用 Three.js 加载模型并添加纹理，可以按照以下步骤操作：明确指令使用 Vue 3 和 Three.js。加载 3D 模型（如 .glb 或 .gltf 文件）。给模型添加纹理。解决方案 1. 初始化 Vue 3 项目确保你已经创建了一个 Vue 3 项目。阅读全文

posted @ 2025-02-27 23:14 joken1310 阅读(841) 评论(0) 推荐(0)

js 如何替换字符模板中的变量

摘要：结论：在 JavaScript 中，可以通过字符串模板、正则表达式或手动替换等方式，将字符模板中的变量替换成实际值。详细展开 1. 使用模板字符串（推荐） ES6 引入了模板字符串功能，可以直接在字符串中嵌入变量，这是最简洁和现代的方式。语法： let name = "Alice"; let 阅读全文

posted @ 2025-02-27 23:11 joken1310 阅读(342) 评论(0) 推荐(0)

js 如何实现一个元素可以拖动，并在拖动时生成一个拷贝的元素跟随鼠标移动

摘要：结论：要实现一个元素可以拖动，并在拖动时生成一个拷贝的元素跟随鼠标移动，可以通过 JavaScript 的 drag 和 dragstart 事件结合 CSS 样式来完成。详细展开 1. HTML 结构创建一个可拖动的元素，设置其 draggable="true" 属性。 <div id="d 阅读全文

posted @ 2025-02-27 23:09 joken1310 阅读(339) 评论(0) 推荐(0)

css -webkit-user-drag 可以控制元素可以拖动

摘要：结论： user-drag 并不是标准的 CSS 属性，但它通常被误解为与拖动元素相关的功能。实际上，控制拖动行为的正确属性是 user-select 和 -webkit-user-drag（非标准）。如果你的目标是禁用或自定义拖动行为，可以使用这些属性或 JavaScript 来实现。详细展开阅读全文

posted @ 2025-02-27 23:06 joken1310 阅读(169) 评论(0) 推荐(0)

ts unkown和 any的区别

摘要：结论：在 TypeScript 中，unknown 和 any 都是类型系统中的特殊类型，但它们的设计目的和使用方式有很大区别。any 完全放弃了类型检查，而 unknown 则是一种更安全的类型，表示未知类型，需要显式类型断言或检查后才能使用。详细展开 1. any 的特性定义： any 表阅读全文

posted @ 2025-02-27 23:04 joken1310 阅读(191) 评论(0) 推荐(0)

js for循环终止方式：return或break; 对比

摘要：在 JavaScript 中，return 会终止 for 循环，但前提是它出现在一个函数体内。return 的作用是立即结束整个函数的执行，而不仅仅是跳出 for 循环。因此，只要 for 循环被包裹在一个函数中，遇到 return 时，循环和函数都会终止。让我们通过示例来详细说明： 1. re 阅读全文

posted @ 2025-02-27 23:02 joken1310 阅读(964) 评论(0) 推荐(0)

js forEach可以终止循环吗？

摘要：在 JavaScript 中，forEach 方法本身并没有内置的机制可以直接终止循环，因为它会为数组的每个元素都执行一次回调函数，且回调函数中的 return 只会跳出当前迭代，而不会停止整个循环。如果你想在 forEach 中“终止”循环，有以下几种替代方案或解决方法： 1. 使用 throw 阅读全文

posted @ 2025-02-27 22:58 joken1310 阅读(481) 评论(0) 推荐(0)

vue3 pinia 如何ts类型限制

摘要：在 Vue 3 中结合 Pinia 和 TypeScript 使用时，类型限制是一个非常重要的部分，可以帮助开发者确保状态管理的安全性和可预测性。Pinia 提供了良好的 TypeScript 支持，尤其是通过 defineStore 和相关工具类型，我们可以精确地定义 store 的状态、gett 阅读全文

posted @ 2025-02-26 21:37 joken1310 阅读(666) 评论(0) 推荐(0)

vue3 有哪些主要的ts类型

摘要：在 Vue 3 中，TypeScript (TS) 的支持得到了显著增强，尤其是通过 Composition API 和 <script setup> 的引入，开发者可以更方便地使用 TS 来定义类型。以下是 Vue 3 中主要涉及的一些 TS 类型，涵盖组件、props、emit、ref、reac 阅读全文

posted @ 2025-02-26 21:36 joken1310 阅读(1014) 评论(0) 推荐(0)

typescript 常用语法类型

摘要：常用语法 1. 基本类型注解 TypeScript 的核心是类型系统，基本类型注解是最常见的使用方式。 // 基本类型 let name: string = "Alice"; let age: number = 25; let isActive: boolean = true; // 数组 let 阅读全文

posted @ 2025-02-26 21:32 joken1310 阅读(236) 评论(0) 推荐(0)

算法的时间和空间复杂度指的是什么

摘要：在讲解算法时，时间复杂度和空间复杂度是衡量算法效率的两个核心指标。下面我用通俗的语言详细解释它们的含义、计算方式以及与实际案例的联系。 1. 时间复杂度 (Time Complexity) 定义：时间复杂度描述的是算法执行所需的时间随着输入规模（通常记为 n）增长而变化的趋势。它衡量的是算法的“速度阅读全文

posted @ 2025-02-26 20:55 joken1310 阅读(552) 评论(0) 推荐(0)

js 一些算法实现和运用

摘要： 1. 二分查找 (Binary Search) 原理：在已排序数组中，通过每次折半缩小范围查找目标值。实现： function binarySearch(arr, target) { let left = 0; let right = arr.length - 1; while (left <= 阅读全文

posted @ 2025-02-26 20:51 joken1310 阅读(49) 评论(0) 推荐(0)

js 实现多级排序，并可以指定具体值的排序，或者升序降序

摘要： /** * 多级排序函数 * @param {Array} arr - 需要排序的数组 * @param {Array} sortRules - 排序规则数组 * @returns {Array} - 排序后的数组 */ function multiLevelSort(arr, sortRules) 阅读全文

posted @ 2025-02-26 20:38 joken1310 阅读(126) 评论(0) 推荐(0)

uni app如何开发快应用

摘要：使用 uni-app 和 HBuilderX 开发快应用，并通过快应用联盟开发工具进行调试的步骤如下。这些步骤将帮助你从创建项目到调试快应用的全过程，简单明了且实用。首先，确保你已经安装了最新版本的 HBuilderX，因为它是 uni-app 的主要开发工具。下载地址可以在 DCloud 官网找阅读全文

posted @ 2025-02-25 21:49 joken1310 阅读(497) 评论(0) 推荐(0)

js 高德地图api如何调用使用

摘要： 1. 如何调用高德地图 API（JavaScript）准备工作：在高德开放平台注册，获取 Key 和安全密钥。基本代码：<div id="container" style="width: 100%; height: 500px;"></div> <script> window._AMapSecu 阅读全文

posted @ 2025-02-25 21:44 joken1310 阅读(1140) 评论(0) 推荐(0)

react18 挂载mount和卸载unmount 触发方式写法

摘要：在 React 18 中，组件的挂载（mount）和卸载（unmount）逻辑主要通过 useEffect Hook 实现。以下是总结 React 18 中触发挂载和卸载的方式，以及相关要点： 1. 挂载（Mount）触发方式挂载是指组件首次被渲染到 DOM 中。React 使用 useEffec 阅读全文

posted @ 2025-02-25 21:35 joken1310 阅读(386) 评论(0) 推荐(0)

js表格编辑插件，x-data-spreadsheet 如何使用、用法

摘要： x-data-spreadsheet 在 Vue 3 中的用法 1. 安装与引入安装：npm install x-data-spreadsheet 引入：<script setup> import Spreadsheet from 'x-data-spreadsheet'; import 'x-d 阅读全文

posted @ 2025-02-25 21:07 joken1310 阅读(1220) 评论(0) 推荐(0)

js 如何转化数字为excel列字母

摘要：在 JavaScript 中，将数字转换为类似 Excel 列的字母（如 1 -> A, 2 -> B, ..., 26 -> Z, 27 -> AA 等）需要实现一个进制转换的逻辑。Excel 列的字母本质上是一个 26 进制的表示方式，但没有“0”，从 1 开始计数。以下是实现这个转换的几种方法阅读全文

posted @ 2025-02-25 20:54 joken1310 阅读(89) 评论(0) 推荐(0)

js 如何监听某个dom元素是否加载

摘要：在 JavaScript 中，如果你想监听某个具有特定 class 的元素是否加载完成，可以根据具体场景使用不同的方法。以下是几种常见的实现方式，具体取决于你说的“加载”是指 DOM 元素出现在页面上，还是指某些资源（如图片）加载完成：方法 1：使用 MutationObserver 监听 DOM 阅读全文

posted @ 2025-02-25 20:52 joken1310 阅读(584) 评论(0) 推荐(0)

react项目如何使用@reduxjs/toolkit 简化redux使用

摘要：在 React 项目中使用 @reduxjs/toolkit 可以极大简化 Redux 的使用流程，提高代码的可维护性和开发效率。以下是一个简单的步骤指南，帮助你在 React 项目中集成和使用 @reduxjs/toolkit： 1. 安装依赖首先，确保你的 React 项目已经创建好（比如通过阅读全文

posted @ 2025-02-23 14:34 joken1310 阅读(389) 评论(0) 推荐(0)

react router 常用的hooks

摘要： React Router 是 React 生态中用于管理路由的流行库，尤其在版本 6（React Router v6）中，提供了多个功能强大的 Hooks 来帮助开发者处理路由相关的逻辑。以下是 React Router v6 中常用的 Hooks，附带详细说明和典型用法： 1. useNaviga 阅读全文

posted @ 2025-02-23 14:25 joken1310 阅读(204) 评论(0) 推荐(0)

react18 如何使用redux库

摘要：在 React 18 中使用 Redux 的基本步骤和以前的版本差别不大，但 React 18 引入了一些新的特性（比如并发渲染），可能会影响你在使用 Redux 时的实现方式。以下是一个简洁的指南，展示如何在 React 18 中结合 Redux 来管理状态： 1. 安装必要的依赖首先，你需要安阅读全文

posted @ 2025-02-23 14:15 joken1310 阅读(311) 评论(0) 推荐(0)

spring boot MyBatis插件使用

摘要： MyBatis 是一个轻量级的持久化框架（ORM 工具），在 Spring Boot 中也可以很好地用来操作 MySQL 等数据库。相比 Spring Data JPA，MyBatis 的特点是更灵活，你可以手动控制 SQL 语句，而不是完全依赖自动生成的查询。它通过映射文件（XML）或注解将 Ja 阅读全文

posted @ 2025-02-23 13:58 joken1310 阅读(194) 评论(0) 推荐(0)

Spring Data JPA 插件，面向对象方式curd

摘要： Spring Data JPA 是 Spring 生态中一个强大的工具，它让开发者可以用更简单、面向对象的方式操作数据库（比如 MySQL），尤其是实现 CRUD（创建、读取、更新、删除）操作。它建立在 JPA（Java Persistence API）之上，默认使用 Hibernate 作为底层实阅读全文

posted @ 2025-02-23 13:52 joken1310 阅读(100) 评论(0) 推荐(0)

mysql JOIN ON 多表查询用法

摘要：在 MySQL 中，JOIN ... ON 是用于多表查询的关键语法，通过指定表之间的关联条件，将多个表的数据组合起来。结合你之前提到的 RBAC 和权限管理场景，我会详细解释 JOIN ... ON 的用法，并以查询用户权限为例展示如何应用。 JOIN ... ON 基本概念 JOIN：用于连接多阅读全文

posted @ 2025-02-23 13:43 joken1310 阅读(569) 评论(0) 推荐(0)

RBAC 权限管理设计模型

摘要： RBAC（Role-Based Access Control，基于角色的访问控制）是一种广泛应用于权限管理的模型，特别是在后台系统或企业级应用中。它的核心思想是通过“角色”来桥接用户和权限，从而实现灵活、高效的权限分配和管理。以下是对 RBAC 的详细解释，以及结合 MySQL 如何实现它的具体方案阅读全文

posted @ 2025-02-23 13:37 joken1310 阅读(889) 评论(0) 推荐(0)

java常见的数据结构api

摘要：在 Java 中，常见的数据结构主要由 Java Collections Framework（JCF）提供，它是 Java 标准库的一部分，位于 java.util 包中。以下是常见的几种数据结构及其对应的 API，以及它们的主要特点和使用场景： 1. List（列表）特点：有序、可重复的元素集阅读全文

posted @ 2025-02-22 22:01 joken1310 阅读(71) 评论(0) 推荐(0)

spring boot一般的项目结构

摘要：以下是对 Spring Boot 项目目录结构及分层（包含 DAO 和 DTO）的简洁总结，重新整理后更清晰明了： 1. 典型 Spring Boot 项目目录结构 my-spring-boot-project/ ├── src/ │ ├── main/ │ │ ├── java/com/examp 阅读全文

posted @ 2025-02-22 21:57 joken1310 阅读(1314) 评论(0) 推荐(0)

spring boot 项目dto，什么是dto

摘要： 1. 什么是 DTO 定义：DTO 是一种设计模式，用于在不同层（如 Controller、Service）或不同系统（如微服务之间）之间传输数据的对象。特点：通常只包含数据（属性）和简单的 getter/setter，不包含业务逻辑。与数据库实体（Entity）或领域对象（Domain Ob 阅读全文

posted @ 2025-02-22 21:52 joken1310 阅读(1324) 评论(0) 推荐(0)

Spring Cloud Eureka 将 **Controller 层**、**Service 层** 和 **DAO 层** 剥离为独立微服务

摘要：以下是基于 Spring Cloud Eureka 将 Controller 层、Service 层和 DAO 层剥离为独立微服务的方法总结。整个过程通过服务注册与发现实现层与层之间的动态通信调用。 1. 总体思路目标：将传统单体应用的三层结构（Controller、Service、DAO）拆阅读全文

posted @ 2025-02-22 21:44 joken1310 阅读(110) 评论(0) 推荐(1)

Spring Cloud Eureka 如何使用，微服务

摘要： 1. 什么是 Spring Cloud Eureka 作用：服务注册：微服务启动时将自身信息（IP、端口、服务名等）注册到 Eureka Server。服务发现：客户端（包括网关或其他服务）可以从 Eureka Server 获取服务实例的地址，动态调用服务。核心组件： Eureka Serv 阅读全文

posted @ 2025-02-22 21:38 joken1310 阅读(285) 评论(0) 推荐(0)

react18 自动批处理更新，一次性更新多个修改的state的视图渲染

摘要：什么是自动批处理？自动批处理是 React 18 引入的一项性能优化特性。它指的是 React 会自动将多个状态更新（setState 调用）合并为一次重新渲染，而不是每次状态更新都单独触发一次渲染。这种优化减少了不必要的 DOM 操作，提升了应用的性能。关键点：批处理（Batching）：将阅读全文

posted @ 2025-02-22 21:10 joken1310 阅读(428) 评论(0) 推荐(0)

react18 性能优化方式

摘要： React 18 引入了许多新特性，为性能优化提供了更多可能性，同时保留了之前版本的优化手段。以下是 React 18 中常见的性能优化方式，涵盖新特性、现有工具以及最佳实践。我会详细讲解每种方法，并提供适用场景和示例代码。一、React 18 新特性带来的性能优化 1. 并发渲染（Concurr 阅读全文

posted @ 2025-02-22 21:05 joken1310 阅读(247) 评论(0) 推荐(0)

react Suspense lazy 延迟加载组件，按需加载组件

摘要：什么是 Suspense？ Suspense 是 React 中用于“暂停”渲染的工具，允许你在组件等待某些异步资源（比如动态加载的组件或数据）时，显示一个备用的 UI（称为 fallback）。React 18 增强了 Suspense 的功能，特别是对服务端渲染和并发渲染的支持。核心作用：处理阅读全文

posted @ 2025-02-22 20:59 joken1310 阅读(537) 评论(0) 推荐(0)

react18 useTransition 用于非紧急视图更新

摘要：什么是 useTransition？ useTransition 是一个 Hook，用于标记某些状态更新为“过渡”（Transition），告诉 React 这些更新不是紧急的，可以延迟执行。这样 React 可以优先处理高优先级的任务（比如用户输入），避免界面卡顿。返回值：一个数组 [isPen 阅读全文

posted @ 2025-02-22 20:56 joken1310 阅读(210) 评论(0) 推荐(0)

joken-前端工程师