当前位置: 首页 > 编程日记 > 正文

threejs在透视相机模式下,绘制像素大小固定的元素

要求:在透视相机模式下绘制一个图标,图标大小始终为32*32px。图标如下:

实现思路:

使用THREE.Sprite。因为 SpriteMaterial 支持配置 sizeAttenuation 使Sprite大小不随相机的深度而衰减。所以我们只要保证sprite的初始的大小合适,在以后的相机深度变化的时候就不会改变大小了。

开始操作

第一次的操作:

drawAddSprite(type: InterActiveType = InterActiveType.Default) {
    // 这个sprite我是自己用canvas画出来的,比较简单,就不贴了
    const texture = generateAddIconCanvasTexture(type);
    const material = new THREE.SpriteMaterial({ map: texture, sizeAttenuation: false });
    material.map.colorSpace = 'srgb';
    const sprite = new THREE.Sprite(material);
    scene.add(sprite)
}

我们看一下效果

我设置sizeAttenuation: false之前,我以为这个图标会占满屏(高度上满屏),毕竟这个图标跟相机没关系了。但是并没有。后来意识到sizeAttenuation: false 只是设置了相机的深度跟Sprite没有关系,但是透视相机的fov还是会影响到sprite的大小的。我们去验证一下,当我不断修改相机的fov时,图标随着fov的增大而减小。

思路:

1. 第一步,我们找到一个fov值,在这个值下,我们看到的图标是占满屏幕的

2. 在第一步的fov值下,我们要求图标大小是32*32的,那只需要设置Sprite的scale为 32 / canvas.clientHeight

我们来实现一下上面的思路:

1. 我们来找这个fov

这个d就是相机的深度,既然设置了 sizeAttenuation: false,sprite不随相机的深度变化而变化,那这个d就要有一个默认值。我盲猜这个默认值是1。那这个fov的值计算如下

Math.atan(0.5) * 180 / Math.PI * 2

这个值经过计算是53.13010235415598

现在我们设置相机fov为这个值去看一下效果

果然是满屏的。所以这个d确实是1.

找到了这个fov,我们设计相机的fov为这个值,现在我们去设置sprite的scale去改变Sprite的大小

drawAddSprite(type: InterActiveType = InterActiveType.Default) {
    const texture = generateAddIconCanvasTexture(type);
    const material = new THREE.SpriteMaterial({ map: texture, sizeAttenuation: false });
    material.map.colorSpace = 'srgb';
    const sprite = new THREE.Sprite(material);
    const scale = 32 / canvas.clientHeight;
    sprite.scale.set(scale, scale, 1);
    scene.add(sprite)
}

看一下效果,已经实现了。

但是呢,我们如果我们的fov不是固定的怎么办呢,只需要加上如下配置就可以动态的根据fov去获得这个scale了。

drawAddSprite(type: InterActiveType = InterActiveType.Default) {
    const texture = generateAddIconCanvasTexture(type);
    const material = new THREE.SpriteMaterial({ map: texture, sizeAttenuation: false });
    material.map.colorSpace = 'srgb';
    const sprite = new THREE.Sprite(material);
    const fullFov = ((Math.atan(0.5) * 180) / Math.PI) * 2;
    const { fov } = camera;
    let scale = 32 / dom.clientHeight;
    scale *= Math.tan((fov / 2 / 180) * Math.PI) / Math.tan((fullFov / 2 / 180) * Math.PI);
    sprite.scale.set(scale, scale, 1);
    scene.add(sprite)
}

完成。

相关文章:

SSD 颗粒还要涨价50%,入手前小心速度陷阱

这样说来,我们常看到的速度其实都是 SLC Cache 的速度,而要知道真正掉没掉速还得看缓外 TLC 直写速度。了,剩余空间全拿来模拟 SLC ,有着非常大的SLC Cache 空间,而其速度在使用了一定的空间后也会开始降低。写完后 SLC Cache 的速度就会变为 TLC 直写的速度,本质上来说 TLC 直写速度才是。其实是会影响缓内及缓外速度的,在0-1/3、1/3-2/3、2/3-1 之间会有明显的速度差异。的方案,很容易理解,即 SLC Cache 的大小是固定的,一般为10到几十G 不等。

Java:HeapMemory和DirectMemory配置与使用介绍

HeapMemory和DirectMemory配置与使用介绍

Leetcode算法系列| 11. 盛最多水的容器

给定一个长度为 n 的整数数组 height。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i])。找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。返回容器可以储存的最大水量。说明:你不能倾斜容器。

了解JavaScript中的基本类型值和引用类型值

/创建空对象并将其引用赋给变量avar b={};//创建空对象并将其引用赋给变量bvar c=[];//创建空数组并将其引用赋给变量c以上示例中,变量a和变量b都是指向了一个空对象,如果new Object()不传参数的话,那么用new Object()和{}来创建对象的效果是相同的。但是如果传入不同的参数,会有不同的效果。传入String 返回String,类似new String()传入Number 返回Number,类似new Number()

一文搞懂SiLM824x系列SiLM8243BBCL-DG 双通道死区可编程隔离驱动 主要特性与应用 让技术变得更有价值

SiLM824x系列SiLM8243BBCL-DG是一款具有不同配置的隔离双通道门极驱动器。SiLM8243BBCL-DG配置为高、低边驱动,SiLM8243BBCL-DG可提供4A的输出源电流和6A的灌电流能力,并且其驱动输出电压可以支持到33V。支持死区可编程,通过调整DT脚外部的电阻大小,调整死区时间。DIS脚可用于使能或关闭两路驱动输出。SiLM8243BBCL-DG提供不同的UVLO阈值选项,使其能够驱动各类功率器件。特别是低UVLO阈值的选项使其能够用于驱动GaN功率器件。

网页爬虫对于网络安全有哪些影响?

在当今信息爆炸的时代,网络已经成为人们获取信息、交流思想和开展业务的重要平台。然而,随着网络的普及和技术的不断发展,网络安全问题也日益凸显,其中网页爬虫对网络安全的影响不容忽视。本文将就网页爬虫对网络安全的影响进行深入分析,并提出相应的应对措施。网页爬虫,也称为网络爬虫或网络机器人,是一种自动化的程序,能够在互联网上抓取、收集和存储网页信息。总之,网页爬虫对网络安全的影响不容忽视,需要各方共同努力,采取有效的措施和策略,共同维护网络空间的安全和稳定。

vue3解决切换tab页每次切换加载数据导致数据缓慢问题

使用标识符来进行辨认 有两个tab页 搞个动态加载 在开头的vedioload还没开始加载的时候判断是否加载过 入股已经加载过 则返回 不要重新加载。由标签页的离线和在线数据 都分开管理 使用两个列表:即一个数组两个对象进行存储 数组的下标有tab0 tab1 动态决定 代替原来的直接覆盖数据。loadvideos会根据loadedTabs的状态决定是否需要加载数据。

TCP中的三次握手和四次挥手

我们知道TCP是运输层的面向连接的可靠的传输协议。**面向连接的**,指的就是在两个进程发送数据之前,必须先相互“握手”,确保两进程可以进行连接。并且这个传输是点对点的,即一个TCP连接中只有一个发送方和接收方;**可靠的**,指的是在任何网络情况下,在TCP传输中数据都将完整的发送到接收方。

一文搞懂深度信念网络!DBN概念介绍与Pytorch实战

深度信念网络(Deep Belief Networks, DBNs)是一种深度学习模型,代表了一种重要的技术创新,具有几个关键特点和突出能力。首先,DBNs是由多层受限玻尔兹曼机(Restricted Boltzmann Machines, RBMs)堆叠而成的生成模型。这种多层结构使得DBNs能够捕获数据中的高层次抽象特征,对于复杂的数据结构具有强大的表征能力。其次,DBNs采用无监督预训练的方式逐层训练模型。

Java---- 静态内部类与非静态内部类的区别

1.是否能拥有静态成员静态内部类可以有静态成员(方法,属性),而非静态内部类则不能有静态成员(方法,属性)。2.访问外部类的成员静态内部类只能够访问外部类的静态成员,而非静态内部类则可以访问外部类的所有成员(方法,属性)。3.静态内部类和非静态内部类在创建时有区别//假设类A有静态内部类B和非静态内部类C,创建B和C的区别为:1234。

在微信小程序中如何改变默认打开的页面

如果我们想要改变默认打开的页面,只需要将需要打开的页面路径放在 "pages" 字段的第一个位置即可。但是,对于博主来说,我们可能需要根据自己的需求改变默认打开的页面,以满足用户的期望和提供更好的用户体验。通过调用这个方法,在需要改变默认打开页面的时候,我们可以在 app.js 文件的 onLaunch 生命周期函数中执行跳转操作,将我们想要打开的页面路径作为参数传入。在这个启动页面中,我们可以根据用户的登录状态、上一次的使用记录等条件来判断应该跳转到哪个页面,从而实现改变默认打开的页面。

Java 19的未来:新特性、性能优化和更多

Java 19的未来:新特性、性能优化和更多

C#使用 OpenHardwareMonitor获取CPU或显卡温度、使用率、时钟频率相关方式

代码的功能可以将主板的名称显示出来,还有将第一个CPU的情况显示,可以根据实际情况进行修改。C# 去获取电脑相关的基础信息,还是需要借助 外部的库,我这边尝试了自己去实现它。OpenHardwareMonitor获取CPU的温度和频率需要管理员权限。网上有一些信息,但不太完整,都比较零碎,这边尽量将代码完整的去展示出来。引用–>添加引用—>浏览(选择文件)–>确定。代码中注释掉的部分是循环显示的一个循环逻辑。在没有开权限的时候就是无法使用。

是否需要跟上鸿蒙(OpenHarmony)开发岗位热潮?

自打华为2019年发布鸿蒙操作系统以来,网上各种声音百家争鸣。尤其是2023年发布会公布的鸿蒙4.0宣称不再支持Android,更激烈的讨论随之而来。本文没有宏大的叙事,只有基于现实的考量。

基于SpringBoot的校园二手闲置交易平台

基于SpringBoot的校园二手闲置交易平台的设计与实现~

分布式系统架构设计之分布式数据存储的备份恢复和监控故障排查

架构师通过设计和实施数据备份和恢复策略,可以最大程度地保障分布式系统在面对数据损失、硬件故障、灾难性事件等情况下的稳定性和可用性。在分布式数据存储中,数据备份和恢复是保障数据存储系统可靠性和容灾性的重要组成部分。通过合理的监控和故障排查策略,可以确保分布式数据存储系统在运行过程中保持高可用性、高性能,并且能够及时应对潜在的故障情况。在分布式系统中,对数据存储进行有效的监控和出现问题后故障排查策略是确保系统稳定性和性能可靠性的关键。

SpringBoot 中获取 Request 的四种方法

Controller中获取request对象后,如果要在其他方法中(如service方法、工具类方法等)使用request对象,需要在调用这些方法时将request对象作为参数传入。如果其他方法(如工具类中static方法)需要使用request对象,则需要在调用这些方法时将request参数传递进去。下面介绍的方法4,则可以直接在诸如工具类中的static方法中使用request对象(当然在各种Bean中也可以使用)。该方法实现的原理是,在Controller方法开始处理请求时,对象是方法参数,相当于。

Redis 除了用作缓存还能干吗?

Redis 是一种内存键值数据库。它支持多种数据结构,如 String, Hash, List, Set 和 SortedSet。

OpenHarmony之HDF驱动框架

HDF最核心几大块:配置管理,驱动管理,对外服务,消息机制对外接口侧重于服务,消息,而不是设备节点,这个是很大的一个转变以上内容主要概括了《OpenHarmony之HDF驱动框架》基础知识,为了让大家更快的了解《OpenHarmony4.0&Next》,我特意邀请几位行业大佬,联合整理了一份思维导图提供大家参考学习,大家可以根据自己的情况借鉴:《做鸿蒙应用开发到底学习些啥?除了上面整理的思维导图以外,这里还特别整理的一份《鸿蒙 (Harmony OS)开发学习手册》给大家进行参考学习:一、入门必看。

Windows搭建Emby媒体库服务器,无公网IP远程访问本地影音文件

在现代五花八门的网络应用场景中,观看视频绝对是主力应用场景之一,加上移动网络技术的发展,随时随地看视频已经成为基本需求。不过,随着资本向视频应用的集中,想要看视频就必须先充会员,这让笔者很是郁闷,于是产生了自建影音云盘的想法,期间也尝试了多种影音服务器。今天,笔者就为大家介绍,如何在Windows系统中,使用Cpolar内网穿透+Emby,搭建自己的私人影音平台。到这里,我们就成功的使用cpolar+Emby搭建了专属于我们自己的私人影音库,让我们能随时随地访问到本地电脑上的影音资源。

windows系统lib文件和dll文件的区别

(这种方式更灵活,写的程序体积小,但是需要.exe和dll同时发布)(这种方式不是很灵活,因为lib被编译到.exe中,写出的程序体积大,但是只需要发布exe即可,不需要dll文件)

CopyTranslator11安装包下载及安装教程

2.打开解压得到的文件夹,鼠标右击【copytranslator-setup-11.0.0.exe】,选择以管理员身份运行。1.鼠标右击下载的压缩包选择【解压到copytranslator 11.0】文件夹。4.勾选【为使用这台电脑的任何人安装】,点击【下一步】5.选择安装位置,点击【安装】 建议与我的路径保持一致。6.软件安装中,很快完成。

IP地址的四大类型:动态IP、固定IP、实体IP、虚拟IP的区别与应用

这种IP地址的分配是临时性的,用户每次连接都可能获得不同的IP。了解动态IP、固定IP、实体IP和虚拟IP的区别以及各自的应用场景,有助于网络管理员和用户在不同情境下做出明智的IP地址选择,确保网络通信的稳定性和高效性。每种IP类型都有其独特的优势,根据实际需求进行选择,是网络设计和管理中的重要考虑因素。动态IP、固定IP、实体IP和虚拟IP是四种不同类型的IP地址,它们各自具有独特的特点和应用场景。实体IP:是每个设备在物理网络上的唯一标识,确保网络通信的准确性。

Windows安装MySQL及网络配置

向日葵软件是一种远程控制软件,可以让用户在不同设备之间进行远程桌面访问和文件传输。用户可以通过向日葵软件,在任何具有互联网连接的设备上远程控制其他设备,包括计算机、智能手机和平板电脑。用户只需安装向日葵软件,并使用登录凭据连接到目标设备,就可以实时控制目标设备上的屏幕、键盘和鼠标。向日葵软件还提供了一些辅助功能,如文件传输、远程打印和远程会议等。这使得向日葵软件成为一个方便实用的远程协助工具,适用于个人用户、技术支持人员和企业用户等各种场景。

人工智能在现代科技中的应用和未来发展趋势

未来,深度学习将进一步发展,能够应用于更多的领域,如自动驾驶、智能制造和医疗辅助等。图像识别和计算机视觉:人工智能在图像识别和计算机视觉领域取得了巨大突破,能够自动识别和分类图像中的物体和场景。未来,随着人工智能技术的发展,自动化和机器人技术将实现更高的智能化程度,能够完成更加复杂的任务。语音识别和自然语言处理:人工智能已经实现了高度准确的语音识别技术,使得我们可以通过语音与智能助理交互,如苹果的Siri和亚马逊的Alexa。未来,语音识别技术将变得更加智能和自然,能够理解和回答更加复杂的问题。

基于Ubuntu环境Git服务器搭建及使用

将客户端公钥id_rsa.pub内容复制到服务端.ssh/下新建文件authorized_keys里,这样我们在拉取推送代码时,就不需要输入密码了。在服务器终端输入如下命令,输入两次密码后(比如密码也是:git),一路回车就创建好了。客户端:windows10_x64、Ubuntu20.04。无论是服务端还是客户端都需要先安装git。服务器:Ubuntu18.04。

Web数据库基本知识,SQL基本语法

SQL(Structured Query Language)是一种用于管理和操作关系型数据库管理系统(RDBMS)的特定领域语言。它是一种标准化的语言,用于定义和操作关系型数据库中的数据。SQL允许用户执行诸如查询数据、插入新数据、更新现有数据和删除数据等操作。分为四种DDL:数据库定义语言(define)DML:数据库操作管理语言(manage)DQL:数据库查询语言(query)DCL:数据库控制语言(control)

适用于 Windows 的 10 款顶级 PDF 阅读器评测

您是否正在寻找适用于 Windows 台式机或笔记本电脑的可靠且高效的最佳 PDF 阅读器?然后您就打开了正确的文章。在本文中,我提供了有关互联网上一些免费 PDF 阅读器软件的详细信息。我相信读完这篇文章后,您心中将不再有关于免费 PDF 阅读器软件的疑问。

一篇文章带你了解Harbor镜像是什么?

Harbor 是一个开源的企业级容器镜像仓库,它提供了安全、可靠且高效的镜像管理解决方案。它简化了镜像管理的复杂性,提高了开发人员的效率,并增强了镜像的安全性。此外,Harbor 还支持镜像的标签管理、版本控制和漏洞扫描,帮助用户确保镜像的安全性和可靠性。容器技术的快速发展推动了应用的现代化进程。开发人员可以将他们的镜像推送到 Harbor,然后其他团队成员可以从 Harbor 拉取这些镜像并在他们的环境中进行测试和部署。此外,Harbor 还提供了镜像签名和扫描功能,以确保镜像的完整性和安全性。

Centos如何修改ssh端口

SSH(Secure Shell)是一种安全的远程登录协议,它允许您通过网络远程连接到Linux系统并进行管理操作。默认情况下,SSH使用22端口进行通信。然而,为了增强系统的安全性,有时候我们需要更改SSH端口,以减少潜在的攻击。