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

记事本(父页面与iframe子页面的联通,vue3+ts展示fbx模型,与tga贴图)

 vue3+ts 展示fbx与tga贴图

npm i three --save
<template><div ref="modelContainer"></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as THREE from 'three';
import { FBXLoader } from 'three/addons/loaders/FBXLoader'; // 导入FBXLoader
import { TGALoader } from 'three/examples/jsm/loaders/TGALoader'
const modelContainer = ref<HTMLElement | null>(null);
let fbxModel = null as any;
onMounted(() => {// 创建场景const scene = new THREE.Scene();// 创建相机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 2.5;camera.position.y = 1.5;// 设置alpha为true// 设置clearColor为透明// 创建渲染器const renderer = new THREE.WebGLRenderer({ alpha: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0x000000, 0);modelContainer.value?.appendChild(renderer.domElement);// 创建FBX加载器const loader = new FBXLoader();const tgaloader = new TGALoader()// 贴图路径数组const texturePaths = ['/public/models/LoGo_D.tga','/public/models/LoGo_N.tga'];// 加载FBX模型loader.load('/public/models/LoGo.fbx',(fbx) => {fbxModel = fbx;// 创建一个包含多个贴图的数组const textures = texturePaths.map(path => {const texture = tgaloader.load(path);texture.colorSpace = THREE.SRGBColorSpace;return texture;});// 创建一个包含多个贴图的uniform对象const uniforms = {texture1: { value: textures[0] },texture2: { value: textures[1] },};// 顶点着色器代码const vertexShader = `varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`;// 片段着色器代码const fragmentShader = `varying vec2 vUv;uniform sampler2D texture1;uniform sampler2D texture2;void main() {vec4 color1 = texture2D(texture1, vUv);vec4 color2 = texture2D(texture2, vUv);gl_FragColor = mix(color1, color2, 0.001); }`;// 创建着色器材质const material = new THREE.ShaderMaterial({uniforms: uniforms,vertexShader: vertexShader,fragmentShader: fragmentShader,});// 遍历模型的所有子网格fbx.traverse((child: any) => {if (child instanceof THREE.Mesh) {// 应用着色器材质到子网格child.material = material;}});scene.add(fbxModel);},(xhr) => {console.log((xhr.loaded / xhr.total) * 100 + '% loaded');},(error) => {console.error(error);});// 创建光源const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);scene.add(ambientLight);const pointLight = new THREE.PointLight(0xffffff, 1);camera.add(pointLight);scene.add(camera);// 渲染场景const animate = () => {requestAnimationFrame(animate);// 根据滚动条位置调整模型的旋转角度if (fbxModel) {fbxModel.rotation.y += 0.01;}// const scrollTops = window.pageYOffset || document.documentElement.scrollTop;// if (scrollTops >= 12220) {//     const maxRotation = Math.PI / 2; // 最大旋转角度为90度,模型躺下//     fbxModel.rotation.y = maxRotation * scrollTops;// }// 在这里可以添加模型的旋转或其他动画renderer.render(scene, camera);};animate();});
</script><style scoped>
/* 在这里可以添加样式 */
</style>

 iframe子页面与父页面

<script>
//子页面 iframe
window.parent.postMessage({data:'data'}, '*');//父页面
window.addEventListener('message',function (e: any) {if (e.data.action === "closeLoading") {TransferMethod()}},false
)
</script>

相关文章:

记事本(父页面与iframe子页面的联通,vue3+ts展示fbx模型,与tga贴图)

vue3ts 展示fbx与tga贴图 npm i three --save <template><div ref"modelContainer"></div> </template><script setup lang"ts"> import { ref, onMounted } from vue; import * as THREE from three; import { FBXLoader…...

【好书推荐-第五期】《互联网大厂推荐算法实战》(异步图书出品)

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究生。公粽号&#xff1a;程序员洲洲。 &#x1f388; 本文专栏&#xff1a;本文…...

C++ Qt day2

自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c; 定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出该矩形的周长和面积函数:void show() #include <io…...

Mac上如何设置映射某个网站站点域名的IP

最近某常用的站点换 IP 了&#xff0c;但是 DNS 服务器还没有修改&#xff0c;这就导致无法访问&#xff08;换 DNS 服务器也不行&#xff09;。在用了一段时间的 IP 访问之后&#xff0c;还是没好&#xff0c;不知道是 DNS 污染还是咋了&#xff0c;所以最后还是手动改一下吧。…...

智能分析网关V4智慧冶金工厂视频智能监管方案

一、背景与需求 随着工业4.0的推进&#xff0c;冶金行业正面临着转型升级的压力。为了提高生产效率、降低能耗、保障安全&#xff0c;冶金智能工厂视频监管方案应运而生。该方案通过高清摄像头、智能分析技术、大数据处理等手段&#xff0c;对工厂进行全方位、实时监控&#xf…...

WebSocket实现HTML+SpringBoot聊天功能,小程序+SpringBoot聊天功能

目录 一、认识WebSocket 二、HTML实现聊天 三、微信小程序实现聊天 一、认识WebSocket 1.首先博主在初学Java时自我感觉走了很多弯路&#xff0c;因为以前见识短&#xff0c;在接触聊天功能时根本就没能想到有WebSocket这个聊天框架&#xff0c;就只能用底层的UDP或TCP实现聊…...

SpringMVC-RESTFul

文章目录 RESTFul一、基础概念二、增删改查1.查询全部用户信息 &#xff08;GET&#xff09;2.根据id查询用户信息3.添加用户&#xff08;POST&#xff09;4.修改用户 &#xff08;PUT&#xff09;5.删除用户 &#xff08;DELETE&#xff09; RESTFul 一、基础概念 二、增删改…...

Spring Boot3整合knife4j(swagger3)

目录 1.前置条件 2.导依赖 3.配置 1.前置条件 已经初始化好一个spring boot项目且版本为3X&#xff0c;项目可正常启动。 作者版本为3.2.2 初始化教程&#xff1a; 新版idea创建spring boot项目-CSDN博客https://blog.csdn.net/qq_62262918/article/details/135785412?…...

解决Windows系统本地端口被占用

目录 一、被程序占用端口 1.通过终端杀掉占用端口的进程 2.任务管理器 二、被系统列为保留端口 前言&#xff1a; 首先了解为什么会出现端口被占用的情况 端口被占用的情况可能出现的原因有很多&#xff0c;主要有以下几点&#xff1a; 1.多个应用程序同时启动&…...

GPS位置虚拟软件 AnyGo mac激活版

AnyGo for Mac是一款一键将iPhone的GPS位置更改为任何位置的强大软件&#xff01;使用AnyGo在其iOS或Android设备上改变其GPS位置&#xff0c;并在任何想要的地方显示自己的位置。这对那些需要测试应用程序、游戏或其他依赖于地理位置信息的应用程序的开发人员来说非常有用&…...

视频号视频怎么使用视频号下载助手提取视频呢?

微信视频号怎么使用视频下载助手提取视频&#xff0c;今天就和大家一起来看看我是如何操作的。 关于视频下载助手&#xff0c;给大家准备好了。获取方式在文末。注意看下关键词&#xff0c;家人们。 微信视频号是微信平台上的一个短视频分享功能&#xff0c;类似于抖音、快手这…...

第一篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例:从helloworld开始理解鸿蒙开发ArkTS编程思路

传奇开心果短博文系列 系列短博文目录鸿蒙开发技术点案例示例系列 短博文目录一、前言二、初步解读鸿蒙的helloworld三、进一步深入解读理解 系列短博文目录 鸿蒙开发技术点案例示例系列 短博文目录 一、前言 从掰碎了揉烂了详细注释解读helloworld开始&#xff0c;理解Ark…...

四、MySQL之DML DQL

有关数据表的DML操作 INSERT 针对于数据的插入DELETE 针对于数据的删除UPDATE 针对于数据的修改 4.1 INSERT语句 INSERT INTO 表名 [(列名1,列名2,....)] VALUES (值1&#xff0c;值2&#xff0c;...); 默认情况下&#xff0c;一条插入命令只针对一行进行影响INSERT INTO 表…...

YOLOv8优化策略:注意力涨点系列篇 | 多尺度双视觉Dualattention | Dual-ViT,顶刊TPAMI 2023

🚀🚀🚀本文改进:多尺度双视觉Dualattention注意yolo,提升小目标检测能力 🚀🚀🚀YOLOv8改进专栏:http://t.csdnimg.cn/hGhVK 学姐带你学习YOLOv8,从入门到创新,轻轻松松搞定科研; 1.原理介绍 论文:Dual Vision Transformer | IEEE Journals & Magazine …...

视频渲染靠cpu还是显卡 会声会影视频渲染的作用是什么

视频渲染最占用的资源就是CPU&#xff0c;多核心多线程&#xff0c;这样才能渲染快。渲染可以在时间线上实时平滑预览&#xff0c;便于编辑&#xff0c;最终导出成片的时候速度也会快一些&#xff0c;渲染就是对每桢的图像进行重新优化的过程。 渲染的作用主要是能够保证使用者…...

v-if 导致 elementui 表单校验失效问题解决

问题 在使用 elementui 表单的过程中&#xff0c;某些表单项需要通过 v-if 来判断是否展示&#xff0c;但是这些表单项出现了检验失效的问题。 解决方法 1、给需要 v-if 判断的表单项添加 key 值 <el-form ref"form" :model"form"><el-form-i…...

Linux本地部署SVN服务结合内网穿透实现远程访问

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…...

短信平台(电信)

通信方式 采用http1.1通信方式&#xff0c;数据以post方式提交 http 头设置&#xff1a;application/json 签名 采用MD5加密方式, 源字符串采用字段拼接方式 签名中appSecret是平台分配密码 签名方法&#xff1a; 如&#xff1a;String signmd5(param1param2param3…paramN) …...

11.STM32F4 输入捕获

一、输入捕获概念 输入捕获模式可以用来测量脉冲宽度或者测量频率。我们以测量脉宽为例&#xff0c;用一个简图来说明输入捕获的原理&#xff0c;如图1所示&#xff1a; 图1&#xff1a;输入捕获脉宽测量原理图 STM32F4的输入捕获&#xff0c;简单的说就是通过检测TIMx_CHx上的…...

opencv#30 线性滤波

均值滤波原理 均值滤波步骤 Step1:求和。 Step2:计算平均值。 所谓均值滤波&#xff0c;就是求平均值的意思。我们假设在一个3*3的范围内有一个图像&#xff0c;其中这个图像每一个像素可能含有噪声&#xff0c;也可能不含噪声&#xff0c;我们是不知道的&#xff0c;因此通…...

保姆级教程:在Windows 11上完美运行STM32CubeMX 6.9.0(附旧版本资源整理)

在Windows 11上完美运行STM32CubeMX历史版本的终极指南 最近升级到Windows 11后&#xff0c;我发现手头几个老项目使用的STM32CubeMX 6.9.0版本完全无法正常运行。每次启动不是闪退就是卡在初始化界面&#xff0c;而项目又必须使用这个特定版本才能保证代码兼容性。经过一周的…...

遥感智能体模块全景解析:从任务拆解到工作流编排

1. 遥感智能体的核心架构设计 第一次接触遥感智能体&#xff08;RS-Agent&#xff09;这个概念时&#xff0c;很多人会感到困惑&#xff1a;它和传统遥感处理软件有什么区别&#xff1f;简单来说&#xff0c;RS-Agent更像是一个"会思考的助手"。我参与过几个遥感智能…...

避坑指南:Pyannote3.1+Whisper本地部署的5个常见报错解决方案

避坑指南&#xff1a;Pyannote3.1Whisper本地部署的5个常见报错解决方案 语音处理技术正在重塑教育、会议记录和客服质检等场景的交互方式。当开发者尝试将Whisper的精准语音识别与Pyannote的说话人分离能力结合时&#xff0c;常会在环境配置环节遭遇"拦路虎"。本文…...

Avalonia跨平台开发踩坑记:我的第一个带最小化/关闭按钮的MVVM应用

Avalonia跨平台开发实战&#xff1a;从零构建MVVM窗口控制应用 第一次接触Avalonia时&#xff0c;我被它"一次编写&#xff0c;多平台运行"的承诺所吸引。作为一个长期使用WPF的开发者&#xff0c;跨平台桌面应用开发一直是个痛点。但当我真正开始用Avalonia实现一个…...

手柄硬件校准与操控优化:从故障排查到竞技级设置的实战手册

手柄硬件校准与操控优化&#xff1a;从故障排查到竞技级设置的实战手册 【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows 在《艾尔登法环》的 boss 战中&#xff0c;角色总是不受控制地缓慢…...

深入解析FOC电机控制:从理论到实践的无传感器实现

1. 无传感器FOC控制的核心原理 磁场定向控制&#xff08;FOC&#xff09;本质上是在模拟直流电机的控制方式。想象一下小时候玩的四驱车——直流电机通过改变电压就能直接控制转速&#xff0c;简单粗暴。但三相交流电机就像个傲娇的艺术家&#xff0c;需要我们把三相电流"…...

3步实现Windows系统极致优化:Win11Debloat专业指南

3步实现Windows系统极致优化&#xff1a;Win11Debloat专业指南 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其他更改以简化和改善…...

2026年上海网站建设市场分析:企业官网从展示到增长的演进路径

2026年&#xff0c;上海企业数字化服务市场迎来结构性变革。据2026年上半年上海企业数字化服务市场调研数据显示&#xff0c;上海地区企业官网新建与升级需求同比增长45%&#xff0c;中大型企业对官网的核心诉求已从基础信息展示转向AI智能赋能、全球化跨境适配、全链路营销转化…...

lite-avatar形象库入门:如何查找、预览并下载心仪的数字人形象

lite-avatar形象库入门&#xff1a;如何查找、预览并下载心仪的数字人形象 1. 数字人形象库简介 在数字人项目开发中&#xff0c;一个合适的虚拟形象往往能让用户体验大幅提升。lite-avatar形象库正是为解决这一需求而生的专业资源库。 这个基于HumanAIGC-Engineering/LiteA…...

简述双亲委派机制以及其优点

面试 概念&#xff1a;加载类的时候先交给自己的父类加载器执行&#xff0c;直到顶层的启动类加载器&#xff0c;如果父加载器能够完成加载&#xff0c;则交给父类加载器&#xff0c;否则自己尝试加载。 优点&#xff1a;保证类的加载的安全性&#xff0c;避免类的重复加载。...