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

Vue2+Three.js加载并展示一个三维模型（提供Gitee源码）

news 来源：原创 2025/9/14 8:01:46

一、案例截图

二、安装Three.js

三、代码实现

四、Gitee源码

一、案例截图

二、安装Three.js

npm install three

三、代码实现

模型资源我是放在public文件夹下面的：

完整代码：

<template><div><div ref="container"></div></div>
</template><script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
export default {name: "HomeView",data() {return {scene: null,camera: null,renderer: null,model: null,controls: null,width: window.innerWidth,height: window.innerHeight,};},mounted() {this.initThreeJs();this.loadModel();this.animate();},beforeDestroy() {if (this.renderer) {this.renderer.dispose();}},methods: {initThreeJs() {// 初始化场景this.scene = new THREE.Scene();// this.scene.background = new THREE.Color(0xffffff); // 白色背景// 设置相机this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 5000);// 设置相机初始位置this.camera.position.set(0, 0.3, 1); // x = 0, y = 5, z = 10，可以根据需要调整这些值// 设置相机旋转角度（以弧度为单位）this.camera.rotation.x = THREE.MathUtils.degToRad(-30); // 绕x轴旋转 -30度this.camera.rotation.y = THREE.MathUtils.degToRad(0); // 绕y轴旋转 0度this.camera.rotation.z = THREE.MathUtils.degToRad(0); // 绕z轴旋转 0度// 创建渲染器this.renderer = new THREE.WebGLRenderer();this.renderer.setSize(this.width, this.height);this.$refs.container.appendChild(this.renderer.domElement);// 添加灯光const ambientLight = new THREE.AmbientLight(0xffffff, 1);this.scene.add(ambientLight);const pointLight = new THREE.PointLight(0xffffff, 1);pointLight.position.set(10, 10, 10);this.scene.add(pointLight);// 添加 OrbitControlsthis.controls = new OrbitControls(this.camera, this.renderer.domElement);this.controls.enableDamping = true; // 启用阻尼this.controls.dampingFactor = 0.25; // 阻尼因子，越大越慢this.controls.enableZoom = true; // 启用缩放},loadModel() {const loader = new GLTFLoader();loader.load('/obj.gltf', // 模型的路径，支持http请求(gltf) => {this.model = gltf.scene;this.scene.add(this.model);},undefined,(error) => {console.error('模型加载错误:', error);});},animate() {requestAnimationFrame(this.animate);if (this.model) {this.model.rotation.y += 0.01; // 让模型旋转}this.renderer.render(this.scene, this.camera);},}
};
</script><style scoped lang="scss"></style>

四、Gitee源码

码云地址：Vue2+Three.js加载并展示一个三维模型

Vue2+Three.js加载并展示一个三维模型（提供Gitee源码）

目录一、案例截图二、安装Three.js 三、代码实现四、Gitee源码一、案例截图二、安装Three.js npm install three 三、代码实现模型资源我是放在public文件夹下面的： 完整代码： <template><div><div ref"container&qu…...

编程日记 2025/9/14 8:01:46

Spark内存并行计算框架

spark核心概念 spark集群架构 spark集群安装部署 spark-shell的使用通过IDEA开发spark程序 1. Spark是什么 Apache Spark™ is a unified analytics engine for large-scale data processingspark是针对于大规模数据处理的统一分析引擎 spark是在Hadoop基础上的改进&…...

编程日记 2025/9/12 0:48:33

DeepSeek等LLM对网络安全行业的影响

大家好，我是AI拉呱，一个专注于人工智领域与网络安全方面的博主，现任资深算法研究员一职，兼职硕士研究生导师；热爱机器学习和深度学习算法应用，深耕大语言模型微调、量化、私域部署。曾获多次获得AI竞赛大奖，拥有多项发明专利和学术论文。对于AI算法有自己独特见解和经验…...

编程日记 2025/9/9 14:30:54

【QT】QLinearGradient 线性渐变类简单使用教程

目录 0.简介 1）qtDesigner中 2）实际执行 1.功能详述 3.举一反三的样式 0.简介 QLinearGradient 是 Qt 框架中的一个类，用于定义线性渐变效果（通过样式表设置）。它可以用来填充形状、背景或其他图形元素&#xff0…...

编程日记 2025/9/13 22:18:28

可狱可囚的爬虫系列课程 15：防盗链反爬虫的处理

一、防盗链了解防盗链是一种技术手段，主要用于防止其他网站通过直接链接的方式使用本网站的资源（如图片、文件等），从而节省带宽和服务器资源。当其他网站尝试直接链接到受保护的资源时，服务器会根据设置的规则判断请求…...

编程日记 2025/9/12 22:58:25

Vue组件：从使用到原理的深度解析

一、什么是Vue组件？ 组件是Vue的核心特性之一，它允许开发者将UI拆分为独立可复用的代码片段。每个组件本质上是一个Vue实例，具有自己的： 模板（Template） 数据（Data） 方法&#xf…...

编程日记 2025/9/14 7:34:47

SpringBoot接入DeepSeek（硅基流动版）+ 前端页面调试

文章目录前言正文一、项目环境二、项目代码2.1 pom.xml2.2 DeepSeekController.java2.3 启动类2.4 logback-spring.xml2.5 application.yaml2.6 index.html 三、页面调试3.1 参数提示3.2 开始请求3.3 手动断开前言作为一个Java程序员，了解前沿科技技术&#xff…...

编程日记 2025/9/12 7:54:55

Lua的table(表)

Lua表的基本概念 Lua中的表（table）是一种多功能数据结构，可以用作数组、字典、集合等。表是Lua中唯一的数据结构机制，其他数据结构如数组、列表、队列等都可以通过表来实现。表的实现 Lua的表由两部分组成： 数组部分…...

编程日记 2025/9/13 7:26:24

修改前的代码但是总显示“失败” 原因是修改之后的代码 import requests import os from urllib.parse import unquote# 原始URL url https://cn.bing.com/images/search?viewdetailV2&ccidTnImuvQ0&id5AE65CE4BE05EE7A79A73EEFA37578E87AE19421&thidOIP.TnI…...

编程日记 2025/9/9 17:11:31

【Python爬虫(90)】以Python爬虫为眼，洞察金融科技监管风云

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取，还涉及数据处理与分析。无论是新手小白还是进阶开发…...

编程日记 2025/9/11 5:55:58

idea + Docker + 阿里镜像服务打包部署

一、下载docker desktop软件官网下载docker desktop，需要结合wsl使用启动成功的画面(如果不是这个画面例如一直处理start或者是stop需要重新启动，不行就重启电脑) 打包成功的镜像在这里，如果频繁打包会导致磁盘空间被占满，需…...

编程日记 2025/9/13 14:41:50

C#模拟退火算法

模拟退火算法：寻找最优解的神奇 “退火之旅” 在生活中，我们都见过铁匠打铁。铁匠把烧得通红的铁块不断捶打，然后慢慢冷却，这样打造出来的金属制品才更坚固耐用。模拟退火算法就从这个退火过程中获得灵感，在计算机的数…...

编程日记 2025/9/10 0:22:05

网络安全防御模型

目录 6.1 网络防御概述一、网络防御的意义二、被动防御技术和主动防御技术三、网络安全纵深防御体系四、主要防御技术 6.2 防火墙基础一、防火墙的基本概念二、防火墙的位置 1.防火墙的物理位置 2.防火墙的逻辑位置 3. 防火墙的不足三、防火墙技术类型四…...

编程日记 2025/9/8 3:55:28

APP自动化实战

APP自动化能做什么？ 请看示例（实现批量的视频，封面功能复用能力（实现效果参考抖音号：71403700901） APP自动化实战－操作剪映APP PO模式 1. PO模式介绍 PO（Page Object）…...

编程日记 2025/9/9 18:07:32

Unity基础——资源导入

一.资源来源 1.Assert Store（Unity资源官方网站） （1）用于制作游戏的优质资源 | Unity Asset Store （2）或则通过Unity项目打开 2.外部资源 （1）淘宝 （2）找外…...

编程日记 2025/9/8 21:11:16

JMeter性能问题

性能测试中TPS上不去的几种原因性能测试中TPS上不去的几种原因_tps一直上不去-CSDN博客网络带宽连接池垃圾回收机制压测脚本通信连接机制数据库配置硬件资源压测机业务逻辑系统架构 CPU过高什么原因性能问题分析-CPU偏高 - 西瓜汁拌面 - 博客园 US C…...

编程日记 2025/9/10 6:37:07

形式化数学编程在AI医疗中的探索路径分析

一、引言 1.1 研究背景与意义在数字化时代，形式化数学编程和 AI 形式化医疗作为前沿领域，正逐渐改变着我们的生活和医疗模式。形式化数学编程是一种运用数学逻辑和严格的形式化语言来描述和验证程序的技术，它通过数学的精确性和逻辑性，确保程序的正确性和可靠性。在软件…...

编程日记 2025/8/31 19:06:51

DeepSeek开源周Day1：FlashMLA引爆AI推理性能革命！

项目地址：GitHub - deepseek-ai/FlashMLA 开源日历：2025-02-24起每日9AM(北京时间)更新，持续五天！ 一、开源周震撼启幕继上周预告后，DeepSeek于北京时间今晨9点准时开源「FlashMLA」，打响开源周五连…...

编程日记 2025/9/10 13:14:20

nginx 配置https

参考文档：nginx 文档 -- nginx官网|nginx下载安装|nginx配置|nginx教程配置 HTTPS 服务器 HTTPS 服务器优化 SSL 证书链单个 HTTP/HTTPS 服务器基于名称的 HTTPS 服务器具有多个名称的 SSL 证书服务器名称指示兼容性要配置 HTTPS 服务器，ssl…...

编程日记 2025/9/9 7:16:15

GhostBottleneck； InvertedResidual；Squeeze and Excite 是什么，怎么用

GhostBottleneck； InvertedResidual；Squeeze and Excite 是什么，怎么用目录 GhostBottleneck； InvertedResidual；Squeeze and Excite 是什么，怎么用GhostBottleneckInvertedResidualSqueeze and Excite（SE）GhostBottleneck 概念： GhostBottleneck 是在轻量级神经网…...

编程日记 2025/9/14 4:29:39

Docker启动ES容器打包本地镜像

文章目录 1、安装 Docker2、下载镜像3、查看已下载的镜像4、保存和加载镜像5、.tar 文件与 Docker 镜像的关系6、如何从 .tar 文件加载 Docker 镜像7、为什么需要 .tar 文件？8、ES 8.x版本无法启动8.1 问题原因8.2 解决方案8.3 提交容器为新镜像 1、安装 Docker 如…...

编程日记 2025/9/7 14:10:21

XXE漏洞：原理、危害与修复方法详解

目录一、XXE漏洞概述二、XXE漏洞原理三、XXE漏洞危害1. 任意文件读取2. 命令执行3. 拒绝服务攻击（DoS）4. SSRF攻击四、XXE漏洞修复方法1. 禁用外部实体JavaPythonPHP2. 输入验证和过滤3. 安全配置服务器4. 升级解析器版本五、总结一、XXE漏洞概述 XXE（XML External Entity…...

编程日记 2025/9/12 9:40:42

android keystore源码分析

架构 Android Keystore API 和底层 Keymaster HAL 提供了一套基本的但足以满足需求的加密基元，以便使用访问受控且由硬件支持的密钥实现相关协议。 Keymaster HAL 是由原始设备制造商 (OEM) 提供的动态加载库，密钥库服务使用它来提供由硬件支持的加密服…...

编程日记 2025/9/12 19:23:36

状态模式

状态（State）模式属于行为型模式的一种。状态模式允许对象在其内部状态改变时改变其行为，使其看上去就像改变了自身所属的类一样。状态模式是为了把一大串if...else...的逻辑给分拆到不同的状态类中，使得将来增加状态比较容易。…...

编程日记 2025/9/11 8:48:02

C++ | 面向对象 | 类

👻类 👾语法格式 class className{Access specifiers: // 访问权限DataType variable; // 变量returnType functions() { } // 方法 };👾访问权限 class className {public:// 公有成员protected:// 受保护成员private:// 私有成员 }…...

编程日记 2025/9/13 12:40:32

鸿蒙-AVPlayer

compileVersion 5.0.2（14） 音频播放 import media from ohos.multimedia.media; import common from ohos.app.ability.common; import { BusinessError } from ohos.base;Entry Component struct AudioPlayer {private avPlayer: media.AVPlayer | nu…...

编程日记 2025/9/8 13:29:30

Android移动应用开发实践-1-下载安装和简单使用Android Studio 3.5.2版本（频频出错）

一、下载安装 1.Android Studio3.5.2下载地址：Android Studio3.5.2下载地址其他版本下载地址：其他版本下载地址 2.安装教程（可以多找几个看看） 安装 | 手把手教你Android studio 3.5.2安装（安装教程）_a…...

编程日记 2025/9/13 16:15:40

从.m3u8到.mp4：使用批处理脚本完成视频处理的完整指南

这里介绍一个Windows批处理脚本（Windows Batch Script），主要用于处理 .m3u8 ts 视频文件的下载和合并功能。以下是程序的主要功能和逻辑流程： 功能概述参数检查与路径处理： 检查是否传递了文件或文件夹路径作为参数…...

编程日记 2025/9/13 13:47:54

qt5的中文乱码问题，QString、QStringLiteral 为 UTF-16 编码

qt5的中文乱码问题一直没有很明确的处理方案。今天处理进程间通信时，也遇到了qt5乱码问题，一边是设置的GBK，一边设置的是UTF8，单向通信约定采用UTF8。发送端保证发的是UTF8字符串，因为UTF8在网络数据包中没有字节序…...

编程日记 2025/9/9 7:17:29

Gurobi 并行计算的一些问题

最近尝试用 gurobi 进行并行计算，即同时用多个 cpu 核计算 gurobi 的 model，但是发现了不少问题。总体来看，gurobi 对并行计算的支持并不是那么好。 gurobi 官方对于并行计算的使用在这个网址，并有下面的大致代码： i…...

编程日记 2025/9/11 14:18:51

Vue3 中如何实现响应式系统中的依赖收集和更新队列的解耦？

一、问题解析：为什么需要解耦？ 在响应式系统中，依赖收集（追踪数据与视图的关联关系）和更新队列（批量处理数据变化带来的副作用）是两个核心但职责不同的模块。 Vue3 通过以下设计实现解耦&…...

编程日记 2025/9/9 15:55:10

vue项目中动态添加类名样式不生效问题

一、问题描述在vue项目中使用:class{tableContent: summary}给元素动态添加了类名tableContent，运行代码后查看类名已经添加成功但样式并未生效。二、问题产生原因并解决刚开始把样式写在了<style lang"scss" scoped></style>中&#x…...

编程日记 2025/9/11 20:00:06

供应链管理系统--升鲜宝门店收银系统功能解析，登录、主界面、会员 UI 设计图（一）

供应链管理系统--升鲜宝门店收银系统功能解析，登录、主界面会员 UI 设计图（一）...

编程日记 2025/9/11 23:29:32

用AI写游戏3——deepseek实现kotlin android studio greedy snake game 贪吃蛇游戏

项目下载 https://download.csdn.net/download/AnalogElectronic/90421306 项目结构就是通过android studio 建空项目，改下MainActivity.kt的内容就完事了 ctrlshiftalts 看项目结构如下核心代码 MainActivity.kt package com.example.snakegame1// MainA…...

编程日记 2025/9/10 6:22:35

设计模式的引入

面向对象设计原则 1. 软件设计固有的复杂性2. 面向对象设计原则2.1 引入2.2 依赖倒置原则2.3 开放封闭原则2.4 单一职责原则2.5 Liskov 替换原则（ LSP）2.6 接口隔离原则（ ISP）2.7 优先使用对象组合，而不是类继承2.8 封…...

编程日记 2025/9/9 20:30:06

P8697 [蓝桥杯 2019 国 C] 最长子序列

P8697 [蓝桥杯 2019 国 C] 最长子序列题目分析代码题目分析先分析一波xdm 题意呢就是在s中找有多少个能和t匹配的字符，注意：连续匹配，输出连续的次数欧克，开始分析，首先，哎~字母！还强调…...

编程日记 2025/9/12 5:29:11

基于阿里云PAI平台快速部署DeepSeek大模型实战指南

一、DeepSeek大模型：企业级AI应用的新标杆 1.1 为什么选择DeepSeek？ 近期，DeepSeek系列模型凭借其接近GPT-4的性能和开源策略，成为全球开发者关注的焦点。在多项国际评测中，DeepSeek-R1模型在推理能力、多语言支持和…...

编程日记 2025/9/12 21:32:28

【java进阶】java多态深入探讨

前言在Java的编程宇宙中，多态是极为关键的概念，它宛如一条灵动的纽带，串联起面向对象编程的诸多特性，赋予程序宛如生命般的动态活力与高度灵活性。透彻理解多态，不仅是提升代码质量的关键，更是开启高效编程大门的钥匙。一、多态的定义与本质多态，从概念层面来讲，…...

编程日记 2025/9/13 13:32:51

蓝桥杯备赛-拔河

问题描述小明是学校里的一名老师，他带的班级共有 nn 名同学，第 ii 名同学力量值为 aiai。在闲暇之余，小明决定在班级里组织一场拔河比赛。为了保证比赛的双方实力尽可能相近，需要在这 nn 名同学中挑选出两个队伍&#xff0c…...

编程日记 2025/9/6 21:37:21

Zookeeper（67） Zookeeper在HBase中的应用是什么？

Zookeeper 在 HBase 中起到了至关重要的作用，主要用于协调和管理 HBase 集群中的多个组件。具体来说，Zookeeper 在 HBase 中的应用包括以下几个方面： Master 选举：HBase 集群中可以有多个 Master 节点，但只有一个处于…...

编程日记 2025/9/12 14:28:41

java后端开发day20--面向对象进阶（一）--static继承

（以下内容全部来自上述课程） 1.static–静态–共享 static表示静态，是java中的一个修饰符，可以修饰成员方法，成员变量。 1.静态变量被static修饰的成员变量，叫做静态变量。特点： 被该类…...

编程日记 2025/9/13 14:43:58

IDEA使用Maven方式构建SpringBoot项目

1、环境准备确保你已经安装了以下工具： Java JDK（推荐 JDK 8 或更高版本） IntelliJ IDEA（推荐使用最新版本） 2、创建 Spring Boot 项目 （1） 打开 IntelliJ IDEA。 （2&#xff09…...

编程日记 2025/9/12 20:57:41

Spring Boot2.0之十使用自定义注解、Json序列化器实现自动转换字典类型字段

前言项目中经常需要后端将字典类型字段值的中文名称返回给前端。通过sql中关联字典表或者自定义函数不仅影响性能还不能使用mybatisplus自带的查询方法，所以推荐使用自定义注解、Json序列化器，Spring的缓存功能实现自动转换字典类型字段。以下实现Spri…...

编程日记 2025/9/10 21:41:24

C#问题解决方案 --- 生成软件hash,生成文件hash

生成软件hash值： private string GetEXEHashString() {//获得软件哈希值Process currProcess Process.GetCurrentProcess();string filePath currProcess.MainModule.FileName;string hashEXE string.Empty;using (FileStream fs new FileStream(filePath, Fil…...

编程日记 2025/9/9 6:33:13

云计算如何解决延迟问题？

在云计算中，延迟（latency）指的是从请求发出到收到响应之间的时间间隔。延迟过高可能会严重影响用户体验，特别是在需要实时响应的应用中，如在线游戏、视频流、金融交易等。云计算服务如何解决延迟问题，通常依…...

编程日记 2025/9/11 7:59:21

多模态人物视频驱动技术回顾与业务应用

一种新的商品表现形态，内容几乎存在于手淘用户动线全流程，例如信息流种草内容、搜索消费决策内容、详情页种草内容等。通过低成本、高时效的AIGC内容生成能力，能够从供给端缓解内容生产成本高的问题，通过源源不断的低成本供给倒推…...

编程日记 2025/9/11 11:14:28

鸿蒙中连接手机可能遇到的问题

连接权限问题：手机开启了严格的权限管理机制，若未授予鸿蒙设备连接所需的权限，如蓝牙连接时未开启蓝牙权限，或者 USB 连接时未允许设备进行调试、文件传输等操作，就会导致连接失败。例如，当使用鸿蒙平板通过…...

编程日记 2025/9/8 22:49:03

15.代码随想录算法训练营第十五天|（递归）110. 平衡二叉树，257. 二叉树的所有路径*，404. 左叶子之和，222.完全二叉树的节点个数[打卡自用]

15.代码随想录算法训练营第十五天|（递归）110. 平衡二叉树，257. 二叉树的所有路径*，404. 左叶子之和，222.完全二叉树的节点个数给定一个二叉树，判断它是否是平衡二叉树示例 1： 输入&#xf…...

编程日记 2025/9/12 23:08:56

H5 火柴人科目三和GitHub获取仓库点星星的用户列表发生了艺术的碰撞

先看效果，代码写的比较乱，有待优化效果 https://linyisonger.github.io/H5.Examples/?name./089.%E7%9C%8B%E6%98%9F%E6%98%9F%E7%9A%84%E8%88%9E%E8%80%85.html 思路看起来很简单，实则也不是很难，就是需要思路要打开。一…...

编程日记 2025/9/8 19:12:16

使用消息队列怎样防止消息重复？

大家好，我是君哥。使用消息队列时，我们经常会遇到一个可能对业务产生影响的问题，消息重复。在订单、扣款、对账等对幂等有要求的场景，消息重复的问题必须解决。那怎样应对重复消息呢？今天来聊一聊这个话题。 1.三…...

编程日记 2025/9/14 7:41:31

一、案例截图

二、安装Three.js

三、代码实现

四、Gitee源码

相关文章：