學習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.pswp.cn/bicheng/74850.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/74850.shtml
英文地址，請注明出處：http://en.pswp.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