当前位置: 首页 > 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…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...