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

学习threejs，绘制二维线

news 2026/3/28 7:07:15

👨‍⚕️ 主页： 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

别再只升级OpenSSH了！一次搞懂Linux离线环境下的依赖包管理与编译安装避坑指南

离线环境下的Linux软件编译&#xff1a;从OpenSSH升级到通用依赖管理方法论 当你面对一台无法连接互联网的Linux服务器时&#xff0c;软件升级和安装往往会变成一场噩梦。想象一下&#xff1a;你下载了最新版OpenSSH的源码包&#xff0c;满怀希望地执行./configure&#xff0c;…...

编程新知 2026/3/28 7:00:53

百川2-13B-4bits模型微调指南：提升OpenClaw任务执行准确率

百川2-13B-4bits模型微调指南&#xff1a;提升OpenClaw任务执行准确率 1. 为什么需要微调百川模型&#xff1f; 去年夏天&#xff0c;当我第一次用OpenClaw自动化整理电脑上的数千份文档时&#xff0c;遇到了一个尴尬的问题——AI经常把技术文档和私人照片混在一起归类。这让…...

编程新知 2026/3/28 6:52:50

各行业开发经验全面解析，本凡科技助你快速提升项目成功率

在当今快速发展的市场中&#xff0c;各行业的开发经验已成为决定项目成败的关键因素。每个行业都面临独特的挑战和需求&#xff0c;了解这些特性有助于企业制定有效的开发策略。例如&#xff0c;科技行业通常需要快速响应市场变化&#xff0c;而食品行业则需关注合规性和安全标…...

编程新知 2026/3/28 4:36:01

OpenClaw技能分享：GLM-4.7-Flash驱动的邮件自动处理系统

OpenClaw技能分享&#xff1a;GLM-4.7-Flash驱动的邮件自动处理系统 1. 为什么需要自动化邮件处理 每天早晨打开邮箱&#xff0c;看到堆积如山的未读邮件总让人头皮发麻。作为一个小团队的负责人&#xff0c;我经常需要处理客户咨询、内部沟通、会议邀请等各种类型的邮件。最…...

编程新知 2026/3/28 4:19:55

利用快马平台AI能力，十分钟搭建你的Copilot式代码生成原型

今天想和大家分享一个快速验证AI编程助手&#xff08;Copilot类工具&#xff09;原型的实践。作为一个经常需要快速验证想法的开发者&#xff0c;我发现用InsCode(快马)平台可以省去很多搭建环境的时间&#xff0c;特别适合做这种概念验证。 明确核心需求 Copilot的核心能力其实…...

编程新知 2026/3/28 2:10:26

电子元器件检测数据集VOC+YOLO格式1032张5类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)&#xff1a;1032标注数量(xml文件个数)&#xff1a;1032标注数量(txt文件个数)&#xff1a;1032标注类别…...

编程新知 2026/3/28 2:04:19

百考通：AI赋能设计都高效落地

在数字化时代&#xff0c;市场调研、产品设计、学术研究等场景中&#xff0c;问卷设计作为核心环节&#xff0c;直接影响着数据收集的质量与工作推进的效率。传统问卷设计往往面临流程繁琐、耗时耗力、问题设计不精准等痛点&#xff0c;而百考通&#xff08;https://www.baikao…...

编程新知 2026/3/28 1:46:02

Flink技术实践-超时异常踩坑与优化

一、背景介绍在Flink实时计算的生产环境中&#xff0c;最令人头疼的往往不是复杂的业务逻辑&#xff0c;而是那些突如其来的“超时异常”。这些异常就像是系统中的“幽灵”&#xff0c;通常在业务高峰期或网络抖动时出现&#xff0c;导致作业重启、数据延迟甚至数据丢失。最近几…...

编程新知 2026/3/28 1:03:35

利用快马平台十分钟搭建树莓派环境监测系统原型

今天想和大家分享一个快速搭建树莓派环境监测系统的小实验。作为一个硬件爱好者&#xff0c;我经常用树莓派做各种物联网原型开发&#xff0c;但每次从零开始配置环境、写基础代码都很耗时。最近发现InsCode(快马)平台能帮我省去很多重复工作&#xff0c;特别适合快速验证想法。…...

编程新知 2026/3/28 0:19:22

如何实现Flomo到Obsidian的高效迁移与无缝衔接？一站式数据迁移工具全解析

如何实现Flomo到Obsidian的高效迁移与无缝衔接&#xff1f;一站式数据迁移工具全解析 【免费下载链接】flomo-to-obsidian Make Flomo Memos to Obsidian Notes 项目地址: https://gitcode.com/gh_mirrors/fl/flomo-to-obsidian 当你需要将积累已久的Flomo笔记迁移到Obs…...

编程新知 2026/3/27 23:28:39