当前位置： 首页 > news >正文

学习threejs，绘制二维线

news 2025/7/8 10:56:02

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

文章目录

  • 一、🍀前言
  • 二、🍀绘制二维线
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍基于threejs如何绘制二维线，亲测可用。希望能帮助到您。一起学习，加油！加油！

二、🍀绘制二维线

1. ☘️实现思路

  • 1、创建Scene三维场景
  • 2、初始化camera相机，定义相机位置 camera.position.set，设置相机朝向lookAt
  • 3、创建渲染器，document加入渲染器
  • 4、创建THREE.LineBasicMaterial线材质，创建THREE.Geometry线几何，线几何计入THREE.Vector3顶点，创建THREE.Line线类型，场景scene加入THREE.Line线。
  • 5、渲染器renderer渲染场景scene和相机camera

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn2</title><script src="lib/threejs/91/three.js"></script><style>body{margin:0;}canvas{width: 100%; height:100%; display: block;}</style>
</head>
<body>
<script>//创建场景var scene = new THREE.Scene()//设置相机（视野，显示口的宽高比，近裁剪面，远裁剪面）var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 )//设置相机的视点camera.position.set(0,0,100)//设置相机的朝向camera.lookAt(new THREE.Vector3(0,0,0))//渲染器var renderer = new THREE.WebGLRenderer()//设置渲染器的高度和宽度，如果加上第三个值 false，则按场景大小显示，等比例缩放renderer.setSize( window.innerWidth, window.innerHeight,false)//将渲染器添加到html当中document.body.appendChild( renderer.domElement )//定义线的基本材料，我们可以使用LineBasicMaterial（实线材料）和LineDashedMaterial（虚线材料）var material = new THREE.LineBasicMaterial({color:0x0000ff})//设置具有几何顶点的几何（Geometry）或缓冲区几何（BufferGeometry）设置顶点位置，看名字就知道了，一个是直接将数据保存在js里面的，另一个是保存在WebGL缓冲区内的，而且肯定保存到WebGL缓冲区内的效率更高var geometry = new THREE.Geometry();geometry.vertices.push(new THREE.Vector3(-50,0,0))geometry.vertices.push(new THREE.Vector3(0,50,0))geometry.vertices.push(new THREE.Vector3(50,0,0))//使用Line方法将线初始化var line = new THREE.Line(geometry, material)//将线添加到场景scene.add(line)line.rotation.x += 1//使用渲染器渲染出场景和相机renderer.render(scene, camera);
</script>
</body>
</html>

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

相关文章：

学习threejs，绘制二维线

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言二、&#x1f340;绘制二维线1. ☘️…...

编程日记 2024/9/28 4:39:57

跑lvs出现soft connect怎么处理？

首先&#xff0c;我们先了解一下什么是soft connect。简而言之&#xff0c;就是工具会将所有连接在psub上的信号认作soft connect&#xff08;也就是short&#xff09;。如图1所示&#xff0c;VSS和AVSS都接到了p上&#xff0c;它们通过psub便有了soft connect。 如果有soft co…...

编程日记 2024/9/28 4:38:56

实验1 Python语言基础一

目录 实验1 Python语言基础一1、下载安装Python&#xff0c;贴出验证安装成功截图2、建立test.py文件,运行后贴出截图&#xff0c;思考if __name”__main__”的意思和作用3、分别运行下面两种代码&#xff0c;分析运行结果产生的原因。记牢python中重要语法“tab”的作用。6、编…...

编程日记 2024/9/28 4:35:53

多线程相关内容

一、进程与线程 (一)进程的概述 进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的一个独立单位。每个进程都有自己独立的内存空间&#xff0c;包括代码、数据和运行时的环境。进程的执行需要系统为其分配各种资源&#xff0c;如 CPU 时间、内存空间、文件描述符…...

编程日记 2024/9/28 4:32:50

mybatis-puls快速入门

1.概述 在真实项目开发中我们的服务模块&#xff0c;一般都要进行数据库操作&#xff0c;并且每个domain都有crud&#xff0c;需多次写重复代码。我们使用MybatisPlus&#xff0c;就不用写重复代码&#xff0c;并且还有模板的功能&#xff0c;可以一键生成daomin,query,mapper…...

编程日记 2024/9/28 4:27:44

Pool 和 PG 架构（二）

Ceph 的存储架构设计旨在提供高可用性和可扩展性。其中&#xff0c;Pool&#xff08;存储池&#xff09;和 PG&#xff08;放置组&#xff09;是两个核心概念。下面详细介绍 Ceph 的 Pool 和 PG 架构以及它们之间的关系。 1. Pool池 概念&#xff1a; Pool&#xff08;存储池…...

编程日记 2024/9/28 4:25:42

客户服务升级指南：如何以细节赢得客户忠诚

在当今这个竞争激烈的市场环境中&#xff0c;客户忠诚度已成为企业生存与发展的关键所在。而要想赢得并维持客户的忠诚&#xff0c;仅凭优质的产品或服务已远远不够&#xff0c;更需要企业在客户服务上下足功夫&#xff0c;从每一个细节入手&#xff0c;打造超越客户期待的服务…...

编程日记 2024/9/28 4:23:38

闲盒支持的组网方式和注意事项

1. 直连光猫拨号​ 通过光猫拨号&#xff0c;设备直连光猫的设备&#xff0c;需要对光猫开启UPNP并关闭DMZ 如果只接一个盒子&#xff0c;建议直接针对盒子IP开dmz。 2. 直连路由器​ 通过路由器拨号&#xff0c;设备直连路由器的设备&#xff0c;需要对路由器开启UPNP并关闭…...

编程日记 2024/9/28 4:22:37

828华为云征文｜华为云Flexus云服务器X实例之openEuler系统下搭建MaxKB开源知识库问答系统

828华为云征文&#xff5c;华为云Flexus云服务器X实例之openEuler系统下搭建MaxKB开源知识库问答系统 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、MaxKB 介绍2.1 MaxKB简介2.2 MaxKB整体架构…...

编程日记 2024/9/28 4:21:37

[Linux]：信号(上)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;Linux学习 贝蒂的主页&#xff1a;Betty’s blog 1. 信号的引入 1.1 信号的概念 在Linux系统中&#xff0c;信号&#xff08;…...

编程日记 2024/9/28 4:19:35

浙大数据结构：05-树9 Huffman Codes

这道题难度挺大&#xff0c;写起来较为费劲&#xff0c;这里我依然使用了STL库&#xff0c;使得代码量大幅减少不过百行&#xff0c;便于大家理解。 机翻&#xff1a; 1、条件准备 数组存储字符对应频率&#xff0c;n,student存储输入多少字符&#xff0c;有多少学生测试。 …...

编程日记 2024/9/28 4:18:34

scrapy爬虫基础

一、初识 创建项目&#xff1a; scrapy startproject my_one_project # 创建项目命令 cd my_one_project # 先进去&#xff0c; 后面在里面运行 运行爬虫命令为&#xff1a;scrapy crawl tk spiders下创建test.py 其中name就是scrapy crawl tk &…...

编程日记 2024/9/28 4:16:32

利用H5无插件播放RTSP流的实现方案

文章目录 0. 引言1. 问题分析1.1 RTSP流与浏览器的兼容性1.2 解决思路 2. 方案设计2.1 总体架构2.2 关键组件 3. 实施步骤3.1 环境准备3.2 安装与配置3.2.1 安装FFmpeg3.2.2 安装OpenResty3.2.3 添加nginx-rtmp-module模块3.2.4 配置OpenResty 3.3 推流操作3.4 前端播放3.4.1 引…...

编程日记 2024/9/28 4:14:30

CSS文本格式化

通过 CSS 中的文本属性您可以像操作 Word 文档那样定义网页中文本的字符间距、对齐方式、缩进等等&#xff0c;CSS 中常用的文本属性如下所示&#xff1a; text-align&#xff1a;设置文本的水平对齐方式&#xff1b;text-decoration&#xff1a;设置文本的装饰&#xff1b;te…...

编程日记 2024/9/28 4:13:29

python的 __name__和__doc__属性

__name__属性 __name__属性 用于判断当前模块是不是程序入口&#xff0c;如果当前程序正在使用&#xff0c;__name__的值为__main__。 在编写程序时&#xff0c;通常需要给每个模块添加条件语句&#xff0c;用于单独测试该模块的功能。 每个模块都有一个名称&#xff0c;当一…...

编程日记 2024/9/28 4:11:26

Go语言中的Mutex实现探讨

解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 在并发编程中，互斥锁（Mutex）是一个重要的工具，它帮助我们控制多个协程对共享资源的访问，从而防止数据竞争和不一致性。本文将深入探讨Go语言中Mutex的实现历程和使用方式，同时分享在处理并发问题时的思路与…...

编程日记 2024/9/28 4:10:25

第五届计算机科学与管理科技国际学术会议(ICCSMT 2024)

梁哲&#xff0c;同济大学长聘特聘教授&#xff0c;国家杰青、首届国家杰青延续项目获得者、上海市曙光学者、上海市优秀学术带头人。本科毕业于新加坡国立大计算机工程系、硕士毕业于新加坡国立大学工业与系统工程系、博士毕业于美国新泽西州立大学工业工程系。理论研究主要集…...

编程日记 2024/9/28 4:09:25

【machine learning-13-线性回归的向量化】

向量化 向量化简洁并行计算 向量化 线性回归的向量化表示如下&#xff0c;其中w 和 x 都分别加了箭头表示这是个向量&#xff0c;后续不加也可以表示为向量&#xff0c;w和x点乘加上b&#xff0c;就构成了多元线性回归的表达方式&#xff0c;如下&#xff1a; 那么究竟为什么…...

编程日记 2024/9/28 4:08:24

【CSS|第2期】探索HTML与CSS中的文档流：从自然流到高级布局技巧

日期&#xff1a;2024年9月9日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉在这里插入代码片得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对…...

编程日记 2024/9/28 4:07:23

MATLAB绘图基础9：多变量图形绘制

参考书&#xff1a;《 M A T L A B {\rm MATLAB} MATLAB与学术图表绘制》(关东升)。 9.多变量图形绘制 9.1 气泡图 气泡图用于展示三个或更多变量变量之间的关系&#xff0c;气泡图的组成要素&#xff1a; 横轴( X {\rm X} X轴)&#xff1a;表示数据集中的一个变量&#xff0c…...

编程日记 2024/9/28 4:05:21

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/7/7 8:38:21

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/6/20 18:20:46

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/7/7 20:47:23

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/7/8 2:40:39

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/7/4 0:33:02

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/7/5 17:16:12

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2025/7/7 3:02:19

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/7/5 5:13:16

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...

编程新知 2025/7/6 21:45:21

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...

编程新知 2025/7/7 22:20:41