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

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

目录

一、案例截图

二、安装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文件夹下面的&#xff1a; 完整代码&#xff1a; <template><div><div ref"container&qu…...

Linux红帽:RHCSA认证知识讲解(三)Linux基础指令与Vim编辑器的使用

Linux红帽&#xff1a;RHCSA认证知识讲解&#xff08;三&#xff09;Linux基础指令与Vim编辑器的使用 前言一、Linux基础指令二、Linux 文件系统层次结构概念三、通过路径指定文件四、使用命令行工具管理文件五、Vim 的安装方式六、Vim 的操作模式七、红帽建议掌握的 Vim 键和命…...

python读取sqlite温度数据,并画出折线图

需求&#xff1a; 在Windows下请用python画出折线图&#xff0c;x轴是时间&#xff0c;y轴是温度temperature 和体感温度feels_like_temperature 。可以选择县市近1小时&#xff0c;近1天&#xff0c;近1个月的。sqlite文件weather_data.db当前目录下&#xff0c;建表结构如下…...

《论企业集成平台的理解与应用》审题技巧 - 系统架构设计师

企业集成平台的理解与应用——论文写作框架 一、考点概述 本论题“企业集成平台的理解与应用”主要考察的是计算机软件测试工程师对于企业集成平台&#xff08;EIP&#xff09;的深入理解以及在实际项目中的应用能力。论题涵盖了以下几个核心内容&#xff1a; 首先&#xff…...

UE Python笔记

插件 官方 商城 Python Editorhttps://www.fab.com/listings/f4c99ba0-1a86-4f6a-b19d-2fd13f15961b GitHUB 好像只更新到了2020年4.2x的版本。可能有大佬改了5.x的版本。也希望分享给我一份。谢谢 https://github.com/20tab/UnrealEnginePython 学习笔记 网上教程一大堆。…...

使用django调用deepseek api,搭建ai网站

一、deepseek简介 DeepSeek是一家人工智能公司&#xff0c;专注于开发先进的人工智能模型和技术。以下是关于DeepSeek的一些详细介绍&#xff1a; 1.公司背景 DeepSeek由杭州深度求索人工智能基础技术研究有限公司开发&#xff0c;致力于通过创新的技术和算法&#xff0c;推…...

YOLOv12 ——基于卷积神经网络的快速推理速度与注意力机制带来的增强性能结合

概述 实时目标检测对于许多实际应用来说已经变得至关重要&#xff0c;而Ultralytics公司开发的YOLO&#xff08;You Only Look Once&#xff0c;只看一次&#xff09;系列一直是最先进的模型系列&#xff0c;在速度和准确性之间提供了稳健的平衡。注意力机制的低效阻碍了它们在…...

两台互通的服务器使用Docker部署一主两从MySQL8.0.35

文章目录 1. 使用Docker Overlay网络&#xff08;需Swarm模式&#xff09;在服务器1&#xff08;172.25.0.19&#xff09;上&#xff1a;在服务器2&#xff08;172.25.0.20&#xff09;上&#xff1a;创建 overlay 网络&#xff08;172.25.0.19&#xff09;&#xff1a; 2. 部署…...

Java23种设计模式案例

目录 一、概述 二、创建型模式 (Creational Patterns) 单例模式 (Singleton Pattern) 工厂方法模式 (Factory Method Pattern) 抽象工厂模式 (Abstract Factory Pattern) 建造者模式 (Builder Pattern) 原型模式 (Prototype Pattern) 三、结构型模式 (Structu…...

stm32hal库寻迹+蓝牙智能车(STM32F103C8T6)

简介: 这个小车的芯片是STM32F103C8T6&#xff0c;其他的芯片也可以照猫画虎,基本配置差不多,要注意的就是,管脚复用,管脚的特殊功能,(这点不用担心,hal库每个管脚的功能都会给你罗列,很方便的.)由于我做的比较简单,只是用到了几个简单外设.主要是由带霍尔编码器电机的车模,电机…...

JavaScript知识点4

1.解释一下这段JavaScript代码 var fruits ["Apple", "Orange", "Apple", "Mango"]; var a fruits.indexOf("Apple",-1); console.log("index"a); 输出的a值为-1&#xff0c;indexOf的第二个参数是-1&#xf…...

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

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

QT 引入Quazip和Zlib源码工程到项目中,无需编译成库,跨平台,加密压缩,带有压缩进度

前言 最近在做项目时遇到一个需求&#xff0c;需要将升级的文件压缩成zip&#xff0c;再进行传输&#xff1b; 通过网络调研&#xff0c;有许多方式可以实现&#xff0c;例如QT私有模块的ZipReader、QZipWriter&#xff1b;或者第三方库zlib或者libzip或者quazip等&#xff1…...

Ubuntu 安装 Nginx并配置反向代理

Ubuntu版本&#xff1a;Ubuntu 24.04.2 LTS 一、安装Nginx ​更新系统软件包​ 安装前需确保系统处于最新状态&#xff0c;避免依赖冲突 sudo apt update && sudo apt upgrade -y ​安装Nginx主程序​ Ubuntu官方仓库已包含稳定版Nginx&#xff0c;直接安装即可 sudo…...

GitHub SSH连接问题解决指南

&#x1f50d; GitHub SSH连接问题解决指南 问题描述 遇到错误&#xff1a;ssh: connect to host github.com port 22: Connection refused 说明您的网络环境无法访问GitHub的SSH端口22&#xff0c;常见原因&#xff1a; 防火墙/网络运营商限制&#xff08;国内常见&#xf…...

C++ 跨平台的 GetCurrentThreadId() 获取当前线程ID实现

支持&#xff1a;C11 及早前标准库版本&#xff0c;而无需使用&#xff1a;std::this_thread::get_id()。 支持&#xff1a;NDK/ANDROID、Windows、Linux、MacOS X 等多个操作系统平台。 int64_t GetCurrentThreadId() noexcept { #if defined(_WIN32) || defined(_WIN64)retu…...

钉钉MAKE AI生态大会思考

1. 核心特性 1.1 底层模型开放 除原有模型通义千问外,新接入猎户星空、智普、MinMax、月之暗面、百川智能、零一万物。 1.2 AI搜索 AI搜索贯通企业和个人散落在各地的知识(聊天记录、文档、会议、日程、知识库、项目等),通过大模型对知识逻辑化,直接生成搜索的答案,并…...

SQL笔记#复杂查询

一、视图 1、视图和表 使用试图时会执行SELECT语句并创建一张临时表。视图中保存的是SELECT语句;表中保存的是实际数据。 2、创建视图的方法 CREATE VIEW 视图名称(<视图列名1>,<视图列名2>,……) AS <SELECT语句> CREATE VIEW ProductSum (prod…...

【Linux】基于UDP/TCP套接字编程与守护进程

目录 一、网路套接字编程 &#xff08;一&#xff09;基础概念 1、源IP地址与目的IP地址 2、端口号 3、TCP与UDP 4、网络字节序 &#xff08;二&#xff09;套接字编程接口 1、socket 常见API 2、sockaddr结构 &#xff08;三&#xff09;UDP套接字 1、UDP服务器创建…...

springboot 引入前端

前端 打包 npm run build vue.config.js 文件 publicPath 默认建议保持 / publicPath: ‘/’ 后端 目录 粘贴下面目录之一&#xff1a; src/main/resources/static/ src/main/resources/public/ 补充&#xff08;用的少&#xff09; server:servlet:context-path: /thirdAdm…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...