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

学习threejs，绘制二维线

news 2026/5/17 12:28:31

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

微软DebugMCP：可视化调试MCP协议，解决AI与工具通信黑盒问题

1. 项目概述&#xff1a;当你的AI助手开始“自言自语”&#xff0c;你需要一个调试器 最近在折腾AI应用开发的朋友&#xff0c;估计没少跟各种“智能体”打交道。无论是基于OpenAI的GPTs&#xff0c;还是那些能联网、能调用工具的自定义助手&#xff0c;它们背后的核心通信协议…...

编程新知 2026/5/17 11:10:53

Steam成就管理器终极指南：3步修复错失的游戏成就

Steam成就管理器终极指南&#xff1a;3步修复错失的游戏成就 【免费下载链接】SteamAchievementManager A manager for game achievements in Steam. 项目地址: https://gitcode.com/gh_mirrors/st/SteamAchievementManager Steam Achievement Manager&#xff08;SAM&a…...

编程新知 2026/5/17 8:13:07

3个维度深度解析：UABEA如何重塑Unity资源处理生态

3个维度深度解析&#xff1a;UABEA如何重塑Unity资源处理生态 【免费下载链接】UABEA c# uabe for newer versions of unity 项目地址: https://gitcode.com/gh_mirrors/ua/UABEA 在Unity游戏开发和资源处理的复杂生态中&#xff0c;开发者常常面临一个核心挑战&#xf…...

编程新知 2026/5/17 8:02:19

2026生鲜店收银软件特点功能对比

每天傍晚高峰期&#xff0c;生鲜店门口排起的长队总是让店主心头一紧。顾客手里拿着刚挑好的蔬菜水果&#xff0c;眼神里透着急切&#xff0c;而收银台前的店员却还在手忙脚乱地查找商品代码、手动输入重量&#xff0c;甚至因为系统卡顿导致支付失败。这种场景不仅流失了潜在客…...

编程新知 2026/5/17 7:07:57

从单一AI到智能体集群：构建模块化AI协作系统的核心原理与实践

1. 项目概述&#xff1a;当AI学会“开会”&#xff0c;一个开源智能体集群的诞生最近在GitHub上看到一个挺有意思的项目&#xff0c;叫daveshap/OpenAI_Agent_Swarm。光看名字&#xff0c;你可能会觉得这又是一个调用OpenAI API的简单封装库。但如果你点进去&#xff0c;花上十…...

编程新知 2026/5/17 5:52:52

CircuitPython与NeoPixel实战：从硬件连接到动态灯光效果

1. 项目概述&#xff1a;用Python点亮你的硬件创意如果你玩过Arduino&#xff0c;可能会觉得C/C的语法和库管理有点门槛&#xff1b;如果你熟悉Python&#xff0c;又觉得它和硬件之间隔着一层纱。那么&#xff0c;当Raspberry Pi Pico这块性价比极高的微控制器&#xff0c;遇上…...

编程新知 2026/5/17 5:08:32

基于Feather微控制器的智能灯光系统：颜色感应与BLE遥控实现

1. 项目概述与核心价值又到了折腾点节日氛围的时候了。往年都是买现成的彩灯串&#xff0c;总觉得少了点意思&#xff0c;今年决定自己动手&#xff0c;做个能“听懂”指令、甚至能“看见”颜色的智能灯光系统。这个项目的核心&#xff0c;就是用一块小小的微控制器&#xff0c…...

编程新知 2026/5/17 4:48:56

Linux内核升级C11标准：从C89到现代C语言的演进与实战解析

1. 项目概述&#xff1a;一次内核语言的“心脏移植”最近Linux内核社区的一个决定&#xff0c;在开发者圈子里激起了不小的波澜&#xff1a;计划将内核的C语言标准从使用了超过十年的C89/C90&#xff0c;逐步迁移到C11。这听起来可能像是一个枯燥的技术规范更新&#xff0c;但对…...

编程新知 2026/5/17 3:52:09

从实验设计到代理模型：我是如何用拉丁超立方抽样节省了80%的仿真成本

从实验设计到代理模型&#xff1a;我是如何用拉丁超立方抽样节省了80%的仿真成本 去年夏天&#xff0c;当我接手某新型电动汽车外形的空气动力学优化项目时&#xff0c;团队正面临一个典型的多参数优化困境&#xff1a;每次计算流体力学&#xff08;CFD&#xff09;仿真需要6小…...

编程新知 2026/5/17 1:56:53

嘎嘎降AI和率零哪个更适合毕业论文：2026年性价比达标率用户口碑完整横评测试报告

嘎嘎降AI和率零哪个更适合毕业论文&#xff1a;2026年性价比达标率用户口碑完整横评测试报告 帮几个不同专业的同学处理过论文AI率&#xff0c;用过的工具加起来也有六七款了。 综合看&#xff0c;嘎嘎降AI&#xff08;www.aigcleaner.com&#xff09;是最稳的选择&#xff0…...

编程新知 2026/5/17 1:18:02