vue2/3 - three.js使用CSS3DObjec缩放浏览器改变宽高时位置偏移问题，当浏览器进行缩放导致尺寸变化后页面位置乱了偏移，vue three.js CSS3DObjec（详细解决方法

已于 2024-04-15 10:13:31 修改
阅读量2.5k 收藏 3
点赞数 3
分类专栏： 前端常见问题解决 文章标签： three.js CSS3DObject vue2 vue3 浏览器缩放变形偏移位移 three全屏导致问题怎么固定 three详细解决方案教程
于 2024-04-15 10:11:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/137769569
版权

效果图

在vue2、vue3 + three.js开发中，用CSS3DObject后只要改变浏览器宽高就会导致偏移问题，当浏览器缩放时位置变了，如何解决CSS3DObject定位固定住不被浏览器的缩放和改变大小所影响。

其他教程无法解决，本文提供详细示例代码，完美解决。

在这里插入图片描述

解决方法

这个问题，其实

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue3接入腾讯地图后遇到的错位问题探究
峰会路转的博客
09-30 898
静下心来想想，不对啊，接口数据没问题，不是后台的事，那尼玛甩不了锅了，我还能安心吃饭睡觉吗啊，于是一番百度，没有这个问题，我就问就没人遇到过这个问题吗，一条相关资料都没有啊，惨惨惨~~~但是，然而，构建上线后就让人摸不着头脑了，进入编辑页面的时候，地图出现了，如下效果，css错位了，他就错位了，防不胜防的那么一下啊~~~排查了大半天，终于没白忙活了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~对，没看错，上线后就是这样了，中间空白了一大片，地图往下面跑了，不知道就这么抽风了。
vue-magnifier-Vue.js 2.x的简单图像缩放/放大组件。-Vue.js开发
05-27
Vue-Magnifier：一个简单的VueJS 2.x组件有关演示，请访问：https://codepen.io/zeknoss/pen/vaxGKe Vue放大镜是b的免费组件Vue-Magnifier：一个简单的VueJS 2.x组件有关演示，请访问：https://codepen.io/zeknoss/pen/vaxGKe Vue放大镜是基本图像缩放实践的免费组件。 您可以按以下方式使用它： 要自定义组件的外观，只需编辑vue组件文件，或提供的独立vue-magnifier.scss或vue-magnifier.css文件。 从CDN独立加载
VUE适配笔记本缩放125%，150%导致页面错乱问题
liangchen77的博客
09-11 1070
由于前端在开发时使用的都是标准ui设计图，基本都是按照所以1920*1080， 而小屏幕笔记本由于分辨率高，所以导致的显示元素变小，因此很多笔记本的默认显示都是放大125%或者150%。但是浏览器和屏幕是可以互相中和的，举个例子，笔记本屏幕方法150%，那么浏览器一定是缩放2/3时可以显示原始的页面，因为他们共同影响页面元素的。备注：这里是屏幕任意缩放，不能是浏览器任意缩放，浏览器缩放会导致所有内容同时变大或变小，代码：app.vue。
chrome 下 缩放element ui 的table组件会导致表头和表体错位
nishiweiyj的博客
10-20 319
chrome 下 缩放element ui 的table组件会导致表头和表体错位 在index.html或者入口文件App.vue中添加样式 亲测App.vue中无效的话就在index.html中添加 body .el-table th.gutter{ display: table-cell!important; } display: table-cell 这个属性让元素变成表格单元 配合display:table可以模拟table的布局属性 ...
three 悬浮提示框
Asiter的博客
12-23 5495
three 实现悬浮提示框效果 提示: 我现在这边是用的vue2.0的项目来使用的three 1.事前了解 对于悬浮提示框，官方提供了好几种做法。精灵图等做法。 而我选了CSS3DObject,把一个CSS元素转化成一个three的3D对象插入到场景中 需要用到以下的库CSS3DRenderer,CSS3DObject. CSS3DObject把一个文档dom对象转化成three可用的Object3D对象 CSS3DRenderer就是负责渲染这个CSS3DObject的渲染器 思路如下 新生成一
Vue项目 缩放之后样式变乱
zyzyzyzyyy的博客
02-13 577
vue项目，缩放之后样式变乱
avue表格因页面缩放导致错位问题解决
莫宛的博客
04-14 2707
avue表格因页面缩放导致错位问题解决 一、前置知识 avue错位问题可以通过重新渲染解决this.$refs.originPlace.refreshTable(); 参考:Avue使用心得 页面缩放的监听方法window.onresize 1. 尝试在vue中使用window.onresize 时不生效，采用addEventListener方式书写才能生效； 参考：vue中window.onresize无效的解决方案 2. 在mounted中设置对resize的监听即可实现监听页面尺寸改变；
three.js CSS3DObject在非全屏场景下浏览器缩放尺寸导致位置偏移问题（vue）
最新发布
HQBCK的博客
04-10 412
经过多次测试，在flex布局或者百分比布局下，threejs场景盒子左侧的盒子宽度会出现小数的情况，猜测three.js在进行CSS3DObject定位操作的时候会因为小数问题导致精度丢失。1、不使用flex布局或者百分比布局，使用精确的宽度进行布局。2、使用js设置精准的盒子宽度。
threejs CSS3DObject、CSS3DSprite实现文字以及他们的区别
九段刀客的博客
08-15 5492
threejs 使用CSS3DObject
vue中使用three，绘制3d场景--obj模型加载
qq_38008116的博客
03-25 4225
二，模型加载 在three官方文档中可以看到有多种加载器，这里我采用的是objLoader，obj模型是产品给的，关于3d建模不是很清楚就不说了。 关于模型，我这里用到了两个文件（其实是产品就给了两个，模型不同文件个数不一定，有的可能还会用到图片）。分别是obj和mtl文件，obj文件即3d模型，但是他只有形状，没有外观，如色彩啊等等，所以需要mtl材质文件。 （1）加载模型，需要使用加载器。这里...
vue-stroll-一个很棒CSS3列表滚动效果组件，用于Vue.js2.x。-Vue.js开发
05-27
请参阅演示安装npm i vue-stroll -S CDN使用此URL进行开发vue-stroll Vue.js + Stroll.js。 Vue2.x的超棒CSS列表滚动效果。 请参阅演示安装npm i vue-stroll -S CDN使用此URL进行开发...
vue-universal-cookies Vue.js / Nuxt.js的同构cookie插件支持浏览器，Express，http（节点）。-Vue.js开发
05-27
vue-universal-cookies / nuxt-universal-cookies ...在Vue.js中安装npm install --save vue-universal-cookies //在TypeScript中导入VueUniversalCookies，{BrowserHandler，ExpressHandler}从'vue-universal-cookies'
vue2-animate-Animate.css的Vue.js 2.0端口。 与Vue的内置转换一起使用。-Vue.js开发
05-27
Vue.js的vue2-animate 2跨浏览器CSS3动画库Animate.css的Vue.js端口。 与Vue的内置转换一起使用。 | Vue.js的DEMO Credit @h vue2-animate 2跨浏览器CSS3动画库Animate.css的Vue.js端口。 与Vue的内置转换一起使用。...
vue-cli3 + vant + postcss-px2rem实现移动端页面.docx
09-06
vue-cli3 + vant + postcss-px2rem实现移动端页面
【vue】笔记本默认设置125%或者150%缩放，导致布局错乱的解决方法
Write less，do more
06-20 8347
【vue】笔记本默认设置125%或者150%缩放，导致布局错乱的解决方法
vue2 el-popover 页面缩放后位置偏移,或被表格遮挡
qq_44036358的博客
09-05 1418
加这个属性 :append-to-body="false"加了后会被表格遮挡,写下面代码。
vue+three.js实现模型发光、视角改变、相机移动、管道流动动画
qq_41026858的博客
12-27 4615
canvas1 canvas2 canvas3 import { EffectComposer } from ‘three/examples/jsm/postprocessing/EffectComposer.js’ import { RenderPass } from ‘three/examples/jsm/postprocessing/RenderPass.js’ import { OutlinePass } from ...
使用 three.js 中的 CSS3DRenderer 实现 3d 卡片的效果
weixin_34007020的博客
04-16 6954
前言 最近要做一个 3D 卡片的效果，设计图如下： 第一次尝试 第一次尝试选择了我比较熟悉的 PixiJS，关于我如何用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片，可以 戳这里查看。 第二次尝试 有了第一次失败的经历，果断老实选择使用 three.js 来实现 3d 效果。 但为什么选择使用 CSS3DRenderer 实现，可能是相中了 CSS3DRenderer 与 ...
To install them, you can run: npm install --save videojs-flash vue-video-player/node_modules/video.js/dist/video-js.css vue-video-player/src/custom-theme.css
06-08
这段提示是在安装 Vue Video Player 时出现的，意思是需要安装 videojs-flash、video.js 的 css 文件和自定义主题的 css 文件。 你可以通过以下命令安装它们： ```bash npm install --save videojs-flash vue-video-player/node_modules/video.js/dist/video-js.css vue-video-player/src/custom-theme.css ``` 其中，`videojs-flash` 是一个 Flash 播放器插件，用于兼容旧浏览器，`video.js` 的 css 文件是 video.js 播放器的样式文件，`custom-theme.css` 是 Vue Video Player 的自定义主题样式文件。 安装完这些依赖后，就可以按照 Vue Video Player 的使用文档来配置播放器了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值