学习threejs，使用Sprite精灵、SpriteMaterial精灵材质

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.Sprite
      • 1.1.1 ☘️代码示例
      • 1.1.2 ☘️构造函数
      • 1.1.3 ☘️属性
      • 1.1.4 ☘️方法
    • 1.2 ☘️THREE.Sprite
      • 1.2.1 ☘️代码示例
      • 1.2.2 ☘️构造函数
      • 1.2.3 ☘️属性
      • 1.2.4 ☘️方法
  • 二、🍀使用Sprite精灵、SpriteMaterial精灵材质
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用Sprite精灵、SpriteMaterial精灵材质，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.Sprite

THREE.Sprite精灵是一个总是面朝着摄像机的平面，通常含有使用一个半透明的纹理。
精灵不会投射任何阴影，即使设置了

castShadow = true

也将不会有任何效果。

1.1.1 ☘️代码示例

代码示例

const map = new THREE.TextureLoader().load( "sprite.png" );
const material = new THREE.SpriteMaterial( { map: map } );const sprite = new THREE.Sprite( material );
scene.add( sprite );

1.1.2 ☘️构造函数

Sprite( material : Material )
material - （可选值）是SpriteMaterial的一个实例。 默认值是一个白色的SpriteMaterial。

创建一个新的Sprite。

1.1.3 ☘️属性

共有属性请参见其基类Object3D。

.isSprite : Boolean
只读标志，用于检查给定对象是否为 Sprite 类型。

.material : SpriteMaterial
SpriteMaterial的一个实例，定义了这个对象的外观。默认值是一个白色的SpriteMaterial。

.center : Vector2
这个精灵的锚点，也就是精灵旋转时，围绕着旋转的点。当值为(0.5,0.5)时，对应着这个精灵的中心点；当值为(0,0)时，对应着这个精灵左下角的点。其默认值是(0.5,0.5)。

1.1.4 ☘️方法

共有方法请参见其基类Object3D。

.clone () : Sprite
返回当前Sprite对象的一个克隆及其任何后代。

.copy ( sprite : Sprite ) : this
将前一个Sprite对象的属性复制给当前的这个对象。

.raycast ( raycaster : Raycaster, intersects : Array ) : undefined
在投射的光线和精灵之前产生交互。Raycaster.intersectObject将会调用这个方法。 在对sprite进行射线投射之前，射线投射必须通过调用Raycaster.setFromCamera()来初始化。

1.2 ☘️THREE.Sprite

一种使用Sprite的材质。

1.2.1 ☘️代码示例

代码示例

const map = new THREE.TextureLoader().load( 'textures/sprite.png' );
const material = new THREE.SpriteMaterial( { map: map, color: 0xffffff } );const sprite = new THREE.Sprite( material );
sprite.scale.set(200, 200, 1)
scene.add( sprite );

1.2.2 ☘️构造函数

SpriteMaterial( parameters : Object )
parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。 材质的任何属性都可以从此处传入(包括从Material 和 ShaderMaterial继承的任何属性)。

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色）， 内部调用Color.set(color)。 SpriteMaterials不会被Material.clippingPlanes裁剪。

1.2.3 ☘️属性

共有属性请参见其基类Material。

.alphaMap : Texture
alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。 默认值为null。

仅使用纹理的颜色，忽略alpha通道（如果存在）。 对于RGB和RGBA纹理，WebGL渲染器在采样此纹理时将使用绿色通道， 因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。 Luminance-only以及luminance/alpha纹理也仍然有效。

.color : Color
材质的颜色(Color)，默认值为白色 (0xffffff)。 .map会和 color 相乘。

.fog : Boolean
材质是否受雾影响。默认为true。

.isSpriteMaterial : Boolean
只读标志，用于检查给定对象是否属于 SpriteMaterial 类型。

.map : Texture
颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。

.rotation : Radians
sprite的转动，以弧度为单位。默认值为0。

.sizeAttenuation : Boolean
精灵的大小是否会被相机深度衰减。（仅限透视摄像头。）默认为true。

.transparent : Boolean
定义此材质是否透明。默认值为 true。

1.2.4 ☘️方法

共有方法请参见其基类Material。

二、🍀使用Sprite精灵、SpriteMaterial精灵材质

1. ☘️实现思路

  • 1、初始化renderer渲染器。
  • 2、初始化Scene三维场景scene。
  • 3、初始化camera相机，定义相机位置 camera.position.set。
  • 4、加载几何模型：定义createSprites方法，创建10行10列THREE.Sprite精灵对象（使用THREE.SpriteMaterial材质）sprite，场景scene添加sprite。调用createSprites方法。具体代码参考下面代码样例。
  • 5、加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html>
<head><title>学习threejs，使用Sprite精灵、SpriteMaterial精灵材质</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {margin: 0;overflow: hidden;background-color: #000000;}</style>
</head>
<body><div id="Stats-output">
</div>
<div id="WebGL-output">
</div><!-- Js代码块 -->
<script type="text/javascript">// 初始化function init() {var stats = initStats();// 创建三维场景scenevar scene = new THREE.Scene();// 创建相机cameravar camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器canvasRenderer，设置canvasRenderer颜色和大小var canvasRenderer = new THREE.WebGLRenderer();canvasRenderer.setClearColor(new THREE.Color(0x000000, 1.0));canvasRenderer.setSize(window.innerWidth, window.innerHeight);// 设置相机的位置camera.position.x = 0;camera.position.y = 0;camera.position.z = 150;// 渲染器canvasRenderer绑定html要素document.getElementById("WebGL-output").appendChild(canvasRenderer.domElement);createSprites();render();function createSprites() {var material = new THREE.SpriteMaterial();for (var x = -5; x < 5; x++) {for (var y = -5; y < 5; y++) {var sprite = new THREE.Sprite(material);sprite.position.set(x * 10, y * 10, 0);scene.add(sprite);}}}function render() {stats.update();requestAnimationFrame(render);canvasRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>

效果如下：
在这里插入图片描述

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

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

相关文章

外星人入侵（python设计小游戏）

外星人入侵（python设计小游戏）

这个游戏简而言之就是操作一个飞机对前方的飞船进行射击&#xff0c;和一款很久之前的游戏很像&#xff0c;这里是超级低配版那个游戏&#xff0c;先来看看效果图&#xff1a; 由于设计的是全屏的&#xff0c;所以电脑不能截图。。。。 下面的就是你操控的飞船&#xff0c;上面…
阅读更多...
什么是CMS？常用CMS有哪些？

什么是CMS？常用CMS有哪些？

一、内容管理系统&#xff08;Content Management System&#xff09;‌ ‌什么是CMS‌&#xff1a;位于 Web 前端&#xff08;服务器&#xff09;和后端办公系统之间的软件系统&#xff0c;用于内容创建、编辑、审批和发布。支持文本、图片、视频、数据库等各类数字内容的管理…
阅读更多...
Go 语言规范学习（3）

Go 语言规范学习（3）

文章目录 Properties of types and valuesRepresentation of valuesUnderlying types【底层类型】Core types【核心类型】Type identityAssignabilityRepresentabilityMethod sets BlocksDeclarations and scopeLabel scopesBlank identifierPredeclared identifiersExported i…
阅读更多...
在 Ubuntu 上安装 Docker 的完整指南

在 Ubuntu 上安装 Docker 的完整指南

1. 卸载旧版本（如有） 在安装新版本前，建议先卸载旧版本： sudo apt remove docker docker-engine docker.io containerd runc 2. 安装依赖包 更新软件包索引并安装必要的依赖： sudo apt update sudo apt install -y ca-certificates curl gnupg lsb-release 3. 添加 Do…
阅读更多...
turtle的九个使用

turtle的九个使用

一 import turtle as t color [red,green,blue,orange,pink] for i in range(len(color)):t.penup()t.goto(-20070*i,0)t.pendown()t.pencolor(color[i])t.circle(50, steps 5) t.done()二 #在____________上补充代码 #不要修改其他代码import random as r import turtle a…
阅读更多...
23种设计模式-备忘录(Memento)设计模式

23种设计模式-备忘录(Memento)设计模式

备忘录设计模式 &#x1f6a9;什么是备忘录设计模式&#xff1f;&#x1f6a9;备忘录设计模式的特点&#x1f6a9;备忘录设计模式的结构&#x1f6a9;备忘录设计模式的优缺点&#x1f6a9;备忘录设计模式的Java实现&#x1f6a9;代码总结&#x1f6a9;总结 &#x1f6a9;什么是…
阅读更多...
利用虚拟化技术实现高级Hook

利用虚拟化技术实现高级Hook

虚拟化技术为系统监控和Hook提供了更强大、更隐蔽的实现方式。以下是几种基于虚拟化的Hook技术实现方法&#xff1a; 1. 基于VT-x/AMD-V的硬件虚拟化Hook 基本原理 利用CPU的硬件虚拟化扩展(Intel VT-x/AMD-V)在Ring -1层级监控系统行为&#xff0c;实现无法被常规方法检测的…
阅读更多...
某鱼、某宝 sign 签名算法分析记录

某鱼、某宝 sign 签名算法分析记录

【作者主页】&#xff1a;小鱼神1024 【知识星球】&#xff1a;小鱼神的逆向编程圈 【擅长领域】&#xff1a;JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等 本文章中所有内容仅供学习交流使用&#xff0c;不用于其…
阅读更多...
Compose笔记(十三)--事件总线

Compose笔记(十三)--事件总线

这一节了解一下Compose中的事件总线&#xff0c;在Jetpack Compose里&#xff0c;官方没有直接提供事件总线&#xff0c;但可以借助第三方库或者自定义实现来达成事件总线的功能&#xff0c;进而在不同的 Compose 控件间同步数据。 自定义事件总线 import androidx.compose.r…
阅读更多...
Python的inspect模块

Python的inspect模块

在Python编程中&#xff0c;**inspect**模块是一个强大的工具包&#xff0c;它提供了一系列函数来获取对象的信息&#xff0c;主要用于获取对象的源代码、参数信息、类继承关系、方法属性等。这对于调试、自动化文档生成、代码分析等场景都非常有用。本文将详细介绍inspect模块…
阅读更多...
2025跳槽学习计划

2025跳槽学习计划

&#xff08;1&#xff09;编程基础&#xff1a; 目录学习资料Chttps://www.bilibili.com/video/BV1z64y1U7hs?spm_id_from333.1387.favlist.content.clickLinuxPytorchhttps://www.bilibili.com/video/BV1if4y147hS?spm_id_from333.1387.favlist.content.clickopencv数据结…
阅读更多...
WebRTC简介及应用

WebRTC简介及应用

WebRTC&#xff08;Web Real-Time Communication&#xff09;是一种支持浏览器和移动设备进行实时音视频通信的技术&#xff0c;无需安装插件或额外的软件。它是一个开放标准&#xff0c;最初由Google推动&#xff0c;并被W3C&#xff08;万维网联盟&#xff09;和IETF&#xf…
阅读更多...
【C语言】分支与循环（上）

【C语言】分支与循环（上）

前言&#xff1a;C语言是由顺序结构、选择结构、循环结构组成的结构化的程序设计语言。 那C语言是如何设计和实现这些结构的呢&#xff1f;话不多说&#xff0c;马上开始。 三种结构如图所示&#xff1a; 我们可以使用 if else语句、 switch语句 来实现选择&#xff08;分支&am…
阅读更多...
一次与chatgpt关于VO的深入讨论。

一次与chatgpt关于VO的深入讨论。

我&#xff1a; {"usageRate":50,"projectInfo":[{"productName":"长江一号","deviceInfo":[{"deviceName":"AA","num":10},{"deviceName":"BB","num":3}]},…
阅读更多...
Springboot学习笔记3.20

Springboot学习笔记3.20

目录 1.实战篇第一课 我们将会在本次实战中学习到哪些知识点&#xff1f; 开发模式和环境搭建&#xff1a; 注册接口 1.Lombok 2.开发流程 1.controller层&#xff0c;这个层会指明访问路径和要执行的逻辑&#xff1a; 2.我们把返回结果根据接口文档包装成一个类result&a…
阅读更多...
docker save如何迁移镜像更节省空间？

docker save如何迁移镜像更节省空间？

文章目录 方法一&#xff1a;使用docker save命令方法二&#xff1a;直接保存多个镜像到一个tar文件哪个方法更节省磁盘空间&#xff1f;空间效率对比实际测试示例其他优势结论 如何用脚本迁移加载镜像 迁移镜像时候&#xff0c;往往会碰到基础镜像相同的很多镜像需要迁移&…
阅读更多...
全新升级 | Built For You Spring ‘25 发布，Fin 智能客服实现新突破！

全新升级 | Built For You Spring ‘25 发布，Fin 智能客服实现新突破！

图像识别、语音交互、任务自动化&#xff0c;立即体验智能客服蜕变&#xff01; 上周&#xff0c;Intercom 举办了 Built For You Spring 25 发布会&#xff0c;正式揭晓了 AI Agent Fin 的一系列令人振奋的更新。Fin 正在以前所未有的速度革新客户支持模式——它已经成功解决了…
阅读更多...
需求导向的K8S网络原理分析：Kube-proxy、Flannel、Calico的地位和作用

需求导向的K8S网络原理分析：Kube-proxy、Flannel、Calico的地位和作用

最近发现自己似乎从来没学明白过Kubernetes网络通信方案&#xff0c;特开一贴复习总结一下。 在k8s中&#xff0c;每个 Pod 都拥有一个独立的 IP 地址&#xff0c;而且假定所有 Pod 都在一个可以直接连通的、扁平的网络空间中。所以不管它们是否允许在同一个 Node&#xff08;宿…
阅读更多...
Vulnhub:Digitalword.local: FALL靶机渗透

Vulnhub:Digitalword.local: FALL靶机渗透

将靶机按照图中连接方式打开&#xff0c;fall在virtualBox中打开 信息收集 扫描得ip arp-scan -l 扫描端口 nmap -A -T4 -sV -p- 扫描目录 gobuster dir -u http://192.168.117.160 -x php,txt,html -w /usr/share/wordlists/dirbuster/directory-list-2.3-medium.txt 一个一个…
阅读更多...
4、网工软考—VLAN配置—hybird配置

4、网工软考—VLAN配置—hybird配置

1、实验环境搭建&#xff1a; 2、实验过程 SW1&#xff1a; 先创建vlan2和vlan3 [Huawei-Ethernet0/0/2]port link-type hybrid //hybird端口 [Huawei-Ethernet0/0/2]port hybrid pvid vlan 2 [Huawei-Ethernet0/0/2]port hybrid untagged vlan 10 //撕掉vlan10的标签 …
阅读更多...
最新文章

Copyright @ 2022~2023