web3d-three.js场景设计器-sprite广告牌

  • three.js使用Sprite精灵实现文字或者图片广告牌
  • 1.将文字绘制到Canvas,调整对应宽高。
  • 2.作为Cavans材质绑定到Sprite
  • 3.加载到场景调整适当的scale

function createLabel({ text, fontSize, textColor, color, imageUrl }) {

    return new Promise((resolve, reject) => {

        let canvas = document.createElement('canvas');

        let context = canvas.getContext('2d');

        context.font = `${fontSize}px Arial`;

        let textWidth = context.measureText(text).width;

        canvas.width = Math.ceil(textWidth);

        canvas.height = Math.ceil(fontSize * 1.5);

        context.font = `${fontSize}px Arial`;

       

        if (color) {

            context.fillStyle = color;

            context.fillRect(0, 0, canvas.width, canvas.height);

        }

       

        let drawText = (imgHeight = 0) => {

            context.textBaseline = 'middle';

            context.textAlign = 'center';

            context.fillStyle = textColor;

            context.fillText(text, canvas.width / 2, (canvas.height + imgHeight) / 2);

            // context.fillText(text, canvas.width / 2, canvas.height - fontSize / 2);

         

            resolve(canvas);

        };

        if (imageUrl && imageUrl !== '') {

            let image = new Image();

            image.crossOrigin = "anonymous";

            image.onload = function() {

                let scale = textWidth / image.width;

                let imageHeight = image.height * scale;

                canvas.height += imageHeight;

                context.drawImage(image, 0, 0, image.width * scale, imageHeight);

                context.font = `${fontSize}px Arial`;

                drawText(imageHeight);

               

               

            };

            image.onerror = reject;

            image.src = imageUrl;

        } else {

            drawText();

        }

    });

}

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

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

相关文章

Hive 数据同步

一、需求 同步集团的数据到断直连环境。 二、思路 三、同步数据(方案) 1、环境:断直连模拟环境 2、操作机器:ETL 机器 XX.14.36.216 3、工作路径:cd /usr/local/fqlhadoop/hadoop/bin 4、执行命令: 命令…

Javaweb之SpringBootWeb案例查询部门以及前后端联调的详细解析

2.1 查询部门 2.1.1 原型和需求 查询的部门的信息:部门ID、部门名称、修改时间 通过页面原型以及需求描述,我们可以看到,部门查询,是不需要考虑分页操作的。 2.1.2 接口文档 部门列表查询 基本信息 请求路径:/depts …

Poi实现根据word模板导出-图表篇

往期系列传送门: Poi实现根据word模板导出-文本段落篇 (需要完整代码的直接看最后位置!!!) 前言: 补充Word中图表的知识: 每个图表在word中都有一个内置的Excel,用于…

网络通信过程的一些基础问题

客户端A在和服务器进行TCP/IP通信时,发送和接收数据使用的是同一个端口吗? 这个问题可以这样来思考:在客户端A与服务器B建立连接时,A需要指定一个端口a向服务器发送数据。当服务器接收到A的报文时,从报文头部解析出A的…

报错curl: (6) Could not resolve host: raw.githubusercontent...的解决办法

我起初想要在macOS系统安装pip包,首先在终端安装homebrew,敲了命令:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent...)" 之后触发的报错,报错内容:curl: (6) Could not resolve host: raw.…

Asp .Net Core 系列: 集成 CORS跨域配置

文章目录 什么是CORS?Asp .Net Core 中如何配置CORS?CorsPolicyBuilder类详解注册以及使用策略三种方式EnableCors 和 DisableCors 特性关于带证书与不带证书代码的实现跨源(cross-origin)不带请求证书(Credentials)跨源(cross-origin&…

【论文阅读】Self-supervised Learning: Generative or Contrastive

Abstract 研究了在计算机视觉、自然语言处理和图形学习中用于表示的新的自监督学习方法。全面回顾了现有的实证方法,并根据其目的将其归纳为三大类:生成性、对比性和生成性对比(对抗性)。进一步收集了关于自我监督学习的相关理论…

Mac 安装Nginx教程

Nginx官网 Nginx官网英文 1.在终端输入brew search nginx 命令检查nginx是否安装了 2. 安装命令:brew install nginx 3. 查看Nginx信息命令brew info nginx 4. 启动 nginx方式:在终端里输入 nginx 5.查看 nginx 是否启动成功 在浏览器中访问http://l…

经典算法-模拟退火算法求解旅行商问题TSP

经典算法-模拟退火算法求解旅行商问题TSP 旅行商问题(Traveling Salesman Problem, TSP)是组合优化中的经典问题。简单地说,一个旅行商需要访问N个城市,并返回到出发城市,问题是找到最短的可能路线,使得每…

PPT插件-布局参考-增加便携尺寸功能

PPT自带的尺寸为很久的尺寸,很多尺寸不常用,这里增加一些画册尺寸,用于PPT排版设计。 软件介绍 PPT大珩助手是一款全新设计的Office PPT插件,它是一款功能强大且实用的PPT辅助工具,支持Wps Word和Office Word&#x…

B059-权限管理系统01

目录 知识点介绍项目演示项目搭建动态菜单查询分析(权限表分析)权限系统表分析角色模块pageInfopageHelper实现前端动态分页高级查询新增与修改删除角色 分配权限-表分析角色授权数据-一级和二级权限查询 知识点介绍 项目演示 准备数据库 准备工程auth_new tips:…

Android Studio打包有哪些优势

大家好,现在移动应用程序的快速发展,开发者需要一个强大又可靠的开发环境来创建和打包高质量的 Android 应用程序。Android Studio 是一款由 Google 官方开发的 Android 应用程序开发环境,提供了许多的优势和便利,那究竟都有哪些优…

使用Linux防火墙管理HTTP流量

在Linux系统中,防火墙是用于控制网络流量的重要工具。通过防火墙,你可以根据需要限制、过滤或允许特定的网络流量,从而提高系统的安全性。在处理HTTP流量时,防火墙可以帮助你实施访问控制、流量监控和其他安全策略。 iptables i…

持续赋能波卡生态创新,OneBlock+ 社区 2023 年度回顾

OneBlock 开发者社区成立于 2018 年,历经五年的积累与沉淀,已经成长为行业内领先的 Substrate 开发者社区。我们以成熟的社区生态,通过 Substrate 技术与波卡生态的相关优质文章、项目方与开发者专访、线上线下技术热点对谈、多阶段开发者课程…

C语言—数据类型

变量和基本数据类型 变量类型的概念 变量是在程序中可以发生变化的量,变量是有类型的,变量的类型决定了变量存储空间的大小以及如何解释存储的位模式。 1字节(Byte)8位(bit) 定义格式 存储类型 数据…

java JDBC 连接数据库(增删查改)

必须先插入工具包 代码 public static void main(String[] args) {DataSource ds JdbcHelper.getDs();System.out.println(ds);JdbcTemplate jdbcTemplatenew JdbcTemplate(ds);System.out.println(jdbcTemplate);//新增String sql1"insert into biao values(null,?,?,…

【Web】forward 和 redirect 的区别

🍎个人博客:个人主页 🏆个人专栏:Web ⛳️ 功不唐捐,玉汝于成 目录 前言 正文 Forward(转发): Redirect(重定向): 区别总结: …

主题-----读微信公众号

1.SOA 面向服务的架构(Service-Oriented Architecture,SOA)还没有一个公认的定义。许多组织从不同的角度和不同的侧面对 SOA 进行了描述,较为典型的有以下三个: (1)W3C 的定义:SOA 是…

Python基础知识:整理11 模块的导入、自定义模块和安装第三方包

1 模块的导入 1.1 使用import 导入time模块,使用sleep功能(函数) import time print("start") time.sleep(3) print("end")1.2 使用from 导入time的sleep功能 from time import sleep print("start") slee…

SpringMVC ResponseEntity常见使用场景

ResponseEntity 作为 Spring MVC controller层 的 HTTP response,包含 status code, headers, body 这三部分。 正常场景 RestController Slf4j public class SearchController {AutowiredUserService userService;RequestMapping(value "/getAllStudents4&…