vue-3d-model

vue-3d-model - npm

GitHub - hujiulong/vue-3d-model: 📷 vue.js 3D model viewer component

通过该插件降低Threejs的使用难度

vue项目加载三维模型,我把模型放在了服务器的tomcat里面,需要对tomcat的fbx项目文件夹设置跨域,如下:

WEB-INF\web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app><filter><filter-name>cross-origin</filter-name><filter-class>org.apache.catalina.filters.CorsFilter</filter-class><init-param><param-name>cors.allowed.origins</param-name><param-value>*</param-value></init-param><init-param><param-name>cors.allowed.methods</param-name><param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value></init-param><init-param><param-name>cors.allowed.headers</param-name><param-value>*</param-value></init-param></filter><filter-mapping><filter-name>cross-origin</filter-name><url-pattern>/*</url-pattern></filter-mapping>
</web-app>

vue项目要注意版本

# 默认安装 "vue-3d-model": "^1.4.1", 只支持vue2
npm i vue-3d-model
# vue3 需要安装2版本,vite只建立在vue3之上的,因此vite也是需要安装2版本
npm i vue-3d-model@v2.0.0-alpha.4 --save 

代码

<template><div class="player-container"><!--1版本 @on-load--><!--2版本 @load--><model-fbx :background-alpha="0" :scale="scale" :rotation="rotation" :lights="lights" src="https://***/fbx/yushuihy.FBX"@on-load="onLoad" /><!-- <model-gltf :background-alpha="0" :scale="scale" :rotation="rotation" :lights="lights"src="https://***/fbx/panjiduanmian.glb" @on-load="onLoad" /> --></div>
</template><script>
import { ModelFbx, ModelGltf } from 'vue-3d-model';export default {components: {ModelFbx, ModelGltf},data() {return {scale: { x: 1.5, y: 1.5, z: 1.3 },rotation: {x: 0,y: 0,z: 0,},imgUrl: 'yushuihy',//3d模型灯光lights: [{type: 'HemisphereLight',position: { x: 2, y: 2, z: 2 },skyColor: 0xffffff,intensity: 3,},{type: 'DirectionalLight',position: { x: 2, y: 2, z: 2 },color: 0xffffff,intensity: 3,}],}},methods: {onLoad() {console.log('模型加载完成')this.rotate();},rotate() {requestAnimationFrame(this.rotate);//实现自动旋转效果this.rotation.y += 0.001;},}
}
</script><style>
html,
body {padding: 0;margin: 0;overflow: hidden;
}.player-container {width: 100vw;height: 100vh;background-color: black;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/250422.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于破解IDEA后启动闪退的问题

问题描述&#xff1a;2023.1启动不了&#xff0c;双击桌面图标&#xff0c;没有响应。 解决办法&#xff1a; 打开C:\Users\c\AppData\Roaming\JetBrains\IntelliJIdea2023.1\idea64.exe.vmoptions 这个文件。 内容如下所示&#xff1a; 删除红框的数据以后&#xff0c;再登录…

算法41:掉落的方块(力扣699题)----线段树

题目&#xff1a;https://leetcode.cn/problems/falling-squares/description/ 在二维平面上的 x 轴上&#xff0c;放置着一些方块。 给你一个二维整数数组 positions &#xff0c;其中 positions[i] [lefti, sideLengthi] 表示&#xff1a;第 i 个方块边长为 sideLengthi &…

Docker 阿里云镜像仓库CR使用实践

一、使用容器镜像&#xff0c;查看镜像&#xff0c;创建&#xff0c;推送&#xff0c;拉取阿里云镜像 CR镜像管理&#xff08;阿里云容器镜像服务&#xff08;Container Registry&#xff09;&#xff09; 登录实例 未创建的镜像名称也可以push、docker的私有仓库需要提起创建…

[.NET] 查询当前已安装所有 Win32 与 UWP 应用

为了获取当前设备用户已安装的所有应用程序, 一般来讲有两种方案. 一种是通过查询 “shell:AppsFolder” 目录下所有项, 一种是从开始菜单中获取所有快捷方式, 然后加上查询所有已安装的 UWP 应用, 最后得到总列表. 如需代码参考, 请看 github.com/SlimeNull/WindowsAppsQuery …

基于Web停车场管理系统

技术架构&#xff1a; Spring MVC JSP MySQL 有需要该项目的小伙伴可以私信我你的Q。 功能描述&#xff1a; 基于Web停车场管理系统主要用于实现停车场相关信息管理&#xff0c;基本功能包括&#xff1a;系统信息管理模块、车位信息管理模块、IC卡信息管理模块、固定车主…

【PaddleSpeech】语音合成-男声

环境安装 系统&#xff1a;Ubuntu > 16.04 源码下载 使用apt安装 build-essential sudo apt install build-essential 克隆 PaddleSpeech 仓库 # github下载 git clone https://github.com/PaddlePaddle/PaddleSpeech.git # 也可以从gitee下载 git clone https://gite…

后端软件三层架构

一、三层架构简介 三层架构是软件开发中广泛采用的一种经典架构模式&#xff0c;其核心价值在于通过清晰的任务划分来提高代码的可维护性和重用性。具体来说&#xff0c;三层架构主要包括以下三个层次&#xff1a; 持久层&#xff08;DAO层&#xff09;&#xff1a;这一层主要…

设备的层次结构 - 驱动程序的复杂层次结构

由于设备对象的水平结构和垂直结构&#xff0c;组成了Windows设备的树形结构图。在Windows中出事的时候会有一个根设备&#xff0c;为了理解简单&#xff0c;我们将PCI总线想象成根总线&#xff08;根总线其实不是PCI总线&#xff0c;只是为了理解方便&#xff09;。查到PCI总线…

京东物流基于 StarRocks 的数据分析平台建设

作者&#xff1a;京东物流 数据专家 刘敬斌 小编导读&#xff1a; 京东集团 2007 年开始自建物流&#xff0c;2017 年 4 月正式成立京东物流集团&#xff0c;截至目前&#xff0c;京东物流已经构建了一套全面的智能物流系统&#xff0c;实现服务自动化、运营数字化及决策智能化…

基于WordPress开发微信小程序1:搭建Wordpress

2年前&#xff0c;在知乎上提问&#xff1a;多数公司为什么宁愿自研也不用wordpress二次开发建站&#xff1f; - 知乎 (zhihu.com)&#xff0c;收到了&#xff0c;很多回答 自己打算做一下提升&#xff0c;便有了自己基于wordpress开发微信小程序的想法 项目定位 基于wordpre…

项目安全-----加密算法实现

目录 对称加密算法 AES &#xff08;ECB模式&#xff09; AES(CBC 模式)。 非对称加密 对称加密算法 对称加密算法&#xff0c;是使用相同的密钥进行加密和解密。使用对称加密算法来加密双方的通信的话&#xff0c;双方需要先约定一个密钥&#xff0c;加密方才能加密&#…

SpringBoot实战2

目录 1.如何返回两个类型的数据&#xff1f;User和Booth 2.如何使用MyBatis遍历一个数组进行查询&#xff1f; 3.前端要的数据太多太杂&#xff0c;我们拼接多个List&#xff0c;前端找数据困难&#xff0c;浪费时间。因此我们进行三表联表查询。 1.首先创建一个vo包&#x…

用Python和 Cryptography库给你的文件加密解密

用Python和 Cryptography库给你的文件加密解密 用Python和 Cryptography库给你的文件加把安全锁。 先介绍与加密解密有关的几个基本概念。 加密&#xff08;Encryption&#xff09;&#xff1a;加密是将明文转换为密文的过程&#xff0c;使得未经授权的人无法读懂。 解密&a…

带着问题读源码——Spring MVC是怎么找到接口实现类的?

引言 我们的产品主打金融服务领域&#xff0c;以B端客户为我们的核心合作伙伴&#xff0c;然而&#xff0c;我们的服务最终将惠及C端消费者。在技术实现上&#xff0c;我们采用了公司自主研发的微服务框架&#xff0c;该框架基于SpringBoot&#xff0c;旨在提供高效、可靠的服…

第八篇:node模版引擎Handlebars及他的高级用法(动态参数)

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! ​ 目录 &#x1f4d8; 引言&#xff1a; &#x1f…

Mac基于VMware安装CentOS

流程偏长&#xff0c;下一步根本点不完&#xff1b; 01 首先&#xff0c;明确下两款软件的版本信息&#xff1b; VMware是【VMware-Fusion-13.5.0】CentOS是【CentOS-7-x86_64-Minimal-1908】&#xff1b; VMware用来管理虚拟机系统&#xff0c;安装就不多说了&#xff0c;双…

match-case与if/elif/else(python)

if/elif/else语句应对一般场景&#xff0c;match-case主打复杂条件分支语句。 (笔记模板由python脚本于2024年01月28日 18:27:37创建&#xff0c;本篇笔记适合有一定编程基础&#xff0c;对python基础已比较扎实的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1…

npm ERR! reason: certificate has expired(淘宝镜像过期)

npm ERR! request to https://registry.npm.taobao.org/yauzl/-/yauzl-2.4.1.tgz failed, reason: certificate has expired 今天在执行npm install命令时&#xff0c;报错百度了下是淘宝证书过期原因 解决方法一 执行下面两个命令再进行npm install即可 npm cache clean --…

Kafka 记录

推荐资源 官网http://kafka.apache.org/Githubhttps://github.com/apache/kafka书籍《深入理解Kafka 核心设计与实践原理》 Kafka 架构 Kafka使用ZooKeeper作为其分布式协调框架&#xff0c;其动态扩容是通过ZooKeeper来实现的。Kafka使用Zookeeper保存broker的元数据和消费者信…

AI大语言模型学习笔记之三:协同深度学习的黑魔法 - GPU与Transformer模型

Transformer模型的崛起标志着人类在自然语言处理&#xff08;NLP&#xff09;和其他序列建模任务中取得了显著的突破性进展&#xff0c;而这一成就离不开GPU&#xff08;图形处理单元&#xff09;在深度学习中的高效率协同计算和处理。 Transformer模型是由Vaswani等人在2017年…