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

vue3 3D炫酷模型banner图

项目场景:

在官网首页展示3D炫酷动画模型,让整个模型都展示出来。


问题描述

主要是3D动画的展示效果,有些3d模型网站可以从51建模网站中获取。


案例代码:

<script setup>
import * as imgs from '../units/img'
import { onMounted, reactive, ref } from 'vue';
import { orderList, orderOtherList, teachersList, modelList } from '../units/img';
import MoveLeftTwo from '../components/MoveLeftTwo.vue';
import WordsListTwo from '../components/WordsListTwo.vue'
import ShowDialog from '../components/ShowDialog.vue'
import { ElScrollbar, ElLoading } from 'element-plus'import { vue3dLoader } from "vue-3d-loader";const lights = ref([{type: 'HemisphereLight',position: { x: 0, y: 1, z: 0 },skyColor: 0xffffff,// groundColor: 0xFF0000, // 此代码为灯光后颜色intensity: 1,
},
{type: 'DirectionalLight',position: { x: 1, y: 1, z: 1 },color: 0xffffff,intensity: .8,
}])
const scale = ref({ x: 1, y: 1, z: 0.2 })
const rotation = ref({x: 0,y: 0,z: 0,})
const onLoad = () => {rotate()
}
const rotate = () => {requestAnimationFrame(rotate());//实现自动旋转效果rotation.value.y += 0.001;
}
</script><template><div class="pageBoxs"><div class="contentModels"><h1 class="contentTitle">国内领先的3D互动展示平台</h1><p class="contentSubTitle">为创作者提供丰富的精品模型及<br/>强大的在线3D编辑展示引擎</p></div><div class="threeModels"><vue3dLoader style="height: 100vh;width:100%;" :showFps="false" :scale="scale" :rotation="rotation" :lights="lights"filePath="girls/scene.gltf" :backgroundAlpha="0" @load="onLoad" @process="process"></vue3dLoader></div></div>
</template>
<style scoped lang="less">
.pageBoxs {// border: 1px solid;height: 100vh;background: url(../assets/img/3d/bg.png) no-repeat;background-position: center;background-size: cover;position: relative;.contentModels {.contentTitle{position: absolute;top: 35%;left: 15%;font-size: 52px;font-weight: 400;}.contentSubTitle {position: absolute;left: 15%;top: 46%;font-size: 28px;line-height: 48px;width: 442px;}}.threeModels {position: absolute;height: 100vh;width: 50%;right: 0;display: flex;justify-content: center;}
}
</style>

收获

        可以从其它的网站中学习新的功能,让前端技能丰富起来。

相关文章:

vue3 3D炫酷模型banner图

项目场景&#xff1a; 在官网首页展示3D炫酷动画模型&#xff0c;让整个模型都展示出来。 问题描述 主要是3D动画的展示效果&#xff0c;有些3d模型网站可以从51建模网站中获取。 案例代码&#xff1a; <script setup> import * as imgs from ../units/img import { o…...

小程序内使用路由

一:使用组件 1)创建组件 2)在需要的页面的json/app.json可实现局部使用和全局使用 在局部的话,对象内第一层,window配置也是第一层,而在全局配置也是在第一层,window在window对象内.第二层.内部执行遍历不一样. 3)页面使用 上述所写可实现在页面内使用组件.效果是页面内可以将…...

【数据结构】第七节:堆

个人主页&#xff1a; 深情秋刀鱼-CSDN博客 数据结构专栏&#xff1a;数据结构与算法 源码获取&#xff1a;数据结构: 上传我写的关于数据结构的代码 (gitee.com) ​ 目录 一、堆 1.堆的概念 2.堆的定义 二、堆的实现 1.初始化和销毁 2.插入 向上调整算法 3.删除 向下调整算法…...

前端大师-高级Web开发测验

目录 前言 1.按正确的执行顺序排列脚本 2.哪些说法是正确的&#xff1f;&#xff08;D&#xff09; 3.填写正确的术语 4.程序的输出 5.将资源提示与其定义匹配 6.以下程序的输出是&#xff1f; 7.将PerformanceNavigationTimings按正确的顺序排列 8.将缓存指令与其定义…...

延迟初始化和密封类

Kotlin 延迟初始化&#xff08;Lazy Initialization&#xff09; 定义 在 Kotlin 中&#xff0c;延迟初始化允许你延迟一个对象的初始化&#xff0c;直到首次访问该对象时才进行初始化。这通常用于那些初始化开销较大&#xff0c;或者只在程序运行的某个特定点才需要的对象。…...

Kotlin基础之基本语法

Kotlin 简介 Kotlin 是一种由 JetBrains 开发的静态类型编程语言&#xff0c;设计用于与 Java 虚拟机 (JVM) 兼容&#xff0c;同时也可用于 Android、JavaScript&#xff08;通过 Kotlin/JS&#xff09;和原生&#xff08;通过 Kotlin/Native&#xff09;开发。Kotlin 旨在提供…...

多态(难的起飞)

注意 virtual关键字&#xff1a; 1、可以修饰原函数&#xff0c;为了完成虚函数的重写&#xff0c;满足多态的条件之一 2、可以菱形继承中&#xff0c;去完成虚继承&#xff0c;解决数据冗余和二义性 两个地方使用了同一个关键字&#xff0c;但是它们互相一点关系都没有 虚函…...

安装GO环境

#windows 1.下载go的安装包msi,下载完双击运行,指定一个目录进行安装 #msi安装时,会自动设置以下环境变量: #GOPATH(默认设置为C:\Users\hhx\go), #C:\Users\hhx\go\bin, #go安装位置下的bin目录 2.检查是否安装成功,终端中运行go version解释一些环境变量 GOROOT:go的安装位置…...

记一次由于代码原因导致Mysql连接被打满和唯一索引重复问题

先说一下事情产生的背景&#xff1a;原先的代码逻辑是消费MQ&#xff0c;然后请求其他服务的接口&#xff0c;对接口的返回值result做落库操作&#xff0c;现在要新加个逻辑&#xff0c;做完落库操作后还要再将result封装落到新表中&#xff1b;即消费一次MQ(MQ消息的频率非常高…...

redis数据类型之string,list

华子目录 key操作说明SCAN cursor [MATCH pattern] [COUNT count]dump与restorekeys 通配符 示例演示 string说明setbit key offset valuegetbit key offsetsetrange key offset value List结构图相关命令lrem key count valueltrim key count value示例&#xff1a;使用 LTRIM…...

Android android.os.DeadObjectException aidl通信异常分析及解决

问题描述 做一款音乐播放应用&#xff0c;播放服务是通过AIDL形式对外暴露&#xff0c;允许跨进程调用且多个App同时操作音乐播放&#xff0c;偶现android.os.DeadObjectException问题 12-15 09:28:12.371: W/System.err(5412): android.os.DeadObjectException 12-15 09:28:…...

dp + 计数,1954D - Colored Balls

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1954D - Codeforces 二、解题报告 1、思路分析 本题前置题目&#xff1a; 1953. 你可以工作的最大周数 通过前置题目可以知道如何计算两两不同数对序列的最大长度 我们记最大数量为ma&#xf…...

【设计模式深度剖析】【5】【结构型】【桥接模式】| 以电视和遥控器为例加深理解

&#x1f448;️上一篇:组合模式 设计模式-专栏&#x1f448;️ 目 录 桥接模式(Bridge Pattern)定义英文原话是&#xff1a;直译理解 4个角色UML类图代码示例 应用优点缺点使用场景 示例解析&#xff1a;电视和遥控器UML类图 桥接模式(Bridge Pattern) 定义 英文原话是&am…...

一键安装脚本sh

首先是初始化的ros安装的一些库&#xff1b; install.sh: execute_command() {if [ "$1" "1" ]; thenwget http://fishros.com/install -O fishros && bash fishroselif [ "$1" "2" ]; then#gnome-terminal --title"n…...

WebGL在医学成像方面的应用

WebGL&#xff08;Web Graphics Library&#xff09;是一种用于在Web浏览器中呈现3D和2D图形的JavaScript API。它被广泛应用于各种领域&#xff0c;包括医学成像。以下是WebGL在医学成像方面的应用及其详细描述。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&…...

SpringBoot+layuimini实现角色权限菜单增删改查(layui扩展组件 dtree)

角色菜单 相关组件方法效果图MySQL代码实现资源菜单树组件实现权限树方法js这里我先主要实现权限树的整体实现方法&#xff0c;如果是直接查看使用的话可以只看这里&#xff01; 后端代码Controlle层代码Service代码及实现类代码Service代码ServiceImpl代码 resourceMapper 代码…...

项目范围管理

目录 1.概述 2.主要工作 3.基础 4.项目范围管理的过程 5.规划范围管理 6.收集需求 7.定义范围 8.创建 WBS 9.确认范围 10.控制范围 1.概述 项目范围管理是项目管理中的一个重要组成部分&#xff0c;涉及到确定项目需要完成的工作范围&#xff0c;以及如何管理和控制…...

监管端..

文章目录 1. 登录流程2. 日志AOP 1. 登录流程 使用账号&#xff08;手机号&#xff09;、密码、验证码。登录就是获取token的&#xff0c;输入的账号密码用RSA加密&#xff08;非对称&#xff09; 首先输入账号密码&#xff0c;在发送手机验证码时候先校验账号密码有没有输入…...

点击登录按钮先检测输入框的规则检测(vue组合式)

<template><el-form :model"user" :rules"rules" ref"loginForm" label-width"auto" style"max-width: 600px"><el-form-item label"用户名" prop"name"><el-input v-model"…...

网络工程师---第四十二天

1、基于子网的vlan划分配置步骤是什么&#xff1f; 2、基于端口的vlan划分配置步骤是什么&#xff1f; 3、基于MAC地址的vlan划分配置步骤是什么&#xff1f; 4、请简述无线局域网的组网方式有哪几种&#xff0c;区别是什么&#xff1f; 5、请简述堆叠、级联和集群作用和区别是…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

AxureRP-Pro-Beta-Setup_114413.exe (6.0.0.2887)

Name&#xff1a;3ddown Serial&#xff1a;FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名&#xff1a;Axure 序列号&#xff1a;8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...

GraphRAG优化新思路-开源的ROGRAG框架

目前的如微软开源的GraphRAG的工作流程都较为复杂&#xff0c;难以孤立地评估各个组件的贡献&#xff0c;传统的检索方法在处理复杂推理任务时可能不够有效&#xff0c;特别是在需要理解实体间关系或多跳知识的情况下。先说结论&#xff0c;看完后感觉这个框架性能上不会比Grap…...

高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…...

FTXUI::Dom 模块

DOM 模块定义了分层的 FTXUI::Element 树&#xff0c;可用于构建复杂的终端界面&#xff0c;支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...