`THREE.LineBasicMaterial` 是 three.js 中用来创建用于绘制线条的基本材质。

demo案例

THREE.LineBasicMaterial 是 three.js 中用来创建用于绘制线条的基本材质。以下是它的入参、出参、方法和属性的详细说明。
在这里插入图片描述

入参 (Constructor Parameters)

THREE.LineBasicMaterial 构造函数可以接收一个包含多个属性的对象。常用属性如下：

const material = new THREE.LineBasicMaterial( {color: 0xffffff, // 颜色linewidth: 1, // 线宽（只有在WebGLRenderer中有效）linecap: 'round', // 线段端点样式，可选值：'butt', 'round', 'square'linejoin: 'round', // 线段连接处样式，可选值：'round', 'bevel', 'miter'opacity: 1.0, // 不透明度transparent: false, // 是否透明vertexColors: false, // 是否使用顶点颜色fog: true // 是否受雾影响
});

出参 (Return Value)

构造函数 new THREE.LineBasicMaterial 创建并返回一个 THREE.LineBasicMaterial 对象。

方法 (Methods)

THREE.LineBasicMaterial 继承自 THREE.Material，因此具有 THREE.Material 的所有方法。常用的方法包括：

  • .copy(source): 复制源材质的所有属性到当前材质。
  • .clone(): 克隆当前材质，返回一个新的材质实例。
  • .dispose(): 释放材质使用的资源。
  • .setValues(parameters): 设置材质的属性。

属性 (Properties)

THREE.LineBasicMaterial 继承自 THREE.Material，并有以下特有属性：

  • .color: THREE.Color 线条的颜色，默认为白色 (0xffffff)。
  • .linewidth: number 线条的宽度。注意，线宽的实际效果在不同平台和设备上可能有所不同。
  • .linecap: string 线段端点的样式，可选值为 'butt', 'round', 'square'，默认值为 'round'。
  • .linejoin: string 线段连接处的样式，可选值为 'round', 'bevel', 'miter'，默认值为 'round'。
  • .vertexColors: boolean 指定是否使用顶点颜色。可选值为 THREE.NoColors, THREE.VertexColors。
  • .fog: boolean 指定材质是否受雾影响，默认值为 true。
  • .opacity: number 不透明度，取值范围为 0.0 到 1.0，默认值为 1.0。
  • .transparent: boolean 指定材质是否透明，默认值为 false。

示例

以下是一个使用 THREE.LineBasicMaterial 绘制线条的简单示例：

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 创建线条的几何体
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([-1.0, -1.0,  0.0,1.0, -1.0,  0.0,0.0,  1.0,  0.0
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));// 创建线条的材质
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });// 创建线条对象
const line = new THREE.Line(geometry, material);
scene.add(line);// 设置相机位置
camera.position.z = 5;// 渲染函数
function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
}animate();

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - buffergeometry - lines - indexed</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"></head><body><div id="container"></div> <!-- 容器元素 --><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - lines - indexed</div> <!-- 信息栏 --><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three'; // 导入 three.jsimport Stats from 'three/addons/libs/stats.module.js'; // 导入 Stats 库let container, stats; // 定义容器和统计对象let camera, scene, renderer; // 定义相机、场景和渲染器let parent_node; // 定义父节点init(); // 初始化函数animate(); // 动画函数function init() {container = document.getElementById( 'container' ); // 获取容器元素camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 ); // 创建透视相机camera.position.z = 9000; // 设置相机位置scene = new THREE.Scene(); // 创建场景const geometry = new THREE.BufferGeometry(); // 创建几何体const material = new THREE.LineBasicMaterial( { vertexColors: true } ); // 创建材质const indices = []; // 定义索引数组const positions = []; // 定义位置数组const colors = []; // 定义颜色数组let next_positions_index = 0; // 下一个顶点索引const iteration_count = 4; // 迭代次数const rangle = 60 * Math.PI / 180.0; // 角度function add_vertex( v ) {// 添加顶点positions.push( v.x, v.y, v.z );colors.push( Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 1 );return next_positions_index ++;}// 简单的 Koch 曲线迭代function snowflake_iteration( p0, p4, depth ) {if ( -- depth < 0 ) {const i = next_positions_index - 1; // p0 已经在数组中add_vertex( p4 );indices.push( i, i + 1 );return;}const v = p4.clone().sub( p0 );const v_tier = v.clone().multiplyScalar( 1 / 3 );const p1 = p0.clone().add( v_tier );const angle = Math.atan2( v.y, v.x ) + rangle;const length = v_tier.length();const p2 = p1.clone();p2.x += Math.cos( angle ) * length;p2.y += Math.sin( angle ) * length;const p3 = p0.clone().add( v_tier ).add( v_tier );snowflake_iteration( p0, p1, depth );snowflake_iteration( p1, p2, depth );snowflake_iteration( p2, p3, depth );snowflake_iteration( p3, p4, depth );}// 生成雪花function snowflake( points, loop, x_offset ) {for ( let iteration = 0; iteration != iteration_count; iteration ++ ) {add_vertex( points[ 0 ] );for ( let p_index = 0, p_count = points.length - 1; p_index != p_count; p_index ++ ) {snowflake_iteration( points[ p_index ], points[ p_index + 1 ], iteration );}if ( loop ) snowflake_iteration( points[ points.length - 1 ], points[ 0 ], iteration );// 平移输入曲线for ( let p_index = 0, p_count = points.length; p_index != p_count; p_index ++ ) {points[ p_index ].x += x_offset;}}}let y = 0;// 创建不同形状的雪花snowflake([new THREE.Vector3( 0, y, 0 ),new THREE.Vector3( 500, y, 0 )],false, 600);y += 600;snowflake([new THREE.Vector3( 0, y, 0 ),new THREE.Vector3( 250, y + 400, 0 ),new THREE.Vector3( 500, y, 0 )],true, 600);y += 600;snowflake([new THREE.Vector3( 0, y, 0 ),new THREE.Vector3( 500, y, 0 ),new THREE.Vector3( 500, y + 500, 0 ),new THREE.Vector3( 0, y + 500, 0 )],true, 600);y += 1000;snowflake([new THREE.Vector3( 250, y, 0 ),new THREE.Vector3( 500, y, 0 ),new THREE.Vector3( 250, y, 0 ),new THREE.Vector3( 250, y + 250, 0 ),new THREE.Vector3( 250, y, 0 ),new THREE.Vector3( 0, y, 0 ),new THREE.Vector3( 250, y, 0 ),new THREE.Vector3( 250, y - 250, 0 ),new THREE.Vector3( 250, y, 0 )],false, 600);geometry.setIndex( indices ); // 设置索引geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) ); // 设置位置属性geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); // 设置颜色属性geometry.computeBoundingSphere(); // 计算包围球const lineSegments = new THREE.LineSegments( geometry, material ); // 创建线段lineSegments.position.x -= 1200; // 平移位置lineSegments.position.y -= 1200; // 平移位置parent_node = new THREE.Object3D(); // 创建父节点parent_node.add( lineSegments ); // 添加线段到父节点scene.add( parent_node ); // 将父节点添加到场景renderer = new THREE.WebGLRenderer(); // 创建渲染器renderer.setPixelRatio( window.devicePixelRatio ); // 设置像素比renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染器大小container.appendChild( renderer.domElement ); // 将渲染器添加到容器stats = new Stats(); // 创建统计对象container.appendChild( stats.dom ); // 将统计对象添加到容器window.addEventListener( 'resize', onWindowResize ); // 添加窗口大小改变事件监听}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight; // 更新相机宽高比camera.updateProjectionMatrix(); // 更新相机投影矩阵renderer.setSize( window.innerWidth, window.innerHeight ); // 更新渲染器大小}function animate() {requestAnimationFrame( animate ); // 请求动画帧render(); // 渲染场景stats.update(); // 更新统计信息}function render() {const time = Date.now() * 0.001; // 获取当前时间parent_node.rotation.z = time * 0.5; // 旋转父节点renderer.render( scene, camera ); // 渲染场景}</script></body>
</html>

压图地址

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/864652.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

第一后裔快速领取掉宝奖励礼包教程

第一后裔快速领取掉宝奖励礼包教程

7月2日第一后裔在steam正式上线&#xff0c;全新刷宝射击mmo玩法&#xff0c;角色的招式非常新颖 &#xff0c;画面冲击感十足&#xff0c;而且游戏人物的自定义功能非常丰富&#xff0c;超级细节真实的人物建模&#xff0c;加上超带感的服装自定义系统&#xff0c;让你能玩一整…
阅读更多...
在CentOS7云服务器下搭建MySQL网络服务详细教程

在CentOS7云服务器下搭建MySQL网络服务详细教程

目录 0.说明 1.卸载不要的环境 1.1查看当前环境存在的服务mysql或者mariadb 1.2卸载不要的环境 1.2.1先关闭相关的服务 1.2.2查询曾经下载的安装包 1.2.3卸载安装包 1.2.4检查是否卸载干净 2.配置MySQLyum源 2.1获取mysql关外yum源 2.2 查看当前系统结合系统配置yum…
阅读更多...
优思学院｜今时今日还有谁想干供应商质量工程师（SQE）？

优思学院｜今时今日还有谁想干供应商质量工程师（SQE）？

引言&#xff1a;SQE的迷思 供应商质量工程师&#xff08;SQE&#xff09;这个职位&#xff0c;听起来颇具技术性和专业性&#xff0c;但在职场中&#xff0c;却常常被视为一个既有挑战又不容易受到欢迎的岗位。SQE究竟是一个怎样的角色&#xff1f;谁愿意选择这个职业&#x…
阅读更多...
为什么127.0.0.1和localhost之间算跨域？

为什么127.0.0.1和localhost之间算跨域？

原文&#xff1a;https://mp.weixin.qq.com/s/4zJBMNEntwjqAfN6A6diUA 什么是同源策略、跨域 跨域问题是指在浏览器中&#xff0c;当一个网页向不同域名、不同端口或不同协议的资源发起请求时&#xff0c;会受到限制。这是由浏览器的**同源策略&#xff08;Same-Origin Policy…
阅读更多...
uniapp实现可拖动悬浮按钮(最新版2024-7月)

uniapp实现可拖动悬浮按钮(最新版2024-7月)

此章主要介绍如何使用uniapp跨平台开发&#xff0c;实现悬浮按钮&#xff0c;移动端经常会有所这样的需求&#xff0c;那么功能如下&#xff1a; 1.圆圈悬浮球&#xff0c;上下左右靠边显示 2.可以界面任何拖动&#xff0c;不会超出界面 3.单击悬浮球的点击事件 效果&#xf…
阅读更多...
Resilience4j之RateLimiter和常见限流算法总结

Resilience4j之RateLimiter和常见限流算法总结

官网地址&#xff1a;https://resilience4j.readme.io/docs/ratelimiter 中文文档&#xff1a;https://resilience4j.readme.io/docs/ratelimiter 【1】概述 Resilience4j提供了一个限流器&#xff0c;它将从epoch开始的所有纳秒划分为多个周期。每个周期的持续时间RateLimi…
阅读更多...
【opencv - C++ - Ubuntu】putText 显示中文最快方法

【opencv - C++ - Ubuntu】putText 显示中文最快方法

话不多说&#xff0c;直接上代码 #include <iostream> #include <opencv2/opencv.hpp> #include <opencv2/freetype.hpp>using namespace std; using namespace cv;int main(void) {Mat image(1000, 1800, CV_8UC3, Scalar(200,162,33));Ptr<freetype::F…
阅读更多...
单细胞水平看生存分析相关基因

单细胞水平看生存分析相关基因

技能树学徒作业 针对每个癌症的全部基因批量了做了单基因的cox分析&#xff0c;挑选统计学显著的去对应的癌症去打分&#xff0c;看看是否有单细胞亚群特异性。 这题比较常规&#xff0c;但是可以过一遍基础分析的流程。 选择了GSE38832芯片数据用于分析得到cox/logrank显著…
阅读更多...
生物墨水与生物打印：一场生物科技的革新？

生物墨水与生物打印：一场生物科技的革新？

挤出生物打印 挤出生物打印原理 挤出生物打印利用机械力将生物墨水或生物材料溶液挤出&#xff0c;形成连续的丝状结构&#xff0c;并逐层堆叠构建出三维结构。根据所使用的机械力&#xff0c;挤出生物打印可分为三种类型&#xff1a; 气动式: 利用压缩空气驱动生物墨水或生…
阅读更多...
Amazon Bedrock 实践 | 动手玩转 Claude 3

Amazon Bedrock 实践 | 动手玩转 Claude 3

生成式 AI 和大模型在 2024 年已经进入落地实践阶段。因此&#xff0c;围绕开发者在生成式应用程序开发中的主要痛点和需求&#xff0c;我们组织了这个 “Amazon Bedrock 实践” 的系列&#xff0c;希望可以帮助开发者高效地上手生成式 AI 和大模型的应用开发&#xff0c;本篇为…
阅读更多...
SMS群发信息API接口安全性有哪些保障方法？

SMS群发信息API接口安全性有哪些保障方法？

SMS群发信息API接口支持哪些格式&#xff1f;如何使用API接口&#xff1f; SMS群发信息API接口被广泛应用于企业营销、客户服务、身份验证等多个领域。确保SMS群发信息API接口的安全性&#xff0c;已成为企业和开发者们必须重视的问题。AoKSend将探讨几种保障SMS群发信息API接…
阅读更多...
GeoServer改造Springboot源码十（样式管理设计）

GeoServer改造Springboot源码十（样式管理设计）

GeoServer改造Springboot源码一&#xff08;公共部分&#xff09; GeoServer改造Springboot源码二&#xff08;数据源管理设计&#xff09; GeoServer改造Springboot源码三&#xff08;数据源管理代码&#xff09; GeoServer改造Springboot源码四&#xff08;图层管理设计&a…
阅读更多...
CNN的小体验

CNN的小体验

用的pytorch。 训练代码cnn.py&#xff1a; import torch import torch.nn as nn import torch.optim as optim import torchvision import torchvision.transforms as transforms import torch.nn.functional as F# 定义超参数 num_epochs 10 batch_size 100 learning_rat…
阅读更多...
使用Python绘制彩虹效果：动态彩虹动画

使用Python绘制彩虹效果：动态彩虹动画

文章目录 引言准备工作前置条件 代码实现与解析导入必要的库初始化Pygame定义绘制彩虹函数定义颜色列表主循环 完整代码 引言 彩虹是自然界中最美丽的现象之一。通过编程&#xff0c;我们可以将这一奇妙的景象带到屏幕上。在这篇博客中&#xff0c;我们将使用Python来创建一个…
阅读更多...
聊聊 golang 的 map

聊聊 golang 的 map

1、哈希表 哈希表是一个很常见的数据结构&#xff0c;用来存储无序的 key/value 对&#xff0c;给定的 key 可以在 O(1) 时间复杂度内查找、更新或删除对应的 value。 设计一个好的哈希表&#xff0c;需要着重关注两个关键点&#xff1a;哈希函数、冲突处理。 1.1 哈希函数 …
阅读更多...
Redis 高级数据结构业务实践

Redis 高级数据结构业务实践

0、前言 本文所有代码可见 > 【gitee code demo】 本文会涉及 hyperloglog 、GEO、bitmap、布隆过滤器的介绍和业务实践 1、HyperLogLog 1.1、功能 基数统计&#xff08;去重&#xff09; 1.2、redis api 命令作用案例PFADD key element [element ...]添加元素到keyPF…
阅读更多...
力扣 用队列实现栈（Java）

力扣 用队列实现栈（Java）

核心思想&#xff1a;因为队列都是一端进入另一端出&#xff08;先进先出&#xff0c;后进后出&#xff09;&#xff0c;因此一个队列肯定是不能实现栈的功能的&#xff0c;这里就创建两个队列来模拟栈的先进后出&#xff0c;后进先出。 比如说如果是push操作我们肯定是要弹出栈…
阅读更多...
STM32自己从零开始实操08:电机电路原理图

STM32自己从零开始实操08:电机电路原理图

一、LC滤波电路 其实以下的滤波都可以叫低通滤波器。 1.1倒 “L” 型 LC 滤波电路 1.1.1定性分析 1.1.2仿真实验 电感&#xff1a;通低频阻高频的。仿真中高频信号通过电感&#xff0c;因为电感会阻止电流发生变化&#xff0c;故说阻止高频信号 电容&#xff1a;隔直通交。…
阅读更多...
65、基于卷积神经网络的调制分类(matlab)

65、基于卷积神经网络的调制分类(matlab)

1、基于卷积神经网络的调制分类的原理及流程 基于卷积神经网络&#xff08;CNN&#xff09;的调制分类是一种常见的信号处理任务&#xff0c;用于识别或分类不同调制方式的信号。下面是基于CNN的调制分类的原理和流程&#xff1a; 原理&#xff1a; CNN是一种深度学习模型&a…
阅读更多...
SpringBoot学习06-[SpringBoot与AOP、SpringBoot自定义starter]

SpringBoot学习06-[SpringBoot与AOP、SpringBoot自定义starter]

SpringBoot自定义starter SpringBoot与AOP SpringBoot与AOP 使用AOP实现用户接口访问日志功能 添加AOP场景启动器 <!--添加AOP场景启动器--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023