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

学习threejs，绘制二维线

news 2026/2/8 8:24:20

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

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2026/1/23 4:56:05

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2026/2/7 10:59:04

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/2/7 0:28:16

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2026/2/1 16:32:53

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2026/1/23 2:04:44

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2026/1/24 6:30:25

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/11/1 2:00:51

渗透实战PortSwigger Labs指南：自定义标签XSS和SVG XSS利用

阻止除自定义标签之外的所有标签 先输入一些标签测试&#xff0c;说是全部标签都被禁了 除了自定义的 自定义<my-tag onmouseoveralert(xss)> <my-tag idx onfocusalert(document.cookie) tabindex1> onfocus 当元素获得焦点时&#xff08;如通过点击或键盘导航&…...

编程新知 2026/2/5 18:48:19