学习threejs，THREE.LineDashedMaterial 虚线材质，基于gosper高斯帕曲线生成雪花动画

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

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.LineDashedMaterial虚线材质概念和属性
  • 二、🍀THREE.LineDashedMaterial虚线材质，基于gosper高斯帕曲线生成雪花动画效果
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中实现THREE.LineBasicMaterial虚线材质，基于gosper高斯帕曲线生成雪花动画，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.LineDashedMaterial虚线材质概念和属性

THREE.LineDashedMaterial 的材质类型，用于创建虚线线条效果。THREE.LineDashedMaterial 是 Three.js 为了简化创建虚线线条而提供的一个方便的材质类型，它允许用户通过简单的属性配置来实现虚线效果，而不需要手动编写着色器。
常用属性：
THREE.LineDashedMaterial 继承自 THREE.Material，并具有以下一些特定的属性，可以用来控制材质的虚线效果：

color：线条的颜色，默认为白色（0xffffff）。可以是一个整数，表示十六进制颜色值。
linewidth：线条宽度，默认为 1。注意，实际的线条宽度可能会受到浏览器和硬件的支持限制。
scale：虚线的比例，默认为 1。可以用来缩放虚线的大小。
dashSize：虚线段的长度，默认为 3。这是虚线中实线部分的长度。
gapSize：虚线间隙的长度，默认为 1。这是虚线中空白部分的长度。
vertexColors：是否启用顶点颜色，默认为 THREE.NoColors。可以设置为 THREE.VertexBasicColors、THREE.VertexColors 或 THREE.FaceColors。
transparent：是否开启透明模式，默认为 false。如果设置为 true，则需要设置 opacity 或者使用 alphaMap。
opacity：材质的全局透明度，默认为 1（不透明）。
side：指定材质在哪一面渲染，可以是 THREE.FrontSide（正面）、THREE.BackSide（背面）或 THREE.DoubleSide（双面）。
depthTest：是否进行深度测试，默认为 true。
depthWrite：是否写入深度缓冲区，默认为 true。
blending：混合模式，默认为 THREE.NormalBlending。可以设置为 THREE.AdditiveBlending、THREE.SubtractiveBlending 等。
wireframe：是否启用线框模式，默认为 false。
visible：是否渲染该材质，默认为 true。

二、🍀THREE.LineDashedMaterial虚线材质，基于gosper高斯帕曲线生成雪花动画效果

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.SpotLight聚焦光源，设置聚焦光源位置，设置聚焦光源投影，scene添加聚焦光源。
  • 5、加载几何模型：创建THREE.Line线几何体（使用gosper高斯帕曲线生成的雪花数据），THREE.Line线几何体使用THREE.LineDashedMaterial 虚线材质，Scene场景加入生成的THREE.Line线几何体。
  • 6、创建旋转动画，执行旋转动画，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn21(THREE.LineBasicMaterial线性几何体)</title><script src="lib/threejs/91/three.js"></script><!--<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>--><script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>body {margin: 0;}canvas {width: 100%;height: 100%;display: block;}
</style>
<body onload="draw()">
</body>
<script>// color	该属性设置材质的颜色，如果设置了vertexColors，这是属性将被忽略// linewidth	设置线的宽度，默认值为1.0// linecap	这个属性定义了线框模式下顶点间线段的端点如何显示。可选的值包括butt（平）、round（圆）和square（方）。默认值为round。在实际使用中，这个属性的修改结果很难看出来。WebGLRenderer对象不支持该属性// linejoin	这个属性定义了线段的连接点如何显示。可选的值有round（圆）、bevel（斜角）和miter（尖角）。默认值为round。如果你在一个使用低透明度和很大wireframeLinewidth值的例子里靠近观察，就可以看到这个属性的效果。WebGLRenderer对象不支持该属性// vertexColors	将这个属性设置成THREE.VertexColors值，就可以给每个顶点指定一种颜色// fog	该属性指定当前材质是否受全局雾化效果设置的影响var renderervar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.shadowMap.enabled = truerenderer.shadowMap.type = THREE.PCFSoftShadowMaprenderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)}var scenevar initScene = () => {scene = new THREE.Scene()}var cameravar initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.set(0, 50, 100)camera.lookAt(new THREE.Vector3(0, 0, 0))}var ambientLight, spotLightvar initLight = () => {ambientLight = new THREE.AmbientLight(0x0c0c0c)scene.add(ambientLight)spotLight = new THREE.SpotLight(0xffffff)spotLight.position.set(-40, 60, -10)spotLight.castShadow = truescene.add(spotLight)}var linevar initModel = () => {var points = gosper(3, 60)var geometry = new THREE.Geometry()var colors = []for (var i = 0,len = points.length; i < len; i++) {var e = points[i]geometry.vertices.push(new THREE.Vector3(e.x, e.y, e.z))colors[i] = new THREE.Color(0xffffff)colors[i].setHSL(e.x / 100 + 0.5, (  e.y * 20 ) / 300, 0.8)}geometry.colors = colors// var material = new THREE.LineBasicMaterial({//   opacity: 1.0, //设置透明度//   linewidth: 1, //设置线的宽度//   vertexColors: THREE.VertexColors //设置这个可以给每个顶点指定一种颜色// })// geometry.computeLineDistances()var material = new THREE.LineDashedMaterial({vertexColors: true,color: 0xffffff,dashSize: 2,gapSize: 2,scale: 5})line = new THREE.Line(geometry, material)line.computeLineDistances()line.position.set(0, 0, -60)scene.add(line)}var statsvar initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var step = 0var render = () => {line.rotation.z = step += 0.01;line.rotation.y = step += 0.01;renderer.render(scene, camera)}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()render()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()requestAnimationFrame(animate)}var draw = () => {initRender()initScene()initCamera()initLight()initModel()initStats()animate()window.onresize = onWindowResize}//高斯帕曲线生成函数gosper(密度, 大小)，也被称为flowsnake（一首音误的雪花），是一种空间填充曲线。它是一个与龙曲线和希尔伯特曲线相似的分形物体。function gosper(a, b) {var turtle = [0, 0, 0];var points = [];var count = 0;rg(a, b, turtle);return points;function rt(x) {turtle[2] += x;}function lt(x) {turtle[2] -= x;}function fd(dist) {
//    ctx.beginPath();points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
//    ctx.moveTo(turtle[0], turtle[1]);var dir = turtle[2] * (Math.PI / 180);turtle[0] += Math.cos(dir) * dist;turtle[1] += Math.sin(dir) * dist;points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
//    ctx.lineTo(turtle[0], turtle[1]);
//    ctx.stroke();}function rg(st, ln, turtle) {st--;ln = ln / 2.6457;if (st > 0) {
//      ctx.strokeStyle = '#111';rg(st, ln, turtle);rt(60);gl(st, ln, turtle);rt(120);gl(st, ln, turtle);lt(60);rg(st, ln, turtle);lt(120);rg(st, ln, turtle);rg(st, ln, turtle);lt(60);gl(st, ln, turtle);rt(60);}if (st == 0) {fd(ln);rt(60);fd(ln);rt(120);fd(ln);lt(60);fd(ln);lt(120);fd(ln);fd(ln);lt(60);fd(ln);rt(60)}}function gl(st, ln, turtle) {st--;ln = ln / 2.6457;if (st > 0) {
//      ctx.strokeStyle = '#555';lt(60);rg(st, ln, turtle);rt(60);gl(st, ln, turtle);gl(st, ln, turtle);rt(120);gl(st, ln, turtle);rt(60);rg(st, ln, turtle);lt(120);rg(st, ln, turtle);lt(60);gl(st, ln, turtle);}if (st == 0) {lt(60);fd(ln);rt(60);fd(ln);fd(ln);rt(120);fd(ln);rt(60);fd(ln);lt(120);fd(ln);lt(60);fd(ln);}}}
</script>
</html>

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

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

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

相关文章

Linux——echo-tail-重定向符

Linux——echo-tail-重定向符

echo命令 类似printf 输出&#xff0c;最好加“ ” echo "hello Linux" 反引号 ‘ ’ 引用命令 echo ‘ pwd ’ 重定向符 > 和 >> > 覆盖 >> 追加 tail命令 查看文件尾部内容&#xff0c;追踪文件最新更改 tail -num 从尾部往上读num行&#…
阅读更多...
linux 效率化 - 输入法 - fcitx5

linux 效率化 - 输入法 - fcitx5

安装 Fcitx5 1. 卸载 ibus 框架 由于 ibus 和 fcitx 可能会冲突&#xff0c;先卸载 ibus&#xff08;暂未确认原因&#xff09; sudo apt remove --purge ibus2. 安装 fcitx5 输入法框架 sudo apt update sudo apt install fcitx5 fcitx5-chinese-addons fcitx5-frontend-gtk…
阅读更多...
【scene_manager】与 MoveIt 机器人的规划场景进行交互

【scene_manager】与 MoveIt 机器人的规划场景进行交互

scene_manager Scene Manager包是由 Robotnik 创建的 ROS 包&#xff0c;旨在帮助构建和与 MoveIt 机器人的规划场景进行交互。 背景信息 MoveIt 规划场景 是一个用于存储机器人周围世界的表示&#xff08;外部碰撞&#xff09;以及机器人自身状态&#xff08;内部碰撞和当…
阅读更多...
MySQL 执行流程是怎样的？

MySQL 执行流程是怎样的？

可以看到&#xff0c; MySQL 的架构共分为两层&#xff1a;Server 层和存储引擎层&#xff0c; Server 层负责建立连接、分析和执行 SQL。MySQL 大多数的核心功能模块都在这实现。存储引擎层负责数据的存储和读取。 InnoDB、MyISAM、Memory。不同的存储引擎共用一个 Server 层…
阅读更多...
Docker新手必看：快速安装和配置BookStack在线文档系统

Docker新手必看：快速安装和配置BookStack在线文档系统

文章目录 前言1. 安装Docker2. Docker镜像源添加方法3. 创建并启动BookStack容器4. 登录与简单使用5. 公网远程访问本地BookStack5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 前言 本文主要介绍如何在Linux系统使用Docker本地部署在线文档管理…
阅读更多...
嵌入式-交叉编译链

嵌入式-交叉编译链

一、Buildroot Official website&#xff1a; https://buildroot.org/downloads/manual/manual.html Buildroot是Linux平台上一个用于构建嵌入式Linux系统的框架&#xff0c;它简化了系统构建过程并实现了工作的自动化。以下是对Buildroot的详细介绍&#xff1a; 一、概述 …
阅读更多...
pdf删除几个页面怎么操作？PDF页面删除的快捷方法

pdf删除几个页面怎么操作？PDF页面删除的快捷方法

pdf删除几个页面怎么操作&#xff1f;在日常办公与学习中&#xff0c;PDF文件因其跨平台兼容性和良好的格式保持性而广受欢迎。然而&#xff0c;随着文件内容的累积&#xff0c;PDF文档往往会变得庞大而臃肿&#xff0c;不仅占用存储空间&#xff0c;还可能在传输时造成不便。因…
阅读更多...
【优选算法篇】双指针的华丽探戈：深入C++算法殿堂的优雅追寻

【优选算法篇】双指针的华丽探戈：深入C++算法殿堂的优雅追寻

文章目录 C 双指针详解&#xff1a;进阶题解与思维分析前言第一章&#xff1a;有效三角形的个数1.1 有效三角形的个数示例 1&#xff1a;示例 2&#xff1a;解法一&#xff08;暴力求解&#xff09;解法二&#xff08;排序 双指针&#xff09;易错点提示代码解读 第二章&#…
阅读更多...
在线文字转语音哪个好？教你7个ai文字转语音配音的方法，别错过！

在线文字转语音哪个好？教你7个ai文字转语音配音的方法，别错过！

随着人工智能技术的飞速发展&#xff0c;ai文字转语音配音软件已经开始广泛应用&#xff0c;能够生成或修改出逼真的人声。这些文字转语音在线版不仅易于使用&#xff0c;连没有专业音频处理技术的用户也能轻松上手。通过这些软件&#xff0c;您只需简单输入文本或上传音频文件…
阅读更多...
【随时随地学算法】本地部署hello-algo结合内网穿透远程学习新体验

【随时随地学算法】本地部署hello-algo结合内网穿透远程学习新体验

文章目录 前言1.关于hello-algo2.安装Docker和Docker compose3.本地部署hello-algo4. hello-algo本地访问5.cpolar内网穿透工具安装6.创建远程连接公网地址7.固定Uptime Kuma公网地址 前言 本篇文章主要介绍如何在本地部署hello-algo算法学习必备项目&#xff0c;并结合cpolar…
阅读更多...
PostgreSQL 17重磅登场——世界上最成功的数据库

PostgreSQL 17重磅登场——世界上最成功的数据库

朋友们&#xff0c;万众期待的 PostgreSQL 大版本发布又来了&#xff01;这一次&#xff0c;PostgreSQL 17 带着全新的性能优化和开发者必备的新功能强势登场。与其说这是一场普通的更新&#xff0c;不如说它是一场专为高并发工作负载和海量数据量身打造的技术嘉年华&#xff0…
阅读更多...
【优选算法篇】编织算法的流动诗篇：滑动窗口的轻盈之美

【优选算法篇】编织算法的流动诗篇：滑动窗口的轻盈之美

文章目录 C 滑动窗口详解&#xff1a;基础题解与思维分析前言第一章&#xff1a;热身练习1.1 长度最小的子数组解法一&#xff08;暴力求解&#xff09;解法二&#xff08;滑动窗口&#xff09;滑动窗口的核心思想图解分析滑动窗口的有效性时间复杂度分析易错点提示 1.2 无重复…
阅读更多...
基于webrtc实现音视频通信

基于webrtc实现音视频通信

与传统通信方式不同&#xff0c;p2p通信的实现过程不依赖于中间服务器的信息收发&#xff0c;直接通过信令等完成通信过程的建立&#xff1b; 通过websocket实现信令服务器的建立&#xff0c;而通过信令来确定通信双方&#xff1b; webrtc通过 sdp协议来完善通信双方间协议的…
阅读更多...
塞班和诺基亚（中古手机图，你见过哪个？）

塞班和诺基亚（中古手机图，你见过哪个？）

诺基亚的塞班系统&#xff0c;是比较早和强大的移动操作系统了。当时还有Palm&#xff0c;微软的平台&#xff0c;但市占率都很低。 安卓从被谷歌收购那天&#xff0c;每个特性都预示着&#xff0c;未来一定会超越塞班。而塞班后来取消了生态&#xff0c;自己来使用&#xff0c…
阅读更多...
mac上docker desktop 服务指南

mac上docker desktop 服务指南

容器化技术是指将软件代码与运行此代码所需的操作系统 (OS) 库和依赖项进行集体打包&#xff0c;以便创建可在任意基础设施上一致运行的单个轻量级可执行文件&#xff08;称为容器&#xff09;&#xff0c;比物理机部署具备更好的可移植性和维护性&#xff0c;比虚拟机具有更高…
阅读更多...
基于Spring Boot+Vue的医疗健康的便民服务平台系统的设计与实现(协同过滤算法、实时聊天)

基于Spring Boot+Vue的医疗健康的便民服务平台系统的设计与实现(协同过滤算法、实时聊天)

&#x1f388;系统亮点&#xff1a;协同过滤算法、实时聊天&#xff1b; 一.系统开发工具与环境搭建 1.系统设计开发工具 后端使用Java编程语言的Spring boot框架 项目架构&#xff1a;B/S架构 运行环境&#xff1a;win10/win11、jdk17 前端&#xff1a; 技术&#xff1a;框架…
阅读更多...
atcoder abc375

atcoder abc375

A seats 代码&#xff1a; #include <bits/stdc.h> using namespace std;int main() {int n;cin >> n;vector<char> a(n 1);for(int i 1; i < n; i ) cin >> a[i];int cnt 0;for(int i 1; i < n - 2; i ) {if(a[i] # && a[i 1…
阅读更多...
【spring ai】java 实现RAG检索增强，超快速入门

【spring ai】java 实现RAG检索增强，超快速入门

rag 需求产生的背景介绍&#xff1a; 在使用大模型时&#xff0c;一个常见的问题是模型会产生幻觉&#xff08;即生成的内容与事实不符&#xff09;&#xff0c;同时由于缺乏企业内部数据的支持&#xff0c;导致其回答往往不够精准和具体&#xff0c;偏向于泛泛而谈。这些问题…
阅读更多...
STM32 实现 TCP 服务器与多个设备通信

STM32 实现 TCP 服务器与多个设备通信

目录 一、引言 二、硬件准备 三、软件准备 四、LWIP 协议栈的配置与初始化 五、创建 TCP 服务器 1.创建 TCP 控制块 2.绑定端口 3. 进入监听状态 4.设置接收回调函数 六、处理多个客户端连接 七、数据处理与通信管理 八、错误处理与资源管理 九、总结 一、引…
阅读更多...
【C++】：工厂模式

【C++】：工厂模式

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 文章目录 简单工厂模什么是简单工厂模式&#xff1f;如何实现简单工厂模式&#xff1f; 工厂方法抽象工厂模式总结简单工厂模式工厂方法抽象工厂「Abstract Factory」 简单工厂模 什么是简单工厂模式&#xf…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023