既有方向又会动的线，包你学会制作按箭头方向流动的线(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。

相关文章

用js控制视频播放进度基本示例代码

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意：总结前言在javascript中控制视频播放
阅读更多...
Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
Pandas使用SQLite3实战

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法：读
阅读更多...
Python实战之屏幕录制功能的实现

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕
阅读更多...
最新Spring Security实战教程之Spring Security安全框架指南

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security？同类框架对比Spring Security典型应用场景传统
阅读更多...
最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言
阅读更多...
OpenManus本地部署实战亲测有效完全免费(最新推荐)

OpenManus本地部署实战亲测有效完全免费(最新推荐)

《OpenManus本地部署实战亲测有效完全免费(最新推荐)》文章介绍了如何在本地部署OpenManus大语言模型,包括环境搭建、LLM编程接口配置和测试步骤,本文给大家讲解的非常详细,感兴趣的朋友一... 目录1.概况2.环境搭建2.1安装miniconda或者anaconda2.2 LLM编程接口配置2
阅读更多...
基于Canvas的Html5多时区动态时钟实战代码

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》：本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示，通过Canvas的API，可以绘制出6个不同城市的时钟，并且这些时钟可以动态转动，每个时钟上都会标注出对应的24小时制时间，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Spring AI与DeepSeek实战一之快速打造智能对话应用

Spring AI与DeepSeek实战一之快速打造智能对话应用

《SpringAI与DeepSeek实战一之快速打造智能对话应用》本文详细介绍了如何通过SpringAI框架集成DeepSeek大模型,实现普通对话和流式对话功能,步骤包括申请API-KEY、项目搭... 目录一、概述二、申请DeepSeek的API-KEY三、项目搭建3.1. 开发环境要求3.2. mav
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2