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

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 falsethis.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.mzph.cn/news/21169.shtml

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

相关文章

MySQL索引特性

目录 一、索引 二、MySQL 与磁盘交互基本单位 三、索引的理解 一、索引 为什么要有索引? 首先我们插入一个8000000条记录的数据,再来查询数据,看看没有索引的情况下,会耗费多长时间。 当执行完这几条命令时,我们会发…

获取全部的地区并生成表格

思路 写文章的时间2023-8-4,大部分网页设置的区域都是先是省,然后通过省获取对应的市,再通过市获取对应的区,以此类推。所以模拟的请求也是按照这个逻辑,先获取所有的省,再获取所有的市,最后获取…

PyTorch 中的累积梯度

https://stackoverflow.com/questions/62067400/understanding-accumulated-gradients-in-pytorch 有一个小的计算图,两次前向梯度累积的结果,可以看到梯度是严格相等的。 代码: import numpy as np import torchclass ExampleLinear(torch…

C语言每日一题:13《数据结构》环形链表。

题目链接: 一.环形链表运动基础。 使用快慢指针利用相对移动的思想: 1.第一种情况: 1,令快指针(fast)速度为2. 2.慢指针(slow)速度为1. 3.以慢指针进入环中开始。 4。假设slow刚刚进入环中fast…

【夜深人静学习数据结构与算法 | 第十二篇】动态规划——背包问题

目录 前言: 01背包问题: 二维数组思路: 一维数组思路: 总结: 前言: 在前面我们学习动态规划理论知识的时候,我就讲过要介绍一下背包问题,那么今天我们就来讲解一下背包问题。 在这…

NetApp 入门级全闪存系统 AFF A250:小巧而强大

NetApp 入门级全闪存系统 AFF A250:小巧而强大 作为 AFF A 系列中的入门级全闪存系统,AFF A250 不但可以简化数据管理,还能为您的所有工作负载提供令人惊叹的强劲动力,价格也平易近人。 AFF A250:您的新 IT 专家 AFF…

工厂方法模式(Factory Method)

工厂方法模式就是定义一个用于创建对象的接口,让子类决定实例化哪一个类。工厂方法模式将类的实例化(具体产品的创建)延迟到工厂类的子类(具体工厂)中完成,即由子工厂类来决定该实例化哪一个类。 Define a…

Knife4j系列--解决不显示文件上传的问题

原文网址&#xff1a;Knife4j系列--解决不显示文件上传的问题_IT利刃出鞘的博客-CSDN博客 简介 本文介绍使用Knife4j时无法上传文件的问题。 问题复现 依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-…

为什么马斯克和奥特曼都想重振加密货币?

1、前言 加密货币已经死了吗&#xff1f;这个问题的答案取决于谁来回答。一个加密爱好者会给你一百个不同的理由来解释为什么加密货币没有死。特斯拉CEO埃隆马斯克和OpenAI CEO 山姆奥特曼都对加密货币及其在塑造未来世界中的潜在作用有着浓厚的兴趣。 在过去很长一段时间里&…

国内GitHub加速访问工具-Fetch GitHub Hosts

一、工具介绍 Fetch GitHub Hosts是一款开源跨平台的国内GitHub加速访问工具&#xff0c;主要为解决研究及学习人员访问 Github 过慢或其他问题而提供的 Github Hosts 同步工具。 项目原理&#xff1a;是通过部署此项目本身的服务器来获取 github.com 的 hosts&#xff0c;而…

Stability AI旗舰图像模型 SDXL1.0发布,AI绘画进入新的时代

Stability AI于7月26号开源了SDXL1.0文生图模型&#xff0c;要知道距离SDXL0.9开源发布也不过一个月,只能说AI发展日新月异。 根据官网介绍&#xff0c;SDXL1.0经过迭代更新&#xff0c;已经是目前世界上最好的图像生成模型 官网根据Discord上的几代实验模型和外部测试&#…

【力扣刷题 | 第二十四天】

目录 前言&#xff1a; 416. 分割等和子集 - 力扣&#xff08;LeetCode&#xff09; 总结 前言&#xff1a; 今晚我们爆刷动态规划类型的题目。 416. 分割等和子集 - 力扣&#xff08;LeetCode&#xff09; 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这…

广州银行信用卡中心:强化数字引擎安全,实现业务稳步增长

广州银行信用卡中心是全国城商行中仅有的两家信用卡专营机构之一&#xff0c;拥有从金融产品研发至销售及后期风险控制、客户服务完整业务链条&#xff0c;曾获“2016年度最佳创新信用卡银行”。 数字引擎驱动业务增长 安全左移降低开发风险 近年来&#xff0c;广州银行信用卡…

day20-101. 对称二叉树

101. 对称二叉树 力扣题目链接 给定一个二叉树&#xff0c;检查它是否是镜像对称的。 思路 镜像对称必要的条件就是根节点的左右子树互相对称 左子树的左孩子 右子树的右孩子左子树的右孩子 右子树的左孩子 递归 使用递归前要确定递归的顺序&#xff0c;是前序、后序还…

【Android】在AndroidStudio开发工具运行Java程序

在Android Studio开发工具中&#xff0c;Android系统开始就是用java语言开发的&#xff0c;还可以java代码来写程序&#xff0c;控制台&#xff0c;桌面应用&#xff0c;还可以写可调用的模块&#xff0c;这里讲一下创建Java程序步骤&#xff0c;方便入门java语言开发。 新建一…

Leetcode-每日一题【剑指 Offer 39. 数组中出现次数超过一半的数字】

题目 数组中有一个数字出现的次数超过数组长度的一半&#xff0c;请找出这个数字。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1: 输入: [1, 2, 3, 2, 2, 2, 5, 4, 2]输出: 2 限制&#xff1a; 1 < 数组长度 < 50000 解题思路 前置知…

Docker Compose编排部署LNMP服务

目录 安装docker-ce 阿里云镜像加速器 文件 启动 安装docker-ce [rootlocalhost ~]# wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo --2023-08-03 18:34:32-- http://mirrors.aliyun.com/repo/Centos-7.repo 正在解析主机 m…

观察者模式(Observer)

观察着模式是一种行为设计模式&#xff0c;可以用来定义对象间的一对多依赖关系&#xff0c;使得每当一个对象状态发生改变时&#xff0c;其相关依赖对象皆得到通知并被自动更新。 观察者模式又叫做发布-订阅&#xff08;Publish/Subscribe&#xff09;模式、模型-视图&#xf…

新手指南:流程图中各种图形的含义及用法解析

我们经常在技术设计、沟通、业务演示等一些领域看到流程图&#xff0c;它也可以称为输入输出图。顾名思义&#xff0c;它是指一种简单的工作流程的具体步骤&#xff0c;比如包括一次会议的流程&#xff0c;以及一次生产制造的顺序和过程等。本文将为大家介绍流程图的含义和具体…

【零基础学Rust | 基础系列 | 基础语法】变量,数据类型,运算符,控制流

文章目录 简介&#xff1a;一&#xff0c;变量1&#xff0c;变量的定义2&#xff0c;变量的可变性3&#xff0c;变量的隐藏 二、数据类型1&#xff0c;标量类型2&#xff0c;复合类型 三&#xff0c;运算符1&#xff0c;算术运算符2&#xff0c;比较运算符3&#xff0c;逻辑运算…