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

已于 2024-09-12 16:55:23 修改
阅读量2.6k 收藏 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时，遇到浏览器缩放或尺寸变化导致的位置偏移问题。本文提供详细解决方法，包括避免使用flex布局或百分比布局，使用JavaScript设定精确盒子宽度，以防止CSS3DObject定位精度丢失。附带示例代码。
摘要由CSDN通过智能技术生成

效果图

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

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

在这里插入图片描述

解决方法

这个问题，其实<

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
使用 three.js 中的 CSS3DRenderer 实现 3d 卡片的效果
weixin_34007020的博客
04-16 7046
前言 最近要做一个 3D 卡片的效果，设计图如下： 第一次尝试 第一次尝试选择了我比较熟悉的 PixiJS，关于我如何用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片，可以 戳这里查看。 第二次尝试 有了第一次失败的经历，果断老实选择使用 three.js 来实现 3d 效果。 但为什么选择使用 CSS3DRenderer 实现，可能是相中了 CSS3DRenderer 与 ...
three.js CSS3DObject在非全屏场景下浏览器缩放尺寸导致位置偏移问题（vue）
HQBCK的博客
04-10 700
经过多次测试，在flex布局或者百分比布局下，threejs场景盒子左侧的盒子宽度会出现小数的情况，猜测three.js在进行CSS3DObject定位操作的时候会因为小数问题导致精度丢失。1、不使用flex布局或者百分比布局，使用精确的宽度进行布局。2、使用js设置精准的盒子宽度。
zoom缩放问题(关于ElementPlus、Echarts、Vue3draggable等组件偏移问题)
最新发布
m0_56164131的博客
07-01 701
做了一个项目下来，由于整体界面偏大，采取了缩放90%，导致很多组件出现偏移问题，以下我会把我遇到的各种组件偏移问题依次进行描述解答
使用ThreeJs搭建BIM模型浏览器-CSS3D图层
疯狂的蒲公英
04-23 3057
CSS3D这种技术有些人叫它图层叠加，其实原理就是图层叠加。CSS3D的本质是在Canvas之上罩了一层透明的div，然后把原本的DOM元素通过CSS的变换实现了立体感。 用户期望的结果像这样： 如何实现的呢，首先我们得先学习一下threejs提供的示例Demo http://www.qmodel.cn/threejs/three/examples/?q=css3d#css3d_periodictable 首先它不是几何信息，只是一些div通过css控制的样式，例如： .element.
【vue 使用 vue-baidu-map 地图 el-scrollbar 中嵌套百度地图出现缩放偏移量】
qq_46648526的博客
09-22 595
vue el-scrollbar +百度地图。
Three.js前端3D开发：使用 CSS3DRenderer 渲染全景图
weixin_51678651的博客
08-07 1095
此实例主要通过使用 THREE.CSS3DRenderer 和 THREE.CSS3DObject,实现以鼠标拖曳方式在天空盒(即模拟人站在真实的空间中)中查看全景图。
three.js CSS3DRenderer、CSS3DObject渲染HTML标签
yinge0508的博客
02-01 1965
【代码】three.js CSS3DRenderer渲染HTML标签。
Three.js-CSS渲染器（CSS2DRenderer）
damadashen的博客
07-29 7784
Three中css渲染器的介绍及使用，使用css2d渲染器实现地月环绕及添加标签效果。
关于vue使用baidu-map根据经纬度定位还是存在偏移的问题
weixin_46827289的博客
10-09 2359
关于vue使用baidu-map根据经纬度定位还是存在偏移的问题
three.js引入obj模型，将位置设置为（0,0,0），但场景显示不是（0,0,0）的位置
m0_54070657的博客
01-12 1036
我在网上下载了一个obj格式的模型，加载模型的时候，发现我的模型不在坐标原点，于是我就把模型位置设置为（0,0,0），但还是不行，我在控制台打印出模型信息，位置信息也为（0,0,0），但模型本身并不在原点。另外一种方法，就是将模型导入blender或其他建模软件，选中模型，鼠标右键，选择将模型的原点改为模型的自身，然后导出。（这个模型我在网上下载的，准备弄个2024粒子合成动画，模型缺失几块，请忽略)兜兜转转，于是我查看了模型的包围盒，查看包围盒的中点。
d3threejs使用D3和THREEjs实现的CSS3D变换
08-10
d3-threejs：使用D3和THREE.js实现的CSS 3D变换
Three.js 实现年会3D抽奖页面(含源码)
u012148903的博客
03-12 1375
先存下照片墙、球、散乱三种状态的坐标点，然后切换抽奖状态时，同时切换，通过tween切换照片的位置，这样就实现了动画。代码几年前写的，挺垃圾的，没考虑性能，也没有做啥优化。写之前的那段时间，刚好逛博客，看到别个大神写的threejs版《元素周期表》，这效果大体有点近似。高清的星空壁纸，太大了，如果是有点动效的gif，那体积更大。中奖时的音乐，一段布灵布灵的铃声。抽奖嘛，光效果是不够的，还得有点音乐才好。抽奖的照片，还得在照片球的中间，位置。这个时候的动画，主要是两个：照片切换、照片球的转动。
three.js 实现全景图360°
xiao_a_gang的博客
08-16 6781
&lt;!DOCTYPE html&gt; &lt;!-- saved from url=(0048)https://threejs.org/examples/css3d_panorama.html --&gt; &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
threejs CSS3DObject、CSS3DSprite实现文字以及他们的区别
九段刀客的博客
08-15 5920
threejs 使用CSS3DObject
ThreeJs CSS3DObject 点击失效问题
wv112406的博客
07-04 1781
想实现一个在选中物体，弹出菜单，结果发现，点击会失效。之前绑定在dom中click事件不会触发。Google了一下，找到解决方法。
ThreeJS入门篇11—移动3D 控帧
牟云飞的博客
01-22 949
渲染Render更像打印机，将我们前面“拍摄”的图像呈现在浏览器中，根据图像的拍摄方式不同，基于B/S的ThreeJS能够将不同的画面到PC/移动等设备，通过控制每秒帧的数量fbs保持流程的画面感，渲染器根据渲染的物体有不同的类型，多个类型可以组合使用： WebGLRenderer：按照webGL的规范进行渲染显示场景，这种渲染方式最常用 CSS3DRenderer：通过CSS3转换属性将分层的3D应用到DOM元素中，这种渲染方式不支持材质和几何体，只适合普通的DOM元素 CSS2DRender...
THREE.JS 使用CSS2DRenderer/CSS3DRenderer 给模型增加标签
qq_44426236的博客
09-05 4646
THREE.JS提供的方式是在标签DOM上另外套了一个DOM，通过对这个外面DOM进行操作从而影响我们的标签。从页面效果来看，两者最大的区别就是：CSS2Drender不会随着模型的缩放而改变，而CSS3Drender相反。
ThreeJs使用教程
PIOnly的博客
03-06 990
threejs使用教程
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-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值