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

Three.js在vue中的使用（二）-加载、控制

news 来源：原创 2025/7/15 22:58:38

在 Vue 中使用 Three.js 加载模型、控制视角、添加点击事件是构建 3D 场景的常见需求。下面是一个完整的示例，演示如何在 Vue 单文件组件中实现以下功能：

使用 GLTFLoader 加载 .glb/.gltf 模型
添加 OrbitControls 控制视角（旋转、缩放、平移）
给模型添加点击事件

使用的技术栈

Vue 3 + Composition API（或 Vue 2）
Three.js 核心库
three/examples/js/loaders/GLTFLoader
three/examples/js/controls/OrbitControls

📦 安装依赖（如未安装）

npm install three
npm install three-gltf-loader  # 或直接引入 GLTFLoader

示例代码：Vue 单文件组件

<template><div class="model-viewer-container" ref="viewerContainer"></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'const viewerContainer = ref(null)let scene, camera, renderer, controls, modelfunction init() {// 创建场景scene = new THREE.Scene()scene.background = new THREE.Color(0xeeeeee)// 创建相机const width = viewerContainer.value.clientWidthconst height = viewerContainer.value.clientHeightcamera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000)camera.position.set(0, 2, 5)// 创建渲染器renderer = new THREE.WebGLRenderer({ antialias: true })renderer.setSize(width, height)renderer.setPixelRatio(window.devicePixelRatio)viewerContainer.value.appendChild(renderer.domElement)// 添加光源const ambientLight = new THREE.AmbientLight(0xffffff, 0.6)scene.add(ambientLight)const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)directionalLight.position.set(5, 10, 7.5)scene.add(directionalLight)// 添加控制器controls = new OrbitControls(camera, renderer.domElement)controls.enableDamping = true// 加载模型const loader = new GLTFLoader()loader.load('/models/test.glb', // 替换为你的模型路径(gltf) => {model = gltf.scenescene.add(model)// 添加点击事件监听window.addEventListener('click', onClick)},undefined,(error) => {console.error('An error occurred while loading the model:', error)})// 渲染循环function animate() {requestAnimationFrame(animate)controls.update()renderer.render(scene, camera)}animate()
}// 点击事件处理函数
function onClick(event) {if (!model) return// 计算鼠标归一化坐标const mouse = new THREE.Vector2()mouse.x = (event.clientX / window.innerWidth) * 2 - 1mouse.y = -(event.clientY / window.innerHeight) * 2 + 1// 创建射线const raycaster = new THREE.Raycaster()raycaster.setFromCamera(mouse, camera)// 获取模型中的所有可交互对象const intersects = raycaster.intersectObject(model, true)if (intersects.length > 0) {console.log('点击了模型！', intersects[0].object)alert('你点击了模型上的一个部件')}
}// 响应窗口变化
window.addEventListener('resize', () => {if (!camera || !renderer) returncamera.aspect = viewerContainer.value.clientWidth / viewerContainer.value.clientHeightcamera.updateProjectionMatrix()renderer.setSize(viewerContainer.value.clientWidth, viewerContainer.value.clientHeight)
})onMounted(() => {init()
})
</script><style scoped>
.model-viewer-container {width: 100%;height: 100vh;
}
</style>

文件结构建议

your-project/
├── public/
│   └── models/
│       └── test.glb   <-- 放置你的模型文件
├── src/
│   └── components/
│       └── ModelViewer.vue

注意：模型放在 public/models/ 目录下，通过 /models/test.glb 路径访问。

🔧 功能说明

功能	实现方式
加载模型	使用 `GLTFLoader` 加载 `.glb` 或 `.gltf` 模型
控制视角	使用 `OrbitControls` 实现自由旋转、缩放、平移
点击事件	使用 `Raycaster` 进行射线检测，判断是否点击到模型
响应式布局	监听 `resize` 事件并更新相机和渲染器尺寸

扩展建议

需求	推荐做法
多个模型加载	使用 `Promise.all()` 异步加载多个模型
模型动画播放	使用 `AnimationMixer` 和 `Clock` 控制动画
加载进度条	使用 `LoadingManager` 显示加载百分比
自定义材质	遍历模型子对象并修改材质颜色、透明度等属性
高亮选中部分	修改点击对象的材质颜色或使用 OutlinePass 后期高亮

Three.js在vue中的使用（二）-加载、控制

在 Vue 中使用 Three.js 加载模型、控制视角、添加点击事件是构建 3D 场景的常见需求。下面是一个完整的示例，演示如何在 Vue 单文件组件中实现以下功能： 使用 GLTFLoader 加载 .glb/.gltf 模型添加 OrbitControls 控制视角（旋转、缩放、平移…...

编程日记 2025/7/15 22:58:38

【堆】最大堆、最小堆以及GO语言的实现

堆是计算机科学中一种特别的完全二叉树结构，在优先队列、图算法和排序算法中有广泛应用。本文将从概念、原理和实现等方面详细介绍堆这一重要的数据结构。 1. 堆的基本概念 1.1 什么是堆？ 堆（Heap）是一种特殊的完全二叉树&…...

编程日记 2025/6/29 5:13:06

动态规划之路劲问题3

解析题目： 跟之前路径题目大概一样，从左上角到右下角，每一步只能向下或者向右，而且每次走出来血量必须大于0（注意这一点，否则容易导致每次出来可能小于0就可能错） 算法分析： 状态…...

编程日记 2025/6/29 6:58:50

学习黑客网络安全法

在正式“开荒”各种黑客工具前，Day 4 的任务是给自己装上一副合规与伦理的“护身铠”。这一小时你将弄懂——做渗透想合法必须先拿授权、哪些法律条款碰不得、等保 2.0 与关基条例为何对企业像副“主线任务”；同时动手把这些要点制成一张“法律速查卡”&…...

编程日记 2025/6/29 7:51:24

节流和防抖的使用

节流（Throttle）是一种常用的性能优化技术，用于限制函数的执行频率，确保在一定时间内只执行一次。它常用于处理浏览器事件（如滚动、窗口调整大小、鼠标移动等），以避免因事件触发过于频繁而导致的…...

编程日记 2025/7/12 17:02:32

关于项目中优化使用ConcurrentHashMap来存储锁对象

方案介绍在开发用户创建私有空间功能时，我们的规则是一个用户最多只能创建一个私有空间。在最初方案中，我是采用字符串常量池的方式存储锁对象useID。通过intern方法保证同一用户ID的锁唯一性。这一方案存在的问题是： 随着userId越来越…...

编程日记 2025/7/9 10:09:44

Java 网络安全新技术：构建面向未来的防御体系

一、Java 安全架构的演进与挑战 1.1 传统安全模型的局限性 Java 平台自 1995 年诞生以来，安全机制经历了从安全管理器（Security Manager）到 Java 平台模块系统（JPMS）的演进。早期的安全管理器通过沙箱模型限制不可信…...

编程日记 2025/6/29 5:13:10

【在Spring Boot中集成Redis】

在Spring Boot中集成Redis 依赖在application.yml中配置Redis服务地址创建Redis配置类缓存工具类使用依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency&…...

编程日记 2025/6/29 7:52:49

昇腾的昇思MindSpore是什么？跟TensorFlow/PyTorch 等第三方框架有什么区别和联系？【浅谈版】

昇腾的昇思 MindSpore 是华为自主研发的全场景深度学习框架，旨在覆盖从科研到工业落地的全流程，支持云、边缘、手机等多种硬件场景的部署。它与 TensorFlow、PyTorch 等第三方框架既有相似性，也有明显差异。一、昇思 MindSpore 的核心特点全…...

编程日记 2025/7/15 22:58:38

MySQL进阶(三)

五、锁 1. 概述锁是计算机协调多个进程或线程并发访问某一资源的机制（避免争抢）。在数据库中，除传统的计算资源（如 CPU、RAM、I/O 等）的争用以外，数据也是一种供许多用户共享的资源。如何保证数据并发…...

编程日记 2025/6/29 8:11:54

Java面试趣事：从死循环到分段锁

互联网大厂Java开发岗终面现场面试官（推了推黑框眼镜）：马小帅是吧？先说下HashMap扩容机制？ 马小帅（抓耳挠腮）：这我知道！默认初始容量16，默认负载因子0.75..…...

编程日记 2025/6/29 7:47:22

健康养生新主张

健康养生并非遥不可及的高深学问，摒弃中医理念，从生活细节入手，同样能实现身心的良好养护，开启活力满满的生活。水是生命之源，科学饮水对养生意义重大。每天饮用 1500 - 2000 毫升的水，可维持身体正常的…...

编程日记 2025/6/29 5:28:18

合成复用原则（CRP）

非常好！你已经学习了好几个设计原则，现在我们来讲解合成复用原则（Composite Reuse Principle, CRP）——它和继承是常被比较的一对“重用方式”。 🧠 一句话定义合成复用原则（CRP）：尽…...

编程日记 2025/7/10 14:30:54

基于PyTorch的食物图像分类实战：从数据处理到模型训练

基于PyTorch的食物图像分类实战：从数据处理到模型训练在深度学习领域，图像分类是一个经典且应用广泛的任务。无论是在电商平台的商品分类、医疗影像诊断，还是在农业作物识别等场景中，图像分类模型都发挥着重要作用。本文将以食物…...

编程日记 2025/6/29 5:21:54

在pycharm profession 2020.3将.py程序使用pyinstaller打包成exe

一、安装pyinstaller 在pycharm的项目的Terminal中运行pip3 install pyinstaller即可。安装后在Terminal中输入pip3 list看一下是否成功二、务必在在项目的Terminal中输入命令打包，命令如下： python3 -m PyInstaller --noconsole --onefile xxx.py …...

编程日记 2025/6/29 7:27:43

基于Springboot旅游网站系统【附源码】

基于Springboot旅游网站系统效果如下： 系统登陆页面系统主页面景点信息推荐页面路线详情页面景点详情页面确认下单页面景点信息管理页面旅游路线管理页面研究背景随着互联网技术普及与在线旅游消费习惯的深化，传统旅游服务模式面临效率低、…...

编程日记 2025/6/29 5:13:11

Linux操作系统从入门到实战（五）详细讲解Linux权限概念

Linux操作系统从入门到实战（五）详细讲解Linux权限概念前言一、Linux中两种用户1.1 超级用户（root）1.2 普通用户1.3 切换用户命令二、Linux权限管理2.1 文件访问者的分类：谁能访问文件？2.2 文件类型2.3 基…...

编程日记 2025/6/29 5:13:08

[方法论]软件工程中的设计模式：从理论到实践的深度解析

文章目录软件工程中的设计模式：从理论到实践的深度解析引言：为什么需要设计模式？第一部分：设计模式的核心原则1. SOLID 原则（面向对象设计的五大基石）2. 其他关键思想第二部分：创建型模式&…...

编程日记 2025/6/29 9:01:22

测试基础笔记第十八天

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、web自动化1.xpath定位1.属性定位2.属性与逻辑结合3.属性和层级结合 2.常见元素定位方法（面试题）3.常见元素定位失败原因4.cookie1.验证码…...

编程日记 2025/6/29 5:13:07

深度学习系统学习系列【2】之人工神经网络（ANN）

文章目录说明人工神经网络概述基本单位（神经元模型）神经元基本模型线性模型与激活函数多层神经网络人工神经网络的注意内容人工神经网络的阶段划分训练阶段输入、输出数据量化的设计权值向量W和偏置b的设计预测阶段人工神经网络核心算法梯度下降算法…...

编程日记 2025/6/29 8:46:38

《解锁Windows下GCC升级密码，开启高效编程新旅程》

《解锁Windows下GCC升级密码，开启高效编程新旅程》为什么要升级 Windows 下的 GCC 版本？在软件开发的动态领域中，GCC 作为一款卓越的编译器，在 Windows 环境下的升级有着重要意义，其影响深远且广泛。从性能优化的角度来看，新版 GCC 往往在编译速度上有显著提升。随着…...

编程日记 2025/6/29 8:22:29

Java面试大冒险：谢飞机的幽默与技术碰撞记

互联网大厂Java求职者面试：一场严肃与搞笑交织的技术盛宴场景： 互联网大厂面试间人物： 面试官： 一位严肃的资深架构师，对技术要求严格。谢飞机： 一位搞笑的程序员，技术实力参差不齐。第一…...

编程日记 2025/6/29 8:32:18

软件检测价格受多种因素影响，你了解多少？

软件检测价格受到多种因素的影响，这对企业来说至关重要，对开发者来说也至关重要，了解软件检测价格能够让企业和开发者更好地进行预算，能够让企业和开发者更好地进行决策。以下为你深入分析相关内容。检测范围影响软件检测范围的…...

编程日记 2025/6/29 8:27:45

学习黑客风险Risk

一眼纵览今天 Day 5 我们用 60 分钟打通「风险管理快闪副本」——先用漫画式视角速读两个国际标准（NIST & ISO/IEC 27005），再把抽象概念变身为炫彩 Risk Heat Map，最后亲手填一张迷你风险登记簿。学完你将能： 讲…...

编程日记 2025/6/29 8:28:36

scikit-learn在监督学习算法的应用

shiyonguyu大家好，我是我不是小upper！最近行业大环境不是很好，有人苦恼别人都开始着手项目实战了，自己却还卡在 scikit-learn 的代码语法上，连简单的示例运行起来都磕磕绊绊。确实，对很多机器学习初学者来说…...

编程日记 2025/7/7 19:02:53

BG开发者日志505：项目总体情况

1、从2024年12月中旬启动，到4月底gameplay部分开发完毕，已经四个半月过去了。其中大部分内容是3、4两个月中完成的，量产阶段。预计6月初参加新品节，6月中旬发售（比原计划7月中旬提前一个月）。 --------…...

编程日记 2025/6/29 8:22:01

MySQL 空值处理函数对比：IFNULL、COALESCE 和 NULLIF

IFNULL、COALESCE 和 NULLIF这三个函数都是 MySQL 中处理 NULL 值的函数，但它们的功能和使用场景有所不同： 1. IFNULL(expr, fallback) 功能：两值处理，专为替换 NULL 设计如果 expr 不是 NULL，返回 expr如果 expr …...

编程日记 2025/6/29 9:02:19

【2025年】MySQL面试题总结

文章目录 1. MySQL 支持哪些存储引擎？默认使⽤哪个？2. MyISAM 和 InnoDB 有什么区别？3. 事务的四大特性?4. 并发事务带来了哪些问题?5. 不可重复读和幻读有什么区别？6. MySQL 事务隔离级别？默认是什么级别&#xff1…...

编程日记 2025/6/29 8:31:13

Python 数据智能实战 (10)：智能商品推荐 - LLM “猜你喜欢”

写在前面 —— 从协同过滤到语义理解：融合 LLM，打造更懂用户心意的个性化推荐在之前的篇章里，我们已经见证了 LLM 在用户分群、购物篮分析、流失预测、内容生成等多个电商环节的赋能潜力。今天，我们将聚焦于电商平台的“心脏”之一，也是用户体验和商业转化的核心驱动力…...

编程日记 2025/6/29 5:13:12

2025年蓝桥杯省赛 Python A 组题目

文章目录 A.偏蓝B.IPv6C.2025图形D.最大数字E.倒水F.拼好数G.登山H.原料采购近期复盘一下省赛的题目，正所谓知不足方能进步可以在洛谷找到比赛的题目，不过得注意由于python版本的问题，有些代码想要在洛谷上ac的话，需要对应调整代…...

编程日记 2025/7/15 15:06:26

shell（7）

运算符 1.基本介绍这是shell进行运算的符号,依靠这些标识才能实现我们在脚本中的运算. 2.基本语法 1、$((运算符))或$[运算符]或expr m n 注意： expr运算符间有空格→如果不加空格会被当做一个整体不会进行运算例子： 3.expr m - n,如果要将expr运算…...

编程日记 2025/6/29 6:43:29

LangChain与MCP：大模型时代的工具生态之争与协同未来

LangChain与MCP：大模型时代的工具生态之争与协同未来 ——从架构差异到应用场景的深度解析引言在大模型驱动的AI应用生态中，LangChain与Model Context Protocol (MCP) 代表了两种截然不同的技术路径：前者以灵活的工具链和开发者友好性著称…...

编程日记 2025/6/29 7:56:59

【LLaMA-Factory实战】Web UI快速上手：可视化大模型微调全流程

一、引言在大模型微调场景中，高效的工具链能显著降低开发门槛。LLaMA-Factory的Web UI（LlamaBoard）提供了低代码可视化平台，支持从模型加载、数据管理到训练配置的全流程操作。本文将结合结构图、代码示例和实战命令&#xff0c…...

编程日记 2025/6/29 5:13:15

源码编译Qt StateMachine

编译某个项目时报错提示fatal error: QSignalTransition: No such file or directory，是因为qtbase中没有包含StateMachine模块，需要qt/qtscxml.git - SCXML (state machine notation) compiler and related tools 编译安装qtscxml 执行如下步骤&#…...

编程日记 2025/6/29 5:13:14

C++ STL vector高级特性与实战技巧

引言各位小伙伴们好！上一篇博客我们介绍了vector的基础知识和常见操作，今天我们将更深入地探讨vector的高级特性、内存管理细节以及实战应用技巧。想象一下vector就像一辆能自动变长的公交车，我们上一篇讲了如何上下车（添加删…...

编程日记 2025/7/11 16:55:15

[Windows] Kazumi番剧采集v1.6.9：支持自定义规则+在线观看+弹幕，跨平台下载

[Windows] Kazumi番剧采集链接：https://pan.xunlei.com/s/VOPLMhEQD7qixvAnoy73NUK9A1?pwdtu6i# Kazumi是一款基于框架; 开发的轻量级番剧采集工具，专为ACG爱好者设计。通过;自定义XPath规则; 实现精准内容抓取，支持多平台（An…...

编程日记 2025/6/29 7:23:32

二种MVCC对比分析

文章目录前言MVCCInnodb的MVCC版本链回滚与提交可见性判断 Oracle的MVCC版本链 PostgreSQL的MVCCMVCC实现可见性判断特点前言 MVCC（多版本并发控制，Multi-Version Concurrency Control）是一种数据库管理系统（DBMS&#x…...

编程日记 2025/6/29 5:20:49

Python蓝桥杯真题代码

以下是一些不同届蓝桥杯Python真题代码示例： 第十四届青少年蓝桥杯python组省赛真题删除字符串后缀 input_str input("请输入一个字符串：") suffixes (er, ly, ing) for suffix in suffixes: if input_str.endswith(suffix): input_str …...

编程日记 2025/6/29 7:23:43

四边形 A B C D ABCD ABCD 的对角线 A C AC AC 与 B D BD BD 互相垂直, 点 M M M, N N N 在直线 B D BD BD 上, 且关于直线 A C AC AC 对称. 设点 M M M 关于直线 A B AB AB, B C BC BC 的对称点分别为 X X X, Y Y Y, 点 N N N 关于直线 C D CD CD, D A DA DA 的…...

编程日记 2025/6/29 5:18:39

【KWDB 创作者计划】Docker单机环境下KWDB集群快速搭建指南

【KWDB 创作者计划】Docker 单机环境下 KaiwuDB集群快速搭建指南前言一、KWDB介绍1.1 KWDB简介1.2 主要特点1.3 典型应用场景二、环境介绍2.1 部署环境要求2.2 本地环境规划2.3 本次部署介绍三、下载容器镜像四、创建相关证书文件4.1 创建部署目录4.2 创建证书文件4.3 查看证…...

编程日记 2025/6/29 8:04:17

基于51单片机和LCD1602、矩阵按键的小游戏《猜数字》

目录系列文章目录前言一、效果展示二、原理分析三、各模块代码1、LCD16022、矩阵按键3、定时器0 四、主函数总结系列文章目录前言用的是普中A2开发板，用到板上的矩阵按键，还需要外接一个LCD1602液晶显示屏。【单片机】STC89C52RC 【频率】12T11.05…...

编程日记 2025/6/29 5:13:19

从广义线性回归推导出Softmax：理解多分类问题的核心

文章目录引言：从回归到分类广义线性模型回顾从二分类到多分类Softmax函数的推导建模多类概率基于最大熵原理具体推导步骤Softmax函数的数学形式 Softmax回归模型参数的可辨识性最大似然估计与交叉熵损失似然函数交叉熵损失梯度计算 Softmax回归的实现要点数值稳定…...

编程日记 2025/6/29 6:49:38

传奇各版本迭代时间及内容变化,屠龙/嗜魂法杖/逍遥扇第一次出现的时间和版本

【早期经典版本】 1.10 三英雄传说：2001 年 9 月 28 日热血传奇正式开启公测，这是传奇的第一个版本。游戏中白天与黑夜和现实同步，升级慢，怪物爆率低，玩家需要靠捡垃圾卖金币维持游戏开销，遇到高级别法师…...

编程日记 2025/6/29 5:18:54

云计算-私有云-私有云运维开发

三、私有云运维开发（15） 使用自动化运维工具 Ansible 完成系统的自动化部署与管理。基于 OpenStack APIs 与SDK，开发私有云运维程序 1.OpenStack Python运维开发：实现镜像管理（7分） 编写Python代…...

编程日记 2025/6/29 5:13:16

hadoop存储数据文件原理

Hadoop是一个开源的分布式计算框架，可以用于存储和处理大规模数据集。Hadoop的存储系统基于Hadoop Distributed File System（HDFS），它的主要原理如下： 数据切块：当用户向HDFS中存储一个文件时，该…...

编程日记 2025/7/14 14:19:24

spring2.x详解介绍

一、核心架构升级 Spring 2.x 是 Spring 框架的重要迭代版本（2006-2009年间发布），其核心改进体现在模块化设计和轻量化配置上。相较于 1.x 版本，2.x 通过以下方式重构了架构： XML Schema 支持：弃用 D…...

编程日记 2025/6/29 5:26:00

探索Grok-3的高级用法：功能与应用详解

引言随着人工智能技术的迅猛发展，xAI推出的Grok-3模型以其卓越的性能和创新功能，成为AI领域的新标杆。Grok-3不仅在计算能力上实现了十倍提升，还引入了多种高级模式和实时数据处理能力，适用于学术研究、技术分析、市场洞察等多场…...

编程日记 2025/6/29 8:17:26

PyTorch_张量转换为numpy数组

使用 tensor.numpy 函数可以将张量转换为 ndarray 数组，但是共享内存，可以使用 copy 函数避免共享。共享内存会导致张量或者numpy中的其中一个更改后，另外一个会受到影响。代码 import torch # 张量转换为 numpy 数组 def test01():data_te…...

编程日记 2025/6/29 8:00:43

什么是“原子变量”？

原子变量（std::atomic）在C++中是一个非常关键的机制，特别是在多线程编程中保持数据安全和避免竞争条件。它的设计目标就是让一段操作在多线程环境下变得“原子性”，即不可被中断，保证操作的完整与一致。一、什么是“原子变量”？简单来说：普通变量：在多线程环境中，…...

编程日记 2025/6/29 5:13:18

[Linux开发工具]gcc/g++

C语言文件编译运行 gcc code.c -o mycode gcc -o mycode code.c 预处理汇编编译链接预处理(进行宏替换/去注释/条件编译/头文件展开) gcc -E code.c -o code.i -E ->从现在开始进行程序的编译,当我们的程序预处理完毕后,翻译工作,就停下来 code.i预处理之后的结果 …...

编程日记 2025/6/29 7:58:41