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)
}

完成。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/596243.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud之Eureka组件工作原理详解

Eureka是一种服务注册与发现组件,最初由Netflix开发并开源出来。它主要用于构建分布式系统中的微服务架构,并提供了服务注册、服务发现、负载均衡等功能。在本文中,我们将详细解释Eureka的工作原理。 一、Eureka概述 Eureka是Netflix开源的一…

SAFe大规模敏捷企业级实训

课程简介 SAFe – Scaled Agile Framework是目前全球运用最广泛的大规模敏捷框架,也是成长最快、最被认可、最有价值的规模化敏捷框架,目前全球SAFe认证专业人士已达80万人,福布斯100强的70%都在实施SAFe。本课程是一个2天的 SAFe权威培训课…

老生常谈:Web 与低代码开发

Web技术和低代码平台是当前技术领域中的两个热门话题。它们在应用开发领域中扮演着重要的角色,不断被提及和讨论。本文将讨论为什么“Web与低代码”这个话题成为了“老生常谈”,探讨其背后的原因以及这两个概念的关系。 在当今技术飞速发展的时代&#x…

【UWB定位源码】工厂企业人员定位系统源码,实现安全区域管控、人员在岗监控、车辆实时轨迹监控

UWB高精度定位系统源码,企业工厂人员定位系统源码 概念: UWB (ULTRA WIDE BAND, UWB) 技术是一种无线载波通讯技术,它不采用正弦载波,而是利用纳秒级的非正弦波窄脉冲传输数据,因此其所占的频谱范围很宽。 UWB的主要特…

摩擦纳米发电机测试整套解决方案(发电机+采集卡+软件)-升级版/高频率运动版

本测试系统为纳米发电机测试,可结合KEITHLEY 6514或者6517进行纳米发电测试,电压、电流 、电阻、电荷随时间的变化,搭配DAQ数据采集卡,可高速采集数据的变化,如NI USB 6002 最高采样速度可达50K,6003最高采…

【管理篇 / 恢复】❀ 07. macOS下用命令刷新固件 ❀ FortiGate 防火墙

【简介】随着苹果电脑的普及,很多管理员都会通过苹果电脑对飞塔防火墙进行管理。当防火墙需要命令状态下刷新固件时,在macOS下用命令刷新固件,将会是一个小小的挑战。 首先是硬件的连接,USB配置线的USB一头,接入MAC的U…

OpenGL如何基于glfw库 进行 点线面 已解决

GLFW是现在较流行、使用广泛的OpenGL的界面库,而glut库已经比较老了。GLEW是和管理OpenGL函数指针有关的库,因为OpenGL只是一个标准/规范,具体的实现是由驱动开发商针对特定显卡实现的。由于OpenGL驱动版本众多,它大多数函数的位置…

内网DNS隐蔽隧道搭建之iodine工具

iodine iodine是基于C语言开发的,分为服务端和客户端。iodine支持转发模式和中继模式。其原理是:通过TAP虚拟网卡,在服务端建立一个局域网;在客户端,通过TAP建立一个虚拟网卡;两者通过DNS隧道连接&#xf…

uniapp中uview组件库丰富的Slider 滑动选择器的使用方法

目录 #平台差异说明 #基本使用 #设置最大和最小值 #设置步进值 #禁用状态 #自定义按钮的内容和样式 #自定义滑动选择器整体的样式 #此页面源代码地址 #API #Props #Slider Events 该组件一般用于表单中,手动选择一个区间范围的场景。 说明 该组件在H5&…

IntelliJ IDEA 如何配置git

在 IntelliJ IDEA 中配置 Git 的步骤如下: 打开 IntelliJ IDEA。找到 File–>Setting–>Version Control–>Git–>Path to Git executable。在 Git 的安装路径下找到 cmd 文件夹下的 git.exe,到此 Git 配置已完成。

服务器为什么大多用 Linux?

服务器为什么大多用 Linux? 在开始前我有一些资料,是我根据自己从业十年经验,熬夜搞了几个通宵,精心整理了一份「Linux的资料从专业入门到高级教程工具包」,点个关注,全部无偿共享给大家!&#…

如何制作可预约的上门维修服务小程序?

上门维修服务已经成为人们日常生活中不可或缺的一部分。为了满足这一需求,我们学习如何无经验自己制作上门维修服务小程序。 首先,打开乔拓云-门店系统的后台,可以看到有很多各行各业的模版。这些模版涵盖了各种行业,包括家电维修…

Spring Security 6.x 系列(14)—— 会话管理之源码分析

一、前言 在上篇 Spring Security 6.x 系列(13)—— 会话管理之会话概念及常用配置 Spring Security 6.x 系列(14)—— 会话管理之会话固定攻击防护及Session共享 中了清晰了协议和会话的概念、对 Spring Security 中的常用会话配置进行了说明,并了解会话固定攻击防护…

vuex基础用法 与 辅助函数使用

效果图 index.js文件 import Vue from "vue"; import Vuex from vuexVue.use(Vuex)export default new Vuex.Store({state: {shopsList: [{goodsName: "手机1", //商品名goodsAmount: 0, //购买的商品数量goodsPrice: 100, //单个商品价格totalPrice: 0,i…

Required request body is missing报错及解决

今天,我在尝试调用后端接口展示文章数据时遇到了错误,错误原因是请求体缺失, 但是我明明传了参数 然后我找了很久错误原因,发现在之前跟着写的一个差不多的功能时,请求方式是post 而我写的确是get 将get改为post后&…

PHP 基础编程 2

文章目录 时间函数dategetdatetime 使用数组实现登录注册和修改密码简单数组增加元素方法修改元素方法删除元素方法 具体实现方法数组序列化数组写入文件判断元素是否在关联数组中(登录功能实现)实现注册功能实现修改admin用户密码功能 时间函数 时区&am…

蓝牙简学(二)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一、服务和特性二、数据收发三、UUID 一、服务和特性 service、characteristic 下面的图是蓝牙协议的整体架构, 1.物理层:负责无线电波的收…

x-cmd pkg | procs - ps 命令的现代化替代品

目录 简介首次用户功能特点类似工具进一步阅读 简介 procs 是用 Rust 编写的 ps 替代品,用于显示有关任务进程的信息 首次用户 使用 x procs 即可自动下载并使用 在终端运行 eval "$(curl https://get.x-cmd.com)" 即可完成 x 命令安装, 详情参考 x-cmd…

python学完之后可以做什么,python学完可以做什么

大家好,小编来为大家解答以下问题,python学完可以做哪些工作,python学完之后可以做什么,今天让我们一起来看看吧! Python是一种全栈的开发语言,你如果能学好Python,前端,后端&#x…

Spring实现IoC:依赖注入/构造注入

● 控制反转,反转的是什么? ○ 将对象的创建权利交出去,交给第三方容器负责。 ○ 将对象和对象之间关系的维护权交出去,交给第三方容器负责。 ● 控制反转这种思想如何实现呢? ○ DI(Dependency Injection&…