threejs 精灵Sprite旋转位置偏移问题

最新推荐文章于 2024-07-11 09:49:46 发布
最新推荐文章于 2024-07-11 09:49:46 发布
阅读量6.1k 收藏 3
点赞数 1
分类专栏： threejs 文章标签： javascript vue.js 前端 three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LJR_BLOG/article/details/121541408
版权

使用精灵贴图文本标签，这时候会遇到一个问题，你标签的位置会随着场景的旋转和平移，位置会视觉上看起来位置有偏移，那是因为Sprite的默认旋转中心是（0.5,0.5），官网是这样说的

为了更直观的表达这个位置，我画了一张图如下：

我的项目如下，要下面的那根线始终固定在这个位置，那么center的参数值应该设置为（0.5,0）

这样无论模型如何旋转，那个牵引线始终都会固定在这个位置，这个center值需要你自己改变。

 

 

 

LJR_BLOG
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 17
    评论
专栏目录
three.js 射线拾取精灵图Sprite控制场景
yinge0508的博客
01-05 742
效果：这里只是 鼠标点击时，改变了精灵图的材质颜色。
threejs中模型自定义路线移动
小码的博客
09-28 785
Threejs中寻路导航
Threejs之精灵模型Sprite
zoey的专栏
03-03 764
Three.js的精灵模型`Sprite`和Threejs的网格模型`Mesh`一样都是模型对象，父类都是`Object3D`,关于精灵模型对象`Sprite`的方法和属性除了可以查看文档Sprite，也可以查看父类`Object3D`。 `Sprite`与矩形平面`Mesh`的区别在于,当你旋转三维场景的时候，如果通过相机控件OrbitControls旋转测试，你可以发现`Sprite`矩形平面会始终平行于Canvas画布或者说屏幕，而矩形平面`Mesh`的姿态角度会跟着旋转，不一定平行于canvas画
threeJS 为模型增加精灵图
最新发布
qq_46258819的博客
07-11 355
之前使用css3DRender创建图片弹框，在旋转模型到背面时，弹框也背对模型，这与UI要求的效果有出入。考虑将css3DRender换成css2Drender,但是可能是模型的问题，将弹框加入到模型的子集，旋转模型时弹框发生比较明显的偏移，最终考虑使用css3Dspirits来实现功能。
threejs当物体旋转到一定角度后消失或者背面消失不见【已解决】
撑起自己半边天
03-19 664
场景：当你渲染一个几何体的时候发现背部不可见，旋转到移动角度又会莫名消失。.所以在转到有些面的背面后，面就不再能看到了。注： 仅为个人遇到情况以及解决方法。原因：在某些情况下，是因为。
three.js sprite alignment
planckztd的博客
01-08 644
新版本的three.js ,没有alignment 的库，先是报错不出来，后又导致我文本旋转错位 解决：点的错位主要是我的尺寸没调好， var spritey = makeTextSprite( "The select ", { fontsize: 50, borderColor: {r:255, g:0, b:0, a:1.0}, backgroundColor: {r:255, g:1
Three.js FBX模型 动画 位置问题
大英雄不该去雪山打滚
08-03 2271
前几天实现了把FBX模型加载到网页上，也做出了完美的机械动画，随着进一步学习，需要往场景中添加更多的物体，它们的相对位置关系是必须处理的，我就先拿这个已经导入的模型调整了一下位置，源代码是这样的， loader.load( 'models/gaizi255.fbx', function ( object ) { //路径 mixer = new THREE.AnimationMixer( object ); //创建动画播放器 var action = mixer.cl
threeJS纹理控制偏移+Sprite标签运用
谷子的博客
04-10 4209
需要电子档书籍或者源码可以Q群：828202939希望可以和大家一起学习、一起进步！！ 如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，博主会及时修改！！！！！ 本章节主要涉及的知识点是： 1、canvas绘制（绘制线、曲线） 2、threeJS中处理2个挨得极近的物体 3、纹理的控制（纹理的偏移控制） 4、精灵材质+canvas作为纹理的运用 其他的...
WebGL/ThreeJS Sprite、SpriteMaterial通过精灵模型和Canvas画布Demo
12-01
在本Demo中，我们将深入探讨WebGL和Three.js中的Sprite和SpriteMaterial，以及如何结合Canvas画布进行更复杂的图形操作。 首先，让我们了解Sprite。在Three.js中，Sprite是一种特殊的几何体，它只由一个二维平面...
three-spritetext:ThreeJS的基于Sprite的文本组件
04-27
import SpriteText from 'three-spritetext'; 或者 var SpriteText = require('three-spritetext'); 甚至 [removed][removed] 然后 var myText = new SpriteText('My text'); var myScene = new THREE.Scene(); ...
THREE.TextSprite:最佳地将文本显示为精灵
05-09
class THREE.TextSprite extends THREE.Sprite 最佳地将文本显示为精灵。 演示 依存关系 设置 npm npm i @seregpie/three.text-sprite import TextSprite from '@seregpie/three.text-sprite' ; 浏览器 < ...
threejs 消防报警 报警精灵 动画
07-01
在Three.js中，动画通常是通过更新物体的属性（如位置、旋转、缩放）或者更改材质的属性（如颜色）来实现的。在消防报警动画中，可以设置一个定时器，每隔一定时间改变精灵的某些属性，如改变其颜色或透明度，以达到...
WEB 3D技术 three.js 设置图像随窗口大小变化而变化
weixin_45966674的博客
12-22 565
其实 我们监听窗口变化 直接用js原生的方式就好了 window 对象的 resize事件。可能这样说有点笼统 那么 自适应应该大家更熟悉。就是 当我们窗口发生变化说 做一些界面调整比例。本文 我们来讲讲我们图层适应窗口变化的效果。这样是正常了 但是 我们将F12关掉。可能有人会说 用户用什么F12呀？我们拖拽 他就会跟着我们的屏幕走了。给F12的位置 全部变成了空白。例如 我们这样一个i项目界面。明显有一部分被挡住了。用户可能会 缩小屏幕。
threejs加载模型旋转某些角度，部分消失问题
tutouxiaoyaonie的博客
10-12 1714
threejs加载模型旋转某些角度，部分消失问题
Three.js 全景图（标注偏移、显示不全的问题记录）
vagabond_的博客
04-28 1794
最近在项目中利用three.js实现了vr全景的功能，过程中遇到了标注偏移、标注图标显示不全的问题，在此做个记录。
three.js实现3D模型任意方向旋转
qq_38229938的博客
07-07 500
因为业务需要，我们在公司官网使用Three.js实现了可鼠标拖动任意旋转的3D旋转模型，可是实现之后发现除了Z轴方向都可以任意旋转，但是Z轴方向最多只能旋转180度。找遍全网也没有找到相关的资料来解释错在了哪一步，最终还是在github仓库中找到使用案例才得以解决。
【GDScript】做一个常用的功能——节点转向到目标位置
qq_37280924的博客
12-26 718
Godot 3.2.4 beta4 主场景中，拖拽 文件系统 中的 icon.png 文件到场景中，在 icon 节点下边添加一个 Node2D 节点，并添加脚本（如下图所示）。 然后将下面代码粘贴到 Node2D 节点的脚本里。 在这里我做了一个节点旋转到鼠标位置的代码，你也可以稍作修改，改为旋转到其他节点位置等，在 process 方法里 #======================================================================== # D.
图形化开发（五）051-Three.js之Points 粒子——Sprite 精灵-一直正对着相机的特性
weixin_44867717的博客
09-11 757
图形化开发（五）051-Three.js之Points 粒子——Sprite 精灵-一直正对着相机的特性 Points 粒子 这一节，我们将学习到Sprite精灵和Points粒子两项东西，这两种对象共同点就是我们通过相机查看它们时，始终看到的是它们的正面，它们总朝向相机。通过它们的这种特性，我们可以实现广告牌的效果，或实现更多的比如雨雪、烟雾等更加绚丽的特效。 Sprite 精灵 精灵由于一直正对着相机的特性，一般使用在模型的提示信息当中。通过THREE.Sprite创建生成，由于THREE.Sprite
threejs精灵Sprite
丰空岛主(Vega Prime,Android,LabWindows,ThreeJS,Python,OpenCV）
12-14 3432
Sprite叫精灵，计算机图形学中，精灵指包含于场景中的二维图像或动画。主要用来做标签，因为精灵模型的正面一直平行于canvas画布。 1使用Sprite创建2D形状 Sprite叫精灵，计算机图形学中，精灵指包含于场景中的二维图像或动画。在threejs中，可以使用Sprite加载图像纹理，当然也包括用canvas创建的纹理，因此，canvas能创建什么图像，Sprite就能创建什么形状。下面的例子使用Sprite创建了一个圆： function createSpriteShape(){ ..
threejs 精灵贴图是不是可以随着相机旋转
06-08
是的，three.js中的精灵贴图可以随着相机旋转。通过设置精灵对象的`billboard`属性为`true`，精灵将始终面向相机，并且无论相机如何旋转，精灵将保持面向相机。例如： ``` var spriteMap = new THREE.TextureLoader().load( 'textures/sprite.png' ); var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } ); var sprite = new THREE.Sprite( spriteMaterial ); sprite.position.set( 0, 0, 10 ); sprite.scale.set( 1, 1, 1 ); sprite.material.color.set(0xffffff); sprite.material.opacity = 0.5; sprite.material.transparent = true; sprite.material.depthWrite = false; sprite.material.depthTest = false; sprite.material.blending = THREE.AdditiveBlending; sprite.material.alphaTest = 0.5; sprite.material.side = THREE.DoubleSide; sprite.billboard = true; scene.add( sprite ); ``` 在这个例子中，`sprite.billboard`的值被设置为`true`，这意味着精灵将始终面向相机。
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

LJR_BLOG

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

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

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

打赏作者

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

抵扣说明：

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

余额充值