Three.js给场景添加背景颜色,背景图,全景图

news2024/12/23 23:00:58

1.相关API的使用:

1 THREE.Color (用于创建和表示颜色)

2. THREE.TextureLoader(用于加载和处理图片纹理)

3. THREE.SphereGeometry(用于创建一个球体的几何体)

4. THREE.Mesh(用于创建一个材质对象)

在上一篇 Three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上分别加入onSetSceneColor(设置场景颜色),onSetSceneImage(设置场景背景图),onSetSceneViewImage (设置场景全景图),onClearSceneBg(清除场景背景)等四个方法。

//设置场景颜色
	onSetSceneColor(color) {
		this.onClearSceneBg()
		this.scene.background = new THREE.Color(color)
	}
	//设置场景图片
	onSetSceneImage(url) {
		this.onClearSceneBg()
		this.scene.background = new THREE.TextureLoader().load(url);
	}
	// 设置全景图
	onSetSceneViewImage(url) {
		this.onClearSceneBg()
		const sphereBufferGeometry = new THREE.SphereGeometry(40, 32, 16);
		sphereBufferGeometry.scale(-1, -1, -1);
		const material = new THREE.MeshBasicMaterial({
			map: new THREE.TextureLoader().load(url)
		});
		this.viewMesh = new THREE.Mesh(sphereBufferGeometry, material);
		this.scene.add(this.viewMesh);

	}
	// 清除场景背景
	onClearSceneBg() {
		this.scene.background = new THREE.Color('rgba(212, 223, 224)')
		if (!this.viewMesh) return false
		this.viewMesh.material.dispose()
		this.viewMesh.geometry.dispose()
		this.scene.remove(this.viewMesh)
	}

完整的代码可参考:https://gitee.com/ZHANG_6666/Three.js3D/blob/master/src/views/renderModel.js

界面效果图:

1.背景图在这里插入图片描述
2.全景图
在这里插入图片描述

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

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

相关文章

【C# 基础精讲】条件语句:if、else、switch

条件语句是C#编程中用于根据条件执行不同代码块的关键结构。C#支持if、else和switch三种常见的条件语句,它们允许根据表达式的结果决定程序的执行路径。在本文中,我们将详细介绍这三种条件语句的语法和使用方法。 if语句 if语句用于在给定条件为真&…

有奖活动 | 大咖论道:一同畅聊鸿蒙生态

点击预约直播 活动简介 即日起-2023年9月5日,参与本期活动与大咖一起聊聊鸿蒙新生态,您可以在社区写下对鸿蒙生态的畅想,也可以学习相关课程并获取证书,完成活动任务即可参与精美礼品抽奖。 活动周期 8月1日-9月5日 参与考试 Harm…

逻辑卷扩容

背景 服务器有3个逻辑卷,1个是1T,另外两个是500G,需要将500G的合并扩容为1T 操作 df -Th lsblk -f 查看磁盘大小卸载 /approot umount /approot vim /etc/fstab #注释掉/approot mount -a检查是否卸载完成 vgdisplay -v 找到approot所在…

重磅!官方Android现代开发指南发布!

重磅!官方Android现代开发指南发布! 最近查看了google官方Android开发站点,猛然发现页面做了一些改动,新增了一个专题tab页,增加了一个UI开发指南模块,该模块整合了Jetpack Compose、Jetpack架构组件及Mat…

elementui实现当前页全选+所有全选+翻页保持选中状

原文来自:https://blog.csdn.net/sumimg/article/details/121693305?spm1001.2101.3001.6650.1&utm_mediumdistribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-121693305-blog-127570059.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm…

使用 Python 和 Flask 构建简单的 Restful API 第 1 部分

一、说明 我将把这个系列分成 3 或 4 篇文章。在本系列的最后,您将了解使用flask构建 restful API 是多么容易。在本文中,我们将设置环境并创建将显示“Hello World”的终结点。 我假设你的电脑上安装了python 2.7和pip。我已经在python 2.7上测试了本文…

2023 华数杯全国大学生数学建模竞赛 ——C题母亲身心健康对婴儿成长的影响 完整建模+代码

目录 完整思路下载链接:这里可以获取2023华数杯全国大学生数学建模竞赛题目C 题母亲身心健康对婴儿成长的影响✅ 问题1问题1建模思路✅ 问题2问题2建模思路✅ 问题3问题3建模思路✅ 问题4问题4建模思路✅ 问题5问题5建模思路提供的数据和资料: 完整思路下…

【我们一起60天准备考研算法面试(大全)-第四十天 40/60】【并查集】

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客,如有问题交流,欢迎评论区留言,一定尽快回复!(大家可以去看我的专栏,是所有文章的目录)   文章字体风格: 红色文字表示&#…

el-table实现指定列合并

table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素…

ESP 32 蓝牙虚拟键盘链接笔记本电脑的键值问题

由于打算利用esp32 通过蓝牙链接电脑后实现一些特俗的键盘功能,所以就折腾了一下,折腾最耗费时间的却是键值问题,让一个20多年的老司机重新补充了知识 过程曲折就不说了,直接说结果。 我们通过网络搜索获取的键值和蓝牙模拟键盘传…

云专线的应用场景

云专线是连接用户本地数据中心和云上虚拟私有云的高安全、高速度、低延迟、稳定可靠的专属连接通道,主要有以下应用场景。 1、混合云环境:企业在私有云和公有云之间传输数据及部署应用时,使用云专线建立专用的网络连接,保证数据传…

做赴日IT工作 Java Python等语言哪个更好?

很多同学问我,做赴日IT工作Java,Python等语言哪个更好?更容易拿到内定通知书?如果你想去做赴日IT工作,无论是学Java还是Python或是其他编程语言,都是很好的选择,因为它们都有自己的的前景和应用…

如何快速完成MySQL数据的差异对比|NineData

在现代商业环境中,数据库是企业存储核心数据的重要工具,而 MySQL 作为最受欢迎的关系型数据库管理系统,广泛应用于各行各业。在容灾、数据迁移、备份恢复等场景下,为了确保两端或多端之间数据的一致性,通常需要对数据进…

【C++】多态(多态的构成条件,虚函数重写,override,final,覆盖隐藏对比)

文章目录 前言一、多态的定义及实现1.多态的构成条件: 二、虚函数1.虚函数的重写2.虚函数重写的例外(协变)3.析构函数的虚函数(基类与派生类析构函数名字不同)1.不加virtual的一般情况:2.不加virtual会出现…

Merge和Rebase的区别

Merge 和 Rebase 是 Git 中常用的两种分支整合方式,它们具有不同的工作原理和效果: Merge(合并) 合并是将两个或多个分支的提交历史合并为一个新的提交。在合并时,Git 会创建一个新的合并提交,将两个分支…

Android中简单封装Livedata工具类

Android中简单封装Livedata工具类 前言: 之前讲解过livedata和viewmodel的简单使用,也封装过room工具类,本文是对livedata的简单封装和使用,先是封装了一个简单的工具类,然后实现了一个倒计时工具类的封装. 1.LiveD…

让你的商城触达全球市场!了解跨境商城系统源码的优势

全球市场触达的商机 随着全球化趋势的不断发展,跨境电商已经成为企业开拓全球市场的重要途径之一。在扩大国际业务的同时,企业需要面对许多挑战,如语言、支付、物流等问题。这些问题可以通过使用跨境商城系统源码来解决。 一、多语言支持 跨境…

如何做好电信布线?

电信布线作为通信网络骨干,对于任何现代企业或组织来说都是至关重要的组成部分。随着业务量的持续增长,对电信布线安装提出了更高的要求。为此,飞速(FS)提出了FHD电信布线解决方案,在满足了电信机房要求的基…

源码分析——ConcurrentHashMap源码+底层数据结构分析

文章目录 1. ConcurrentHashMap 1.71. 存储结构2. 初始化3. put4. 扩容 rehash5. get 2. ConcurrentHashMap 1.81. 存储结构2. 初始化 initTable3. put4. get 3. 总结 1. ConcurrentHashMap 1.7 1. 存储结构 Java 7 中 ConcurrentHashMap 的存储结构如上图,Concurr…

【Vue3】localStorage读取数组并赋值的问题

问题描述 今天在写项目用到localStorage进行存储并读取数据,并将读取到的数据存放到列表的时候,发现vue3不能直接对数组进行赋值。因为Vue3的响应式是proxy,对所有的数据进行了拦截。 onBeforeMount(() > {console.log(JSON.parse(local…