八、3d场景的区域光墙

        在遇到区域展示的时候我们就能看到炫酷的区域选中效果,那么代码是怎么编辑的呢,今天咱们就好好说说,下面看实现效果。

思路:

  1. 首先,光墙肯定有多个,那么必须要创建一个新的js文件来作为他的原型对象。
  2. 这个光墙是用c++写的,但是必须是拿js包裹的,否则加入不进Vue项目中。
  3. City文件加载引入,根据具体的传入参数一一对应上位置。

创建lightwall.js文件,传1表示是一个方的光柱,2是个圆的光柱

import * as THREE from "three";
import vertexShader from "@/shader/lightWall/vertex.js";
import fragmentShader from "@/shader/lightWall/fragment.js";
export default class LightWall {constructor(type = 1,radius = 5,radius1 = 5,length = 2,position = { x: 0, z: 0 },) {this.geometry = null//type是1表示方形柱,2是圆形柱if (type == 1) {this.geometry = new THREE.BoxBufferGeometry(radius,20,radius1,);}if (type == 2) {this.geometry = new THREE.CylinderBufferGeometry(radius,radius1,20,32,1,true);}this.material = new THREE.ShaderMaterial({vertexShader: vertexShader,fragmentShader: fragmentShader,transparent: true,side: THREE.DoubleSide,});this.mesh = new THREE.Mesh(this.geometry, this.material);this.mesh.position.set(position.x, 78, position.z);this.mesh.geometry.computeBoundingBox();this.mesh.scale.set(length, 2, length);//   console.log(mesh.geometry.boundingBox);let { min, max } = this.mesh.geometry.boundingBox;//   获取物体的高度差let uHeight = max.y - min.y;this.material.uniforms.uHeight = {value: uHeight,};}remove () {this.mesh.remove();this.mesh.removeFromParent();this.mesh.geometry.dispose();this.mesh.material.dispose();}
}

再就是引入光墙的c++代码,也就是上面引入的vertex.js

const fragmentShader = /*glsl*/ `
varying vec3 vPosition;
uniform float uHeight;
void main(){// 设置混合的百分比float gradMix = (vPosition.y+uHeight/2.0)/uHeight;gl_FragColor = vec4(0.7,0.5,0.35,1.0-gradMix);}`
export default fragmentShader

最后在主文件使用,引入到scene中

// 添加光墙
import LightWall from "./LightWall";
const lightWall = new LightWall(1, 12, 24, 10, { x: -78, z: -48 });
scene.add(lightWall.mesh);

以上就把这个光墙封装为一个类,当使用的时候只需要new就行了,是不是很方便呢,当然你也可以扩展增加参数使用这个东西,如果又不会的可以私信或者留言哦。

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

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

相关文章

unity打包工具

接手了一个项目,打包存在重大问题,故此在unity addressables 基础上弄了一个简单的打包工具,代码也都做好了注释,操作非常简单以下为操作方法: 首先设置导入Addressables插件,并设置好详细参见&#xff1a…

bypass disable_function 学习

LD_PRELOAD 我是在做了 buu的 REC ME 来做这个系列 所以 LD_PRELOAD 已经有了解了 我们来做这个题目 CTFHub Bypass disable_function —— LD_PRELOAD本环境来源于AntSword-Labs <!DOCTYPE html> <html> <head><title>CTFHub Bypass disable_func…

K-Means(上):数据分析 | 数据挖掘 | 十大算法之一

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ &#x1f434;作者&#xff1a;秋无之地 &#x1f434;简介&#xff1a;CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作&#xff0c;主要擅长领域有&#xff1a;爬虫、后端、大数据…

liunx的攻击

1.场景和分析 2.病毒分析 3.解决步骤

CTF-python爬虫学习笔记

学习链接 【Python爬虫】爆肝两个月&#xff01;拜托三连了&#xff01;这绝对是全B站最用心&#xff08;没有之一&#xff09;的Python爬虫公开课程&#xff0c;从入门到&#xff08;不&#xff09;入狱 &#xff01; 。知识 1.1 出现错误 复制红框中的内容去查找 1.2 打印…

面试题:线程池灵魂8连问,你挡的住吗?

文章目录 1. 面试官&#xff1a;日常工作中有用到线程池吗&#xff1f;什么是线程池&#xff1f;为什么要使用线程池&#xff1f;2. 面试官&#xff1a;ThreadPoolExecutor 都有哪些核心参数&#xff1f;3. 面试官&#xff1a;什么是阻塞队列&#xff1f;说说常用的阻塞队列有哪…

Wi-Fi直连分享:Android设备间的高速连接

Wi-Fi直连分享&#xff1a;Android设备间的高速连接 引言 随着无线局域网&#xff08;Wi-Fi&#xff09;的普及和发展&#xff0c;使用Wi-Fi直连技术&#xff08;P2P&#xff09;在没有中间接入点的情况下实现设备间直接互联成为可能。通过Wi-Fi直连&#xff0c;具备相应硬件…

云原生Kubernetes:K8S配置资源管理

目录 一、理论 1.Secret 2.Secret创建 3.Secret使用 4.Configmap 5.Configmap创建 6.Configmap使用 二、实验 1.Secret创建 2.Secret使用 3.Configmap创建 4.Configmap使用 三、问题 1.变量引用生成资源报错 2.查看pod日志失败 3.创建configmap报错 4.YAML创建…

2022年中国征信行业覆盖人群、参与者数量及征信业务查询量统计[图]

征信是指依法收集、整理、保存、加工自然人、法人及其他组织的信用信息&#xff0c;并对外提供信用报告、信用评估、信用信息咨询等服务&#xff0c;帮助客户判断、控制信用风险&#xff0c;进行信用管理的活动。 征信业主要范畴 资料来源&#xff1a;共研产业咨询&#xff08…

百元开放式耳机推荐哪款、性价比最好的开放式耳机推荐

随着蓝牙耳机产业的高速发展&#xff0c;目前最热门的蓝牙耳机莫过于开放式的&#xff0c;跟传统的蓝牙耳机相比&#xff0c;开放式的耳机拥有久戴不累、安全舒适等优势&#xff0c;所谓的“开放式耳机”&#xff0c;就是指不用塞入耳朵内&#xff0c;也能听音乐的耳机&#xf…

基于.Net Core实现自定义皮肤WidForm窗口

前言 今天一起来实现基于.Net Core、Windows Form实现自定义窗口皮肤&#xff0c;并实现窗口移动功能。 素材 准备素材&#xff1a;边框、标题栏、关闭按钮图标。 窗体设计 1、创建Window窗体项目 2、窗体设计 拖拉4个Panel控件&#xff0c;分别用于&#xff1a;标题栏、关…

单元测试框架-Pytest(简单学习)

单元测试框架-Pytest Pytest是基于Python语言的单元测试框架&#xff0c;也是一个命令行的工具&#xff0c;比 unittest 测试框架更灵活。具有以下特点&#xff1a; 入门简单&#xff0c;易上手&#xff0c;官方文档丰富而且使用广泛&#xff0c;有大量的参数例子。 unittest…

如何利用niceGUI构建一个流式单轮对话界面

官方文档 参考文档 import asyncio import time import requests from fastapi import FastAPI from nicegui import app, uiclass ChatPage:temperature: ui.slider Nonetop_p: ui.slider Noneapi_key: ui.input Nonemodel_name: ui.input Noneprompt: ui.textarea None…

PHP 数码公司运营管理系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 数码公司运营管理系统系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 php 数码公司运营管理系统 代码 https://download.csdn.net/download/qq_41…

Neural Networks for Fingerprint Recognition

Neural Computation ( IF 3.278 ) 摘要&#xff1a; 在采集指纹图像数据库后&#xff0c;设计了一种用于指纹识别的神经网络算法。当给出一对指纹图像时&#xff0c;算法输出两个图像来自同一手指的概率估计值。在一个实验中&#xff0c;神经网络使用几百对图像进行训练&…

Flutter笔记:AnimationMean、AnimationMax 和 AnimationMin 三个类的用法

Flutter笔记 AnimationMean、AnimationMax 和 AnimationMin三个类的用法 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/…

阿里云网络、数据中心和服务器技术创新优势说明

阿里云服务器技术创新、网络技术创新、数据中心技术创新和智能运维&#xff1a;云服务器方升架构、自研硬件、自研存储硬件AliFlash和异构计算加速平台&#xff0c;以及全自研网络系统技术创新和数据中心巴拿马电源、液冷技术等技术创新说明&#xff0c;阿里云百科aliyunbaike.…

树莓派4B串口通信配置方式

目录 1树莓派4B的安装&#xff1a; 1.1安装Serial与使用 1.1.1安装serial 1.1.2打开串口 1.2设置硬件串口为GPIO串口&#xff08;修改串口映射关系&#xff09; 1.2.1修改配置文件 2.1minicom串口 2.1.1安装minicom 这篇博客源于&#xff1a;工创赛。需要让树莓派与STM…

设计模式探索:从理论到实践的编码示例 (软件设计师笔记)

&#x1f600;前言 设计模式&#xff0c;作为软件工程领域的核心概念之一&#xff0c;向我们展示了开发过程中面对的典型问题的经典解决方案。这些模式不仅帮助开发者创建更加结构化、模块化和可维护的代码&#xff0c;而且也促进了代码的复用性。通过这篇文章&#xff0c;我们…

AdaBoost算法解密:从基础到应用的全面解析

目录 一、简介什么是AdaBoostAdaBoost的历史和重要性定义 二、基础概念集成学习&#xff08;Ensemble Learning&#xff09;定义示例 弱学习器和强学习器定义示例 三、AdaBoost算法原理样本权重&#xff08;Sample Weights&#xff09;定义示例 学习器权重&#xff08;Learner …