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.mzph.cn/news/663927.shtml

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

相关文章

踩坑STM32CubeMX生成Makefile工程无法使用printf(“%f“)

过去一年偶有接触STM32开发时都是使用STM32CubeMX生成Makefile的工程&#xff0c;具体开发环境见配置Clion用于STM32开发&#xff08;Makefile&#xff09;&#xff0c;但没想到今天在使用printf打印输出浮点数时无法正常输出&#xff0c;不仅printf无法使用&#xff0c;其他涉…

详解Skywalking 采集springboot 应用日志的方法(内附源码)

大家都知道Skywalking 的链路追踪功能非常强大&#xff0c;可以帮助用户深入了解应用程序中各个组件之间的依赖关系。在实际应用中&#xff0c;往往需要将链路追踪数据与日志数据结合起来进行综合分析。Skywalking 提供了 Trace Log 结合插件&#xff0c;可以帮助用户快速定位问…

1. OpenAI⼤模型⽣态

OpenAI⼤模型⽣态并不只有⼀个模型&#xff0c;⽽是提供了涵盖⽂本、代码、对话、语⾳、图像领域的⼀系列模型。 基本介绍 语⾔类⼤模型&#xff1a;GPT-3、GPT-3.5、GPT-4系列模型。并且&#xff0c;OpenAI在训练GPT-3的同时&#xff0c;训练了参数不同、复杂度各不相同的A、…

【Vue】指令之显示切换,属性绑定

Vue指令【2】 显示切换与属性绑定v-show指令v-if指令v-bind指令 显示切换与属性绑定 v-show指令 作用&#xff1a;根据真假切换元素的显示状态 指令后的内容最终都会解析为布尔值数据改变之后&#xff0c;对应元素的显示状态会同步更新 语法&#xff1a; <div id"…

[NOIP2013 提高组] 货车运输

[NOIP2013 提高组] 货车运输 题目背景 NOIP2013 提高组 D1T3 题目描述 A 国有 n n n 座城市&#xff0c;编号从 1 1 1 到 n n n&#xff0c;城市之间有 m m m 条双向道路。每一条道路对车辆都有重量限制&#xff0c;简称限重。 现在有 q q q 辆货车在运输货物&#x…

c++ STL less 的视角

c less 函数在不同的地方感觉所起的作用是不一样的&#xff0c; 这中间原因是 less 的视角不一样&#xff0c; 下面尝试给出解释下&#xff0c; 方便记忆 1、 左右视角 符合 排序sort less(value, element&#xff09; less 表示一种 “符合关系“&#xff0c; 表示sort 后…

关于Ubuntu下docker-mysql:ERROR 2002报错

报错场景&#xff1a; mysql容器创建好后登录mysql时即使密码正确也是报出下方提示&#xff1a; 原因是在创建mysql容器在创建时本地目录缺失&#xff0c; 先去自建一个目录&#xff0c;例如&#xff1a; /opt/my_sql 正确完整目录如下&#xff1a; docker run --namemys…

一个升级迁移11g到19c使用xtts遇到的小问题

oracle11.2.0.4到19.21 1.系统权限和对象权限&#xff0c;由于大小写对象名问题&#xff0c;如果使用expdp方式迁移可能存在丢失 迁移后需比对对象、权限&#xff0c;避免遗漏 set pagesize 0 set long 90000 set feedback off set echo off spool ddl.sql select dbms_meta…

2024数学建模美赛F题思路代码分享

非法的野生动物贸易会对我们的环境产生负面影响&#xff0c;并威胁到全球的生物多样性。据估 计&#xff0c;它每年涉及高达265亿美元&#xff0c;被认为是全球第四大非法交易。[1]你将开发一个由数 据驱动的5年项目&#xff0c;旨在显著减少非法野生动物贸易。你的目标是说服一…

【misc | CTF】攻防世界 2017_Dating_in_Singapore

天命&#xff1a;这次终于碰到了算是真正的misc题目了 下载附件&#xff0c;打开是PDF&#xff0c;我一开始以为是flag隐写在PDF里面了 虽然也不奇怪&#xff0c;应该是可以的&#xff0c;毕竟PDF有xss漏洞也是可以的 言归正传&#xff0c;打开PDF 看着新加坡的日历&#xff…

ubuntu 上安装和配置Apache2+Subversion

目录 一、安装Apache2和SVN 二、Apache2设置 三、subversion配置 四、创建仓库和设置权限 五、仓库备份和恢复 系统环境 Ubuntu Linux (20.04) apache2 Subversion(1.13.0) 一、安装Apache2和SVN 通过命令在线安装apache2和subversion apt-get install apache2 libap…

2023-12蓝桥杯STEMA考试 C++ 中高级试卷解析

蓝桥杯STEMA考试 C++ 中高级试卷(12月) 一、选择题 第一题 定义字符串 string a = "Hello C++",下列选项可以获取到字符 C 的是(B)。 A、a[7] B、a[6] C、a[5] D、a[4] 第二题 下列选项中数值与其它项不同的是( C)。 A、 B、 C、 D、 第三题 定义变量 int i =…

【Springcloud篇】学习笔记十(十七章):Sentinel实现熔断与限流——Hystrix升级

第十七章_Sentinel实现熔断与限流 1.Sentinel介绍 1.1是什么 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。 Sentinel 以流量为切入点&#xff0c;从流量控制、熔断降级、系统负载保护等多个维度保护服务的稳定性。 用来代替Hystrix Sentinel 具有…

Electron+Vue3+Vite的产品级模板项目

1. electron-vue3-template 基于Vue3 Electron TypeScript的客户端程序模板&#xff0c;使用Vite和Electron Forge构建和打包。 真正做到开箱即用&#xff0c;面向跨平台客户端设计&#xff0c;产品级的项目模板。 项目地址&#xff1a; https://github.com/winsoft666/el…

原子Linux开发板拉流rtsp播放

书接上文&#xff0c;正点原子linux开发板使用ffmpeg api播放视频 现在可以从RTSP拉流了。 视频效果&#xff1a;B站播放拉流的效果 网盘链接 链接&#xff1a;https://pan.baidu.com/s/1ix5OoGJb877tryAETQRMgw 提取码&#xff1a;jc05 上一篇的代码存在内存泄漏的问题&…

第5课 使用FFmpeg将rtmp流再转推到rtmp服务器

本课对应源文件下载链接&#xff1a; https://download.csdn.net/download/XiBuQiuChong/88801992 通过前面的学习&#xff0c;我们已经可以正常播放网络rtmp流及本地mp4文件。这节课&#xff0c;我们将在前面的基础上实现一个常用的转推功能&#xff1a;读取rtmp流或mp4文件并…

架构学习(二):原生scrapy如何接入scrapy-redis,初步入局分布式

原生scrapy如何接入scrapy-redis&#xff0c;实现初步入局分布式 前言scrpy-redis分布式碎语 实现流程扩展结束 前言 scrpy-redis分布式 下图是scrpy-redis官方提供的架构图&#xff0c;按我理解&#xff0c;与原生scrapy的差异主要是把名单队列服务器化&#xff0c;也是存储…

Modbus协议学习第七篇之libmodbus库API介绍(modbus_write_bits等)

写在前面 在第六篇中我们介绍了基于libmodbus库的演示代码&#xff0c;那本篇博客就详细介绍一下第六篇的代码中使用的基于该库的API函数。另各位读者&#xff0c;Modbus相关知识受众较少&#xff0c;如果觉得我的专栏文章有帮助&#xff0c;请一定点个赞&#xff0c;在此跪谢&…

golang网络编程day3

golang网络编程day3 golang TCP聊天室golang UDP聊天室URL组成golang URL编程golang http编程http请求方法golanghttp框架 golang TCP聊天室 看懂例子把它理解好&#xff0c;知道实现的原理是什么&#xff0c;还可以自己实现出来。 忘了就看day2的讲解&#xff0c;里面的函数…

自然语言处理(NLP)—— Dialogflow ES聊天机器人

1. 背景介绍 这个实验室的目标是让你了解并使用Google的Dialogflow服务。Dialogflow是一个可以让你创建聊天机器人的服务&#xff0c;这个过程不需要或者只需要很少的编程技能。 1.1 账号的创建 为了完成这个实验室&#xff0c;你需要在以下网站上创建账号&#xff1a…