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

学习threejs，绘制二维线

news 2026/1/13 12:09:46

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/1/11 16:05:53

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2026/1/8 15:19:02

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/1/8 15:18:51

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/12/26 0:50:26

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

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/1/7 0:28:59

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2026/1/10 8:49:34

阿里云Ubuntu 22.04 64位搭建Flask流程（亲测）

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

编程新知 2026/1/9 3:12:03