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

ThreeJS-3D教学十-有宽度的line

news 2026/2/10 22:44:33

webgl中线是没有宽度的，现实的应用中一般做法都是将线拓宽成面来绘制。默认threejs的线宽是无法调节的，需要用有厚度的线 THREE.Line2。
先看效果图：
在这里插入图片描述

看下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {width: 100%;height: 100%;}* {margin: 0;padding: 0;}.label {font-size: 20px;color: #000;font-weight: 700;}</style>
</head>
<body>
<div id="container"></div>
<script type="importmap">{"imports": {"three": "../three-155/build/three.module.js","three/addons/": "../three-155/examples/jsm/"}}
</script>
<script type="module">
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GPUStatsPanel } from 'three/addons/utils/GPUStatsPanel.js';
import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
import { Line2 } from 'three/addons/lines/Line2.js';
import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
let stats, labelRenderer, gpuPanel;
let camera, scene, renderer, controls;
const group = new THREE.Group();
const matLines = [];
let once = true;
init();
initHelp();
initLight();
axesHelperWord();
animate();let data1 = [{x: -50,y: 50,z: 0},{x: 50,y: 50,z: 0},{x: 50,y: -50,z: 0},{x: -50,y: -50,z: 0},{x: -50,y: 50,z: 0}
];let data2 = [{x: -50,y: 0,z: 0},{x: 50,y: 1,z: 0}
];let data3 = [{x: -25,y: 25,z: 0},{x: 25,y: 25,z: 0},{x: 25,y: -25,z: 0},{x: -25,y: -25,z: 0},{x: -25,y: 25,z: 0}
];let positions1 = [];
let positions2 = [];
let positions3 = [];
let colors = [];
let l = data1.length;let color = new THREE.Color();data1.map((v, i) => {positions1.push(v.x, v.y, v.z);color.setHSL(i / l, 1.0, 0.5);colors.push(color.r, color.g, color.b);
});data2.map((v, i) => {positions2.push(v.x, v.y, v.z);color.setHSL(i / l, 1.0, 0.5);colors.push(color.r, color.g, color.b);
});data3.map((v, i) => {positions3.push(v.x, v.y, v.z);
});draw(positions1, colors);
draw(positions2, colors);
drawSolidLine(positions3, '#f00');function draw(positions, colors) {let geometry = new LineGeometry();// 虚线const matLine = new LineMaterial({// 只有白色 可以显示出渐变色的效果color: 0xffffff,linewidth: 10,vertexColors: THREE.VertexColors,   // 单独设置顶点颜色//resolution:  // renderer.render 时加上这个属性dashed: true,dashSize: 1,gapSize: 1,defines: {USE_DASH: ''}});let line = new Line2(geometry, matLine);line.scale.set(1, 1, 1);line.visible = true;scene.add(line);matLines.push(matLine);geometry.setPositions(positions);geometry.setColors(colors);line.computeLineDistances();
}function drawSolidLine(positions, color) {let geometry = new LineGeometry();// 虚线const matLine = new LineMaterial({// 只有白色 可以显示出渐变色的效果color: color,linewidth: 10,// vertexColors: THREE.VertexColors,   // 单独设置顶点颜色// resolution:  // renderer.render 时加上这个属性dashed: false});let line = new Line2(geometry, matLine);line.scale.set(1, 1, 1);line.visible = true;line.rotateX(Math.PI / 3);scene.add(line);matLines.push(matLine);geometry.setPositions(positions);line.computeLineDistances();
}function init() {camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 10, 2000 );camera.up.set(0, 1, 0);camera.position.set(60, 40, 60);camera.lookAt(0, 0, 0);scene = new THREE.Scene();scene.background = new THREE.Color( '#ccc' );renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );labelRenderer = new CSS2DRenderer();labelRenderer.setSize( window.innerWidth, window.innerHeight );labelRenderer.domElement.style.position = 'absolute';labelRenderer.domElement.style.top = '0px';labelRenderer.domElement.style.pointerEvents = 'none';document.getElementById( 'container' ).appendChild( labelRenderer.domElement );controls = new OrbitControls( camera, renderer.domElement );// 设置最大最小视距controls.minDistance = 20;controls.maxDistance = 1000;window.addEventListener( 'resize', onWindowResize );stats = new Stats();stats.setMode(1); // 0: fps, 1: msdocument.body.appendChild( stats.dom );gpuPanel = new GPUStatsPanel( renderer.getContext() );stats.addPanel( gpuPanel );stats.showPanel( 0 );scene.add( group );
}function initLight() {const AmbientLight = new THREE.AmbientLight(new THREE.Color('rgb(255, 255, 255)'));scene.add( AmbientLight );
}function initHelp() {// const size = 100;// const divisions = 5;// const gridHelper = new THREE.GridHelper( size, divisions );// scene.add( gridHelper );// The X axis is red. The Y axis is green. The Z axis is blue.const axesHelper = new THREE.AxesHelper( 100 );scene.add( axesHelper );
}function axesHelperWord() {let xP = addWord('X轴');let yP = addWord('Y轴');let zP = addWord('Z轴');xP.position.set(50, 0, 0);yP.position.set(0, 50, 0);zP.position.set(0, 0, 50);
}function addWord(word) {let name = `<span>${word}</span>`;let moonDiv = document.createElement( 'div' );moonDiv.className = 'label';// moonDiv.textContent = 'Moon';// moonDiv.style.marginTop = '-1em';moonDiv.innerHTML = name;const label = new CSS2DObject( moonDiv );group.add( label );return label;
}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );
}function animate() {requestAnimationFrame( animate );// 这里请注意	// 把渲染窗口尺寸分辨率传值给材质LineMaterial的resolution属性// resolution属性值会在着色器代码中参与计算if (matLines.length && once) {matLines.forEach(matLine => {matLine.resolution.set(window.innerWidth, window.innerHeight); // resolution of the viewport});once = false;}stats.update();controls.update();labelRenderer.render( scene, camera );renderer.render( scene, camera );
}
</script>
</body>
</html>

相关文章：

ThreeJS-3D教学十-有宽度的line

webgl中线是没有宽度的&#xff0c;现实的应用中一般做法都是将线拓宽成面来绘制。默认threejs的线宽是无法调节的&#xff0c;需要用有厚度的线 THREE.Line2。 先看效果图&#xff1a; 看下代码&#xff1a; <!DOCTYPE html> <html lang"en"> <he…...

编程日记 2023/10/19 13:54:17

安装Elasticsearch步骤（包含遇到的问题及解决方案）

注&#xff1a;笔者是在centos云服务器环境下安装的Elasticsearch 目录 1.安装前准备 2.下载Elasticsearch 3.启动Elasticsearch 非常容易出问题 第一次运行时&#xff0c;可能出现如下错误&#xff1a; 一、内存不足原因启动失败 二、使用root用户启动问题 三、启动ES自…...

编程日记 2023/10/19 13:53:16

网络编程面试笔试真题

网络编程笔试面试真题 1、关于Linux系统中多线程的信号处理&#xff0c;说法中不正确的是&#xff1f; A&#xff1a;在线程环境霞&#xff0c;产生的信号是传递给整个进程的 B&#xff1a;一般情况下&#xff0c;信号会随机给进程的一个线程 C&#xff1a;对某个信号处理函数…...

编程日记 2023/10/19 13:52:15

MySQL官方文档如何查看，MySQL中文文档

这里写自定义目录标题 MySQL官方文档如何查看MySQL中文文档 MySQL官方文档如何查看 MySQL官网地址&#xff1a;https://dev.mysql.com/doc/ 比如这里我要找InnoDB架构 MySQL中文文档 MySQL 5.1中文文档地址&#xff1a;https://www.mysqlzh.com/...

编程日记 2023/10/19 13:50:11

第七章：最新版零基础学习 PYTHON 教程—Python 列表（第四节 -如何在 Python 中查找列表的长度）

列表是 Python 日常编程不可或缺的一部分，所有 Python 用户都必须学习，了解其实用程序和操作是必不可少的，而且总是有好处的。因此，本文讨论了找到第一个这样的实用程序。使用Python 的列表中的元素。 目录 在 Python 中查找列表的长度...

编程日记 2023/10/19 13:49:10

XPS虽没流行，但还在使用！在Windows 10中打开XPS文件的最佳方法

当Windows Vista发布时&#xff0c;微软推出了XPS格式&#xff0c;这是PDF的替代品。XPS文件格式并不是什么新鲜事&#xff0c;但从未获得过多大的吸引力。 因此&#xff0c;XPS&#xff08;XML Paper Specification&#xff09;文件是微软对Adobe PDF文件的竞争对手。尽管XPS…...

编程日记 2023/10/19 13:48:10

23 种设计模式详解（C#案例）

&#x1f680;设计模式简介 设计模式&#xff08;Design pattern&#xff09;代表了最佳的实践&#xff0c;通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时…...

编程日记 2023/10/19 13:46:08

@SpringBootApplication配置了scanBasePackages导致请求一直404，分析下原因

出现RequestMapping注解的Controller类可能是因为SpringBootApplication注解中配置了scanBasePackages导致的请求一直返回404错误。 SpringBootApplication注解是Spring Boot的核心注解之一&#xff0c;它用于启动Spring Boot应用程序。这个注解实际上是一个组合注解&#xff…...

编程日记 2023/10/19 13:45:06

{大厂漏洞 } OA产品存在SQL注入

0x01 漏洞介绍 江苏叁拾叁-OA是由江苏叁拾叁信息技术有限公司开发的一款OA办公平台&#xff0c;主要有知识管理&#xff0c;工作流程&#xff0c;沟通交流&#xff0c;辅助办公&#xff0c;集成解决方案&#xff0c;应用支撑平台&#xff0c;基础支撑等功能。 该系统也与江苏叁…...

编程日记 2023/10/19 13:44:05

6-8 舞伴问题 分数 15

void DancePartner(DataType dancer[], int num) {LinkQueue maleQueue SetNullQueue_Link();LinkQueue femaleQueue SetNullQueue_Link();// 将男士和女士的信息分别加入对应的队列for (int i 0; i < num; i) {if (dancer[i].sex M){EnQueue_link(maleQueue, dancer[i]…...

编程日记 2023/10/19 13:43:04

samba服务器的功能是什么

Samba服务器是一个开源的网络文件共享服务&#xff0c;其主要功能是在不同操作系统之间实现文件和打印机共享。它最常用于将Linux/Unix系统与Windows系统互联&#xff0c;但也支持其他操作系统。 以下是Samba服务器的主要功能&#xff1a; 文件共享&#xff1a;Samba允许用户在…...

编程日记 2023/10/19 13:42:03

MSQL系列(五) Mysql实战-索引最左侧匹配原则分析及实战

Mysql实战-索引最左侧匹配原则分析及实战 前面我们讲解了索引的存储结构&#xff0c;BTree的索引结构&#xff0c;以及索引最左侧匹配原则&#xff0c;Explain的用法&#xff0c;今天我们来实战一下 最左侧匹配原则 1.联合索引最左侧匹配原则 联合索引有一个最左侧匹配原则 …...

编程日记 2023/10/19 13:40:00

react|redux状态管理

react|redux状态管理 参考官网&#xff1a;https://cn.redux-toolkit.js.org/tutorials/quick-start 状态管理使用流程 1、安装&#xff1a; npm install react-redux reduxjs/toolkit2、创建store.js 通过configureStore的hook对reducer&#xff08;或slice&#xff09;进行…...

编程日记 2023/10/19 13:38:59

Python之旅----判断语句

布尔类型和比较运算符 布尔类型 布尔类型的定义 布尔类型的字面量&#xff1a; True 表示真&#xff08;是、肯定&#xff09; False 表示假 &#xff08;否、否定&#xff09; 也就是布尔类型进行判断&#xff0c;只会有2个结果&#xff1a;是或否 定义变量存储布尔类型…...

编程日记 2023/10/19 13:37:57

【JavaEE】文件操作和IO

1 什么是文件&#xff1f; 针对硬盘这种持久化存储的I/O设备&#xff0c;当我们想要进行数据保存时&#xff0c;往往不是保存成一个整体&#xff0c;而是独立成一个个的单位进行保存&#xff0c;这个独立的单位就被抽象成文件的概念 2 文件路径 文件路径就是指咱们文件系统中…...

编程日记 2023/10/19 13:36:56

python使用dataset快速使用SQLite

目录 一、官网地址 二、安装 三、 快速使用 一、官网地址 GitHub - pudo/dataset: Easy-to-use data handling for SQL data stores with support for implicit table creation, bulk loading, and transactions. 二、安装 pip install dataset 如果是mysql&#xff0c;则…...

编程日记 2023/10/19 13:35:55

Python 练习100实例（21-40）

Python 练习实例21 题目&#xff1a;猴子吃桃问题&#xff1a;猴子第一天摘下若干个桃子&#xff0c;当即吃了一半&#xff0c;还不瘾&#xff0c;又多吃了一个第二天早上又将剩下的桃子吃掉一半&#xff0c;又多吃了一个。以后每天早上都吃了前一天剩下的一半零一个。到第10天…...

编程日记 2023/10/19 13:34:54

“创新启变 聚焦增长”极狐(GitLab)媒体沟通会，共话智能时代软件开发新生态

10 月 18 日 北京 昨日&#xff0c;全球领先 AI 赋能 DevSecOps 一体化平台极狐(GitLab) 在北京举办了主题为“创新启变 聚焦增长”的媒体沟通会。极狐(GitLab) CEO 柳钢就“中国企业数字化转型、软件研发、技术自主可控等热点问题&#xff0c;以及 AI 大模型时代下&#xff0c…...

编程日记 2023/10/19 13:32:50

【ChatGLM2-6B】在只有CPU的Linux服务器上进行部署

简介 ChatGLM2-6B 是清华大学开源的一款支持中英双语的对话语言模型。经过了 1.4T 中英标识符的预训练与人类偏好对齐训练&#xff0c;具有62 亿参数的 ChatGLM2-6B 已经能生成相当符合人类偏好的回答。结合模型量化技术&#xff0c;用户可以在消费级的显卡上进行本地部署&…...

编程日记 2023/10/19 13:31:49

Xilinx IP 10 Gigabit Ethernet Subsystem IP

Xilinx IP 10 Gigabit Ethernet Subsystem IP 10 Gb 以太网子系统在 10GBASE-R/KR 模式下提供 10 Gb 以太网 MAC 和 PCS/PMA，以提供 10 Gb 以太网端口。发送和接收数据接口使用 AXI4 流接口。可选的 AXI4-Lite 接口用于内部寄存器的控制接口。 • 设计符合 10 Gb 以太网规范…...

编程日记 2023/10/19 13:29:46

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2026/2/5 5:05:56

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

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

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

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

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

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2026/1/31 10:58:46

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...

编程新知 2026/1/23 4:26:12

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2026/2/4 17:28:54

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

编程新知 2026/1/22 13:36:20