既有方向又会动的线，包你学会制作按箭头方向流动的线(three.js实战3)

2023-10-13 02:20
文章标签 实战 js 方向 学会 制作 流动 箭头 three 既有 会动

本文主要是介绍既有方向又会动的线，包你学会制作按箭头方向流动的线(three.js实战3)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

制作按箭头方向流动的线

  • 1.demo效果
  • 2. 实现思路
  • 3. 实现要点
    • 3.1 创建箭头流动线
    • 3.2 创建流动线
    • 3.3 更新纹理偏移
  • 4. demo代码

1.demo效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2. 实现思路

实现思路比较简单，使用纹理材质创建网格对象，然后在render函数中改变纹理的偏移量（texture.offset.x），实现流动的效果

3. 实现要点

3.1 创建箭头流动线

  • 创建长条状平面
    使用THREE.PlaneGeometry类创建一个长条状平面，用来填充箭头纹理

  • 创建纹理材质
    使用TextureLoader纹理加载器加载纹理，然后需要设置水平方向重复10次，用该纹理作为map属性创建MeshBasicMaterial材质，同时将材质的side属性设置为THREE.DoubleSide，这样正反面都可以看到效果

  • 创建网格对象
    使用上面创建的几何体和材质使用THREE.Mesh直接创建网格对象并添加到场景中

示例代码如下

//创建条形平面-箭头流动的路径
const geometry = new THREE.PlaneGeometry(20, 2, 32);//加载纹理
arrowLineTexture = new THREE.TextureLoader().load('../assets/textures/right.png');
arrowLineTexture.wrapS = arrowLineTexture.wrapT = THREE.RepeatWrapping; //每个都重复
arrowLineTexture.repeat.set(10, 1); //水平重复10次
arrowLineTexture.needsUpdate = true;// 加载的纹理作为纹理贴图创建材质
let materials = new THREE.MeshBasicMaterial({map: arrowLineTexture,side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);

3.2 创建流动线

  • 创建线条
    使用THREE.CatmullRomCurve3类创建一个线条路径，然后用该路径创建一个管道几何体

  • 创建纹理材质
    使用TextureLoader纹理加载器加载纹理，这次设置水平方向重复20次，使用纹理作为map属性创建MeshBasicMaterial材质，同时将材质的side属性设置为THREE.BackSide，transparent属性设置为true

  • 创建网格对象
    使用上面创建的几何体和材质使用THREE.Mesh直接创建网格对象并添加到场景中

// 创建线条路径
let curve = new THREE.CatmullRomCurve3([new THREE.Vector3(0, 0, 10),new THREE.Vector3(10, 0, 10),new THREE.Vector3(10, 0, 0),new THREE.Vector3(20, 0, -10)
]);//依据线条路径创建管道几何体
let tubeGeometry = new THREE.TubeGeometry(curve, 80, 0.2);
//加载纹理
flowingLineTexture = new THREE.TextureLoader().load('../assets/textures/roadflowing1.png')flowingLineTexture.wrapS = THREE.RepeatWrapping;
flowingLineTexture.wrapT = THREE.RepeatWrapping;
flowingLineTexture.repeat.set(20, 1); //水平重复20次
flowingLineTexture.needsUpdate = true;//创建纹理贴图材质
let material = new THREE.MeshBasicMaterial({map: flowingLineTexture,side: THREE.BackSide, //显示背面transparent: true
});let mesh = new THREE.Mesh(tubeGeometry, material);
mesh.position.z = 10;
scene.add(mesh);

3.3 更新纹理偏移

在render函数中更新纹理偏移，有了这一步，线条就可以动起来

arrowLineTexture.offset.x -= 0.03; //更新箭头纹理偏移量
flowingLineTexture.offset.x -= 0.05; //更新流动线纹理偏移量

4. demo代码

<!DOCTYPE html><html><head><title>流动的方向线</title><script type="text/javascript" src="../three/build/three.js"></script><script type="text/javascript" src="../three/examples/js/controls/OrbitControls.js"></script><script type="text/javascript" src="../three/examples/js/libs/stats.min.js"></script><style>body {margin: 0;overflow: hidden;}</style>
</head><body><div id="Stats-output"></div><div id="WebGL-output"></div><script type="text/javascript">var scene, camera, renderer, arrowLineTexture, flowingLineTexture, stats, controls, clock;function initScene() {scene = new THREE.Scene();//用一张图加载为纹理作为场景背景scene.background = new THREE.TextureLoader().load("../assets/textures/starry-deep-outer-space-galaxy.jpg");}function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(20, 30, 50);camera.lookAt(new THREE.Vector3(0, 0, 0));}function initLight() {//添加环境光const ambientLight = new THREE.AmbientLight(0x0c0c0c);scene.add(ambientLight);const directionalLight = new THREE.DirectionalLight('#fff')directionalLight.position.set(30, 30, 30).normalize()scene.add(directionalLight)//添加聚光灯const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-40, 60, -10);spotLight.castShadow = true;scene.add(spotLight);}function initModel() {initArrowLine()initFlowingLine();initPlane();}function initArrowLine() {//创建条形平面-箭头流动的路径const geometry = new THREE.PlaneGeometry(20, 2, 32);//加载纹理arrowLineTexture = new THREE.TextureLoader().load('../assets/textures/right.png');arrowLineTexture.wrapS = arrowLineTexture.wrapT = THREE.RepeatWrapping; //每个都重复arrowLineTexture.repeat.set(10, 1); //水平重复10次arrowLineTexture.needsUpdate = true;// 加载的纹理作为纹理贴图创建材质let materials = new THREE.MeshBasicMaterial({map: arrowLineTexture,side: THREE.DoubleSide});const mesh = new THREE.Mesh(geometry, materials);scene.add(mesh);}function initFlowingLine() {//加载纹理flowingLineTexture = new THREE.TextureLoader().load('../assets/textures/roadflowing1.png')flowingLineTexture.wrapS = THREE.RepeatWrapping;flowingLineTexture.wrapT = THREE.RepeatWrapping;flowingLineTexture.repeat.set(20, 1); //水平重复20次flowingLineTexture.needsUpdate = true;//创建纹理贴图材质let material = new THREE.MeshBasicMaterial({map: flowingLineTexture,side: THREE.BackSide, //显示背面transparent: true});// 创建线条路径let curve = new THREE.CatmullRomCurve3([new THREE.Vector3(0, 0, 10),new THREE.Vector3(10, 0, 10),new THREE.Vector3(10, 0, 0),new THREE.Vector3(20, 0, -10)]);//依据线条路径创建管道几何体let tubeGeometry = new THREE.TubeGeometry(curve, 80, 0.2);let mesh = new THREE.Mesh(tubeGeometry, material);mesh.position.z = 10;scene.add(mesh);}//创建底面function initPlane() {const planeGeometry = new THREE.PlaneGeometry(50, 50, 1, 1); //创建一个平面几何对象//材质const planeMaterial = new THREE.MeshLambertMaterial({color: 0x080631,transparent: true,opacity: 0.8});const plane = new THREE.Mesh(planeGeometry, planeMaterial);//设置平面位置plane.rotation.x = -0.5 * Math.PI;plane.position.set(0, -2, 0);//平面添加到场景中scene.add(plane);}//初始化渲染器function initRender() {renderer = new THREE.WebGLRenderer({antialias: true,alpha: true});renderer.setClearColor(0x111111, 1); //设置背景颜色renderer.setSize(window.innerWidth, window.innerHeight);//renderer.shadowMap.enabled = true; //显示阴影document.getElementById("WebGL-output").appendChild(renderer.domElement);}//初始化轨道控制器function initControls() {clock = new THREE.Clock(); //创建THREE.Clock对象，用于计算上次调用经过的时间controls = new THREE.OrbitControls(camera, renderer.domElement);controls.autoRotate = true; //是否自动旋转}//性能监控function initStats() {stats = new Stats();stats.setMode(0); //0: fps, 1: msdocument.getElementById("Stats-output").appendChild(stats.domElement);}function render() {arrowLineTexture.offset.x -= 0.03; //更新箭头纹理偏移量flowingLineTexture.offset.x -= 0.05; //更新流动线纹理偏移量const delta = clock.getDelta(); //获取自上次调用的时间差controls.update(delta); //控制器更新stats.update();requestAnimationFrame(render);renderer.render(scene, camera);}//页面初始化function init() {initScene();initCamera();initLight();initModel();initRender();initStats();initControls();render();}window.onload = init;</script>
</body></html>

这篇关于既有方向又会动的线，包你学会制作按箭头方向流动的线(three.js实战3)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/200093。

相关文章

精选20个好玩又实用的的Python实战项目(有图文代码)

精选20个好玩又实用的的Python实战项目(有图文代码)

《精选20个好玩又实用的的Python实战项目(有图文代码)》文章介绍了20个实用Python项目,涵盖游戏开发、工具应用、图像处理、机器学习等,使用Tkinter、PIL、OpenCV、Kivy等库... 目录① 猜字游戏② 闹钟③ 骰子模拟器④ 二维码⑤ 语言检测⑥ 加密和解密⑦ URL缩短⑧ 音乐播放
阅读更多...
SQL Server跟踪自动统计信息更新实战指南

SQL Server跟踪自动统计信息更新实战指南

《SQLServer跟踪自动统计信息更新实战指南》本文详解SQLServer自动统计信息更新的跟踪方法,推荐使用扩展事件实时捕获更新操作及详细信息,同时结合系统视图快速检查统计信息状态,重点强调修... 目录SQL Server 如何跟踪自动统计信息更新：深入解析与实战指南 核心跟踪方法1️⃣ 利用系统目录
阅读更多...
java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)

java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)

《java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)》：本文主要介绍java中pdf模版填充表单踩坑的相关资料,OpenPDF、iText、PDFBox是三... 目录准备Pdf模版方法1：itextpdf7填充表单（1）加入依赖（2）代码（3）遇到的问题方法2：pd
阅读更多...
PyTorch中的词嵌入层(nn.Embedding)详解与实战应用示例

PyTorch中的词嵌入层(nn.Embedding)详解与实战应用示例

《PyTorch中的词嵌入层(nn.Embedding)详解与实战应用示例》词嵌入解决NLP维度灾难,捕捉语义关系,PyTorch的nn.Embedding模块提供灵活实现,支持参数配置、预训练及变长... 目录一、词嵌入(Word Embedding)简介为什么需要词嵌入？二、PyTorch中的nn.Em
阅读更多...
在IntelliJ IDEA中高效运行与调试Spring Boot项目的实战步骤

在IntelliJ IDEA中高效运行与调试Spring Boot项目的实战步骤

《在IntelliJIDEA中高效运行与调试SpringBoot项目的实战步骤》本章详解SpringBoot项目导入IntelliJIDEA的流程,教授运行与调试技巧,包括断点设置与变量查看,奠定... 目录引言：为良驹配上好鞍一、为何选择IntelliJ IDEA？二、实战：导入并运行你的第一个项目步骤1
阅读更多...
Spring Boot3.0新特性全面解析与应用实战

Spring Boot3.0新特性全面解析与应用实战

《SpringBoot3.0新特性全面解析与应用实战》SpringBoot3.0作为Spring生态系统的一个重要里程碑,带来了众多令人兴奋的新特性和改进,本文将深入解析SpringBoot3.0的... 目录核心变化概览Java版本要求提升迁移至Jakarta EE重要新特性详解1. Native Ima
阅读更多...
Spring Boot 与微服务入门实战详细总结

Spring Boot 与微服务入门实战详细总结

《SpringBoot与微服务入门实战详细总结》本文讲解SpringBoot框架的核心特性如快速构建、自动配置、零XML与微服务架构的定义、演进及优缺点,涵盖开发环境准备和HelloWorld实战... 目录一、Spring Boot 核心概述二、微服务架构详解1. 微服务的定义与演进2. 微服务的优缺点三
阅读更多...
SpringBoot集成MyBatis实现SQL拦截器的实战指南

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器？二、MyBATis拦截器基础2.1 核心接口：Interceptor
阅读更多...
从入门到进阶讲解Python自动化Playwright实战指南

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习
阅读更多...
Java docx4j高效处理Word文档的实战指南

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2