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

最新推荐文章于 2023-07-11 14:54:35 发布
最新推荐文章于 2023-07-11 14:54:35 发布
阅读量5.7k 收藏 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.TextSprite:最佳地将文本显示为精灵
05-09
三.TextSprite class THREE.TextSprite extends THREE.Sprite 最佳地将文本显示为精灵。 演示 依存关系 设置 npm npm i @seregpie/three.text-sprite import TextSprite from '@seregpie/three.text-sprite' ; 浏览器 < script src =" https://unpkg.com/three " > </ script > < script src =" https://unpkg.com/@seregpie/three.text-texture " > </ script > < script src =" https://unpkg.com/@seregpie/three.text-sprite " > </ script > 该类可作
threeJs进阶 让模型沿着指定轨迹移动与转向
c_qianxia5040的博客
05-10 4150
效果图：涉及相关知识点：欧拉对象和四元数主要用来表达对象的旋转信息。关键词：欧拉Euler、四元数Quaternion、矩阵Matrix4。
98 Three.js 通过设置纹理属性来修改纹理贴图的位置和大小
热门推荐
现在学习也不晚
05-09 1万+
案例查看地址： 简介 前几节我们也了解了纹理一些用法，在这一节，我们进行自定义UV映射。并且还可以查看到wrapS和wrapT两个配置项不同的区别。 实现原理 要实现通过Three.js改变纹理的UV映射，我们需要用到两个属性：matrixAutoUpdate和matrix。通过设置这两个属性，就可以实现自定义UV映射。 - 首先，我们需要将matrixAutoUpdate属性设置为...
three.js实现鼠标点击控制物体移动（带动画效果，位置精确）
最新发布
weixin_43664855的博客
07-11 1876
实现鼠标点击控制物体移动并解决three.js定位不准确问题。
WebGL/ThreeJS Sprite、SpriteMaterial通过精灵模型和Canvas画布Demo
12-01
WebGL/ThreeJS Sprite、SpriteMaterial通过精灵模型和Canvas画布Demo
ThreeJS视频教程
09-24
对整threeJS体系进行全面剖析。整理出全面的教学大纲，涵盖内容面非常广。此教学版本为threeJS107版本。关于版本不建议大家使用低于90的版本学习。以下是课程目录1-ThreeJS概览（基本图形简介，什么是点线面如何绘制点线面，什么是材质，什么是几何体，什么是相机，什么是渲染器，什么是场景）2-相机和渲染器（详解相机类型，渲染器如何使用，针对不同场景怎么用，怎么调效果，怎么渲染，怎么输出画布，如何解决透明问题等等）3-创建平面几何（常见的几何体如何使用，如何使用简单的几何体绘制出自定义自己想要的几何体，关于几何体的性能剖析，如何解决性能，几何体的渲染原理）4-高级图形算法常见库（求直线的斜率  计算线段与圆的交点 计算线段的长度 判断折线是否在多边形内 等等）5-sprite精灵(怎么让一个图标永远朝向屏幕，精灵的属性，精灵材质原理等，广告提示框必用)6-骨骼游戏动画（什么是模型动画，常见游戏案例，如何让人头进行各种攻击动作）7-3d模型加载（常见模型格式，如何渲染不同格式，不同格式的特点，什么格式性能优越，模型渲染异常，贴图不显示等问题详解）8-高阶动态纹理（你所不知道的纹理用法，我说你不知道，你肯定不知道）9-漫游轨迹以及其动画路径（怎么绘制贝塞尔曲线，如何使用曲线上的路径，跟随路径移动的原理，相机如何运动，物体如何运动）10-着色器（什么是着色器。初识着色器基础，着色器材质怎么用，怎么使用着色器库）11-常见渲染以及透明度问题12-对象拾取以及拖拽（3d世界里面如何拖拽物体，拖拽的原理，mousemove mouseon等的事件效果）13-世界坐标以及组的问题（什么是相对坐标，什么是世界坐标，什么是当前坐标，怎么转化父子坐标系，组的优化，为什么用组，组的优势）14-指定对象旋转中心（什么是物体的几何体中心，如何改变中心，如何绕轴转动）15-层级对象渲染（多个场景一键切换，切换的优势，针对大项目的用法）16-拓展了解系列（不定期不断更新案例，各种酷炫效果bloom,halo等，以及各种3d图表，粒子案例等,不断构建你的3d实践能力）
Threejs入门之十三：精灵模型Sprite和精灵材质SpriteMaterial
九仞山的专栏
04-05 3945
Threejs中精灵和精灵材质的详细介绍
threeJS纹理控制偏移+Sprite标签运用
谷子的博客
04-10 4103
需要电子档书籍或者源码可以Q群：828202939希望可以和大家一起学习、一起进步！！ 如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，博主会及时修改！！！！！ 本章节主要涉及的知识点是： 1、canvas绘制（绘制线、曲线） 2、threeJS中处理2个挨得极近的物体 3、纹理的控制（纹理的偏移控制） 4、精灵材质+canvas作为纹理的运用 其他的...
【ThreeJS基础教程-点线精灵篇】4.1 Sprite精灵
qq_42760477的博客
06-13 839
【threejs基础教程-点线精灵篇】4.1 Sprite精灵
Threejs基础代码段（一）Sprite精灵标签
ly510812的博客
08-01 2151
threeejs常用基础功能点
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(); ...
threejs 消防报警 报警精灵 动画
07-01
threejs 消防报警 报警精灵 动画 闪烁报警
THREEJS_Procedural-clouds:了解如何使用React-Three-Fiber在Threejs的Sprite上模拟云
04-29
程序云扩展Three.js的Sprite 学习如何使用React-Three-Fiber在Threejs的Sprite上模拟云，作者：Robert Borghesi 指示 npm install安装依赖项 npm run dev启动服务器 npm run build以创建构建 如果您想了解为什么我...
three.js教程
11-23
three.js的官方入门教程，全套教程及很多实例，对学习three.js有很大帮助
Unity 利用UI Mask 对Sprite精灵遮罩处理
12-01
Unity5的unitypackage 利用UI Mask 实现对Sprite精灵遮罩处理。不是插件
Unity UI Soft Mask - 实现Sprite精灵遮罩
03-20
Unitypackage。利用UI Mask 实现对Sprite精灵遮罩处理。不是插件。
Node.js使用gm拼装sprite图片
10-19
主要介绍了Node.js使用gm拼装sprite图片的相关资料,需要的朋友可以参考下
three-plain-animator：Three-Plain-Animator是一个为Threejs开发人员提供支持2D动画的软件包
02-03
欢迎来到三平原动画师Three-Plain-Animator是为threejs开发人员提供的软件包，用于支持2D动画。安装该软件包可通过npm获得：npm i three-plain-animator用法有两个主要的类可以使用： PlainAnimator ...
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、付费专栏及课程。

余额充值