joken1310 - 博客园

threejs GLTFExporter 导出场景为模型文件

摘要： THREE.GLTFExporter 是 Three.js 提供的一个工具类，用于将场景或模型导出为 GLTF 或 GLB 格式。GLTF（GL Transmission Format）是一种高效的 3D 文件格式，广泛用于 Web、游戏和增强现实等领域。以下是关于 GLTFExporter 的详细阅读全文

posted @ 2025-03-04 22:07 joken1310 阅读(623) 评论(0) 推荐(0)

threejs 官方效果创建 2000 个随机分布立方体代码解读

摘要：效果 https://threejs.org/examples/#webgl_interactive_cubes 代码地址 https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes.html 以下是阅读全文

posted @ 2025-03-04 21:48 joken1310 阅读(146) 评论(0) 推荐(0)

threejs 官方案例茶壶代码解读

摘要：案例案例代码地址： https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_teapot.html#L133 案例效果地址： https://threejs.org/examples/#webgl_geometr 阅读全文

posted @ 2025-03-04 21:34 joken1310 阅读(246) 评论(0) 推荐(0)

lil-gui 使用，作为threejs控制面板

摘要：基本使用方式 lil-gui 是一个轻量级的 JavaScript GUI 库，专门用于创建简单的调试面板或参数调整界面。它非常适合在开发过程中用来快速测试和调整参数，尤其是在图形编程（如 three.js）中非常常见。 1. lil-gui 的功能 lil-gui 提供了一个简单的界面，允许用户通阅读全文

posted @ 2025-03-04 21:28 joken1310 阅读(904) 评论(0) 推荐(0)

ts 如何声明入参是函数的函数类型

摘要：在 TypeScript 中，声明入参函数的类型有多种方式，以下是总结和推荐的几种方法： 1. 内联定义函数类型直接在参数中定义函数的类型，指定其参数和返回值类型。 function execute(fn: (arg: number) => string): void { const result 阅读全文

posted @ 2025-03-03 22:04 joken1310 阅读(918) 评论(0) 推荐(0)

threejs traverse 遍历api

摘要：在 Three.js 中，traverse 是一个非常有用的方法，用于遍历场景或对象的层级结构（Hierarchy）。它允许你访问对象及其所有子对象（包括嵌套的子对象），从而对它们进行操作、检查或修改。结论 traverse 方法用于递归遍历对象及其所有后代节点（子对象、孙对象等），适用于需要批量阅读全文

posted @ 2025-03-03 21:38 joken1310 阅读(860) 评论(0) 推荐(1)

threejs 将3d模型动画收集为数组，按需调用

摘要：在 Three.js 中，如果一个 3D 模型文件包含多个动画（例如 GLTF 文件中的多个 AnimationClip），你可以将这些动画收集到一个数组中，并通过代码逐一调用或管理它们。以下是详细的说明和实现方法。结论可以将模型文件中的多个动画收集为一个数组，并在 Three.js 中通过 T 阅读全文

posted @ 2025-03-03 21:27 joken1310 阅读(290) 评论(0) 推荐(0)

threejs scene 坐标轴，空间坐标轴，右手坐标轴

摘要：在 Three.js 中，scene（场景）是一个三维空间的容器，用于存储和管理所有对象（如几何体、光源、相机等）。场景中的坐标轴定义了三维空间的方向和位置基准。以下是关于 scene 坐标轴的详细介绍。结论 Three.js 使用右手坐标系，默认情况下： X 轴：水平向右为正。 Y 轴：垂直向上阅读全文

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

threejs 动画混合器介绍

摘要：动画混合器介绍，用于加载模型动画，动画片段的控制在 Three.js 中，THREE.AnimationMixer 是用于管理和播放模型动画的核心类。它允许你加载、控制和混合多个动画剪辑（Animation Clip），从而实现复杂的动画效果。以下是关于 AnimationMixer 的详细介绍，阅读全文

posted @ 2025-03-03 21:08 joken1310 阅读(423) 评论(0) 推荐(0)

threejs 实现看车车内车外全景图

摘要：在 Three.js 中实现全景看车内车外功能，可以通过加载两张不同的全景图（一张代表车外视角，另一张代表车内视角），并根据用户交互动态切换这两张全景图来实现。以下是详细的实现步骤和关键概念。结论通过加载两张全景图（车外和车内），结合用户交互（如点击按钮或热点）动态切换场景背景，可以实现全景看车阅读全文

posted @ 2025-03-03 21:00 joken1310 阅读(298) 评论(0) 推荐(0)

threejs 热点创建、点击捕捉事件

摘要：在 Three.js 中，热点（Hotspots）通常用于增强交互体验，例如在全景图中添加可点击的区域或图标，用户点击后可以触发特定事件（如切换视角、显示信息等）。以下是关于如何实现和使用热点的相关 API 和方法的详细介绍。结论 Three.js 本身没有专门的“热点 API”，但可以通过结合阅读全文

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

threejs 如何实现室内全景看房

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

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

threejs 重要的概念、术语

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

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

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

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

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

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

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

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

threejs GLTFLoader加载器

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

posted @ 2025-02-27 23:19 joken1310 阅读(1274) 评论(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 阅读(1210) 评论(0) 推荐(0)

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

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

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

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

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

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

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

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

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

ts unkown和 any的区别

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

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

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

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

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

js forEach可以终止循环吗？

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

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

vue3 pinia 如何ts类型限制

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

posted @ 2025-02-26 21:37 joken1310 阅读(919) 评论(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 阅读(1377) 评论(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 阅读(478) 评论(0) 推荐(0)

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

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

posted @ 2025-02-26 20:55 joken1310 阅读(961) 评论(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 阅读(94) 评论(0) 推荐(0)

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

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

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

uni app如何开发快应用

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

posted @ 2025-02-25 21:49 joken1310 阅读(659) 评论(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 阅读(1941) 评论(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 阅读(680) 评论(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 阅读(1667) 评论(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 阅读(185) 评论(0) 推荐(0)

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

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

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

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

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

posted @ 2025-02-23 14:34 joken1310 阅读(519) 评论(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 阅读(310) 评论(0) 推荐(0)

react18 如何使用redux库

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

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

spring boot MyBatis插件使用

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

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

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

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

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

joken-前端工程师